一. 基本介紹
1. 漸進式：適用所有瀏覽器，因為它是以漸進式增強作為宗旨開發的，不支援的瀏覽器不影響
2. 流暢：能夠借助service worker在離線或者網路較差的情況下正常訪問
5. 粘性：通過推送離線通知等，可以讓使用者回流
1. 需要index.html引入manifest.json檔案
2. 例：
3. 注意：需要在https協議或者http://localhost下訪問才能正常使用
4. 配置完成就可以新增到桌面了
三. 谷歌除錯（可以在模擬機開啟localhost網頁）
1. 電腦開啟chrome - 更多工具 - 開發者工具 - more tools - remote
四. 使用http-server開啟乙個本地伺服器
2. 在終端輸入：
3. 開啟 http-server服務
4. 終端進入目標資料夾，然後在終端輸入：
http-server -c-1 （⚠️只輸入http-server的話，更新了**後，頁面不會同步更新）
五. web work
六. server worker（持久離線快取） （實現預快取和網頁離線瀏覽，在有網路的時候進行快取無網路就可以瀏覽了）
服務人員的一項功能是在服務人員安裝時將一組檔案儲存到快取的功能。
這通常稱為「預快取」，因為您是在使用服務工作者之前快取內容。
1. 進行操作快取和網路請求
2. event.waituntil用於生命週期順序執行
三個監聽對應事件應該做的事情
注意：儲存html要儲存/不能是/index.html不然訪問快取請求/就會找不到
七. cachestorage
八. promise
1. 乙個方法的呼叫可能出現成功或者失敗，比如建立檔案
2. 其中的then方法是傳入**成功或失敗處理
3. catch其實就是then(null, fail)then方法只處理**失敗方法
九. manifest的scope
1. 類似於跨域這種東西
2. 設定了scope的server-worker的作用範圍只能在此路徑或子路徑
3. server-worker載入的js檔案也限制了範圍只能在js檔案路徑或子路徑
十. pwa安裝確定按鈕**
注意：要想新增pwa到桌面成功必須先fq
十一． 攔截谷歌初始化pwa後自動彈窗事件
1. 如果已安裝該應用程式
，則不會觸發beforeinstallevent事件
2. 可以在beforeinstallevent裡拿到pwa事件，發現如果沒有使用者互動監聽不到：如：使用者需要點選螢幕就能觸發此事件
3. 儲存的事件只能呼叫prompt()一次延遲事件。
如果使用者將pwa彈窗關閉，則需要等到
beforeinstallprompt事件再次觸發（通常是在userchoice屬性解析
後立即觸發）
。十二. 檢測您的應用是否從主螢幕啟動
js 層判斷：
if (window.matchmedia('(display-mode: standalone)').matches)css 層判斷：
@media all and (display-mode: standalone)safari 判斷：
if (window.n**igator.standalone === true)
PWA 學習筆記 一
概念 pwa 的關鍵技術在瀏覽器中的支援度 2 service worker 的支援度達到 89.84 3 notifications api 的支援度達到 75.17 4 push api 的支援度達到 78.06 產生原因 移動時代 主要特點 1 可靠 即使在網路不穩定甚至斷網的環境下，也能瞬間...
PWA筆記和簡單例項
一 manifest的使用和介紹 1 建立manifest.json檔案，並進行配置，常用配置引數有 應用圖示 background color 背景色 theme color 主題色 display standalone 顯示模式 2 在index.html中引入manifest.json檔案 二...
PWA技術深入學習
當manifest.json更新的時候需要更新sw的版本號,手機上操作不流暢,經常出現不能新增到桌面,chrome瀏覽器,華為手機 未來會變好 主螢幕上新增的快速入口能夠及時隨頁面更新依賴的gcm服務在國內無法使用const subscribeoptions registration.pushman...