pwa（漸進式 web 應用）運用現代的 web api 以及傳統的漸進式增強策略來建立跨平台 web 應用程式。
pwa 所需的關鍵要素是service worker支援。 值得慶幸的是，桌面和移動裝置上的所有主流瀏覽器都支援 service worker。
注意：service workers 大量使用promise，因為他們通常會等待響應通過，之後他們會以成功或失敗的方式響應。
首先使用該serviceworkercontainer.register()
安裝完成後，service worker會經歷以下生命週期：
安裝（install）
啟用（activate）
事件。完成啟用。
在安裝完成後，嘗試快取一些靜態資源：
self.addeventlistener('install', function
(event) )
);});
首先，self.skipwaiting()執行，告知瀏覽器直接跳過等待階段，淘汰過期的service worker指令碼，直接開始嘗試啟用新的service worker。
然後使用caches.open開啟乙個cache，開啟後，通過cache.addall嘗試快取我們預先宣告的靜態檔案。
頁面的所有網路請求，都會通過service worker的fetch事件觸發，service worker通過caches.match嘗試從cache中查詢快取，快取如果存在，則直接返回快取中的response，否則，建立乙個真實的網路請求。
self.addeventlistener('fetch', function
(event)
return
fetch(event.request);
}));
});
如果我們需要在請求過程中，再向cache storage中新增新的快取，可以通過cache.put方法新增，
首先有乙個白名單，白名單中的cache是不被淘汰的。
之後通過caches.keys()拿到所有的cache storage，把不在白名單中的cache淘汰。
淘汰使用caches.delete()方法。它接收cachename作為引數，刪除該cachename所有快取。
self.addeventlistener('activate', function
(event)
}));
}));
});
參考部落格：service worker學習與實踐（一）——離線快取
PWA 漸進式 web 應用
背景 解決的問題 關鍵時間節點 主要特點 使用pwa的基本要求 離線通知 作用域 更新策略 瀏覽器通過自身 diff 演算法能夠檢測 service work 的更新包含兩種方式 生命週期 mainfest欄位詳解 short name 應用展示的名稱 桌面上顯示的名稱 icons 定義不同尺寸的應...
漸進式Web應用 PWA 對前端技術的挑戰
1.什麼是pwa?第一步 使用https 第二步 建立乙個應用程式清單 manifest 第三步 建立乙個 service worker 第四步 建立可用的離線頁面3.pwa示例 我們先建立乙個關於 pwa 的專案資料夾，進入資料夾下我們準備一張 120x120的一張，作為我們的應用程式圖示。建立乙...
Makefile漸進式訓練
本目錄主要包含makefile一步步遞進學習的示例 makefile 例項 進行makefile小實驗，體驗makefile的功能。目錄中的makefile是不嚴謹的編寫方式。目錄中的makefile phony是嚴謹的編寫方式。切換至step0目錄下，即makefile所在的同級目錄,使用如下命令...