Note: 一個初步的 Chrome Packaged App 寫法

chanjarster 發布于2019-07-25 13:22 / 2646人閱讀

摘要：主要看文檔里的兩個頁面代碼基本上和官方給的一樣我放在倉庫里了后面就記一些我關心的點了資源相對路徑問題首先是目錄結構主要是文件我沒有放在根目錄然后是注意這里的相對路徑是從根目錄而不是路徑作為基準的和插件的啟動方式不同不能通過聲明一般擴展是

主要看 Chrome App 文檔里的兩個頁面:
Chrome App Lifecycle
Create Your First App

代碼基本上和官方給的一樣, 我放在倉庫里了:
https://code.csdn.net/jiyinyiyong/demo-packaged-app/tree/master
后面就記一些我關心的點了:

資源相對路徑問題

首先是目錄結構, 主要是 HTML 文件, 我沒有放在根目錄:

?? tree
.
├── README.md
├── css
│?? └── main.css
├── html
│?? └── app.html
├── js
│?? ├── bg.js
│?? └── main.js
└── manifest.json

3 directories, 6 files

然后是 js/bg.js, 注意這里的 HTML 相對路徑,
是從 app 根目錄而不是 bg.js 路徑作為基準的:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("html/app.html", {
    "bounds": {
      "width": 400,
      "height": 500
    }
  });
});

Packaged App 和插件的啟動方式不同, 不能通過 manifest.json 聲明,
一般擴展是需要手動聲明使用版本的, 這里的例子不用..

然后是 app.html, 注意, 這里 JS CSS 又是根據文件的相對路徑來的:




  APp
  
  


hello APp

之所以特別關注相對路徑, 是因為 HTML 會是 Jade 生成的, 不方便任意使用路徑,
設置為了 HTML 能在 App 或者 server 同時運行, 必需事先了解.

開啟 DevTools

App 的調試需要在 chrome://flags 開啟對應的選項, 否則沒有 DevTools..

Find "Experimental Extension APIs", and click its "Enable" link.

頁面的 Reload

App 打開后, 似乎屏蔽了刷新的機制, 只能從頁面上手動觸發..
Console 調用 location.reload() 無法對頁面進行刷新
還好, chrome.runtime.reload() 還是能正常使用的.
https://developer.chrome.com/extensions/runtime#method-reload

還有需要注意的是, App 的權限和 Extension 不同, Extension 里獲取不到 App
就是說, 我用 Chrome Extension 來 reload 這個 App 就不成功了.
不過 App 的一個好處可以直接使用 TCP, 這就有可能通過網絡檢測自動刷新頁面了...
http://developer.chrome.com/apps/app_network

GPU云服務器云服務器計算機的初步學習 Packaged 紅米note3手機的云服務器 sql的寫法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39063.html

Chrome Packaged App的一些坑

摘要：私有，元素和子元素的文本將不可選，但是，子元素可以通過重設回可選。當內容過長時無法向下滾動解決方法最近在寫Http Craft——一個開源HTTP請求模擬的Chrome App過程中遇到了一個頭疼的問題，作為一個CSS挫人，記錄一下無法對應用內的文本進行選擇無法對應用內的文本進行選擇（input和textarea可以選擇）解決方法：需要向css樣式中添加如下樣式 bod...

GitChat 2019-08-28 17:55 評論0 收藏0
Spring Boot 2.0 外部化配置介紹

摘要：可以使用外部化配置來方便在不同環境的運行同樣的程序文件文件環境變量命令行參數內置順序實現了很多按以下順序進行合理的相同屬性的覆蓋目錄下的全局設置屬性，如果激活測試用例上的注解測試用例上的注解。簡介在應用中管理配置并不是一個容易的任務，尤其是在應用需要部署到多個環境中時。通常會需要為每個環境提供一個對應的屬性文件，用來配置各自的數據庫連接信息、服務器信息和第三方服務賬號等。通常的應用...

lmxdawn 2019-08-16 13:38 評論0 收藏0
初步整理的關于 Progressive Web Apps 的資料

摘要：在上看到發的視頻被狂轉開始注意之前幾乎對這個詞語沒有印象看到是在的演講還以為是新技術在上找一下這次好多個視頻是關于的視頻的內容主要是講網站優化分別用做例子可惜沒有大概要等小右補方案應該沒有問題從視頻看優化的效果非常顯著本來好幾秒的在 Twitter 上看到 Addy Osmani 發的視頻被狂轉, 開始注意https://twitter.com/addyosmani/status/7...

luffyZh 2019-08-19 18:24 評論0 收藏0
spring boot學習(6)— 配置信息及其讀取優先級

摘要：優先級如下使用文件使用文件，會根據以下目錄去尋找，添加到中，優先級依次遞增。目錄下目錄工程根目錄工程跟目錄下的目錄加載順序從優先級高的先加載。屬性值怎么取優先級高的會覆蓋優先級低的。但是在同等目錄下，優先級高于文件的配置信息。 1. properties 信息從哪里取在不同的環境，我們需要使用不同的配置，Spring boot 已經提供了相關功能，可以是 properties 文件，...

stormzhang 2019-08-16 16:15 評論0 收藏0
Java Service Provider Interface

摘要：之前的作用范圍其中驅動通常使用來引入所需要的驅動。在編譯期間不用引入具體的具體實現類不管還是等。所以包的應該設置為。用于從中找到接口的實現類。文件中有兩個驅動名。而不是通過來找實現類的。是通過找一個固定包下的固定類類而是找固定文件下的內容。之前 maven 的runtime作用范圍 showImg(https://segmentfault.com/img/remote/1460000...

jaysun 2019-08-16 12:30 評論0 收藏0