PWA(Progressive Web App) 的概念相信很多人都不陌生，但真正去應用 PWA 的網站確是少之又少，而應用了 PWA 並不等於就是離線WebApp，很多網站雖然用了PWA，但也僅僅是為了加快網站打開速度，並沒有完整的實現一個離線WebApp
離線WebApp，顧名思義，即使斷網也能夠正常使用的網頁，會有點難以想象，可以親自體驗一下：https://geek4.wuchen.org ，打開過一次之後（iOS的webview暫不支持離線，需要使用safari打開），再次打開不需要網絡，使用上也不會有阻礙。上述網站只是一個demo，這是合合信息第四屆極客大賽題目，做一個支出管理的App，可以掃描票據自動錄入信息。
如何做一個離線WebApp？
這個問題有點太大，沒辦法用一句話來回答，我們做一下拆分。
- 如何離線document請求？
- 如何離線css、js、圖片、字體等資源請求？
- 如何使用瀏覽器本地存儲？
- 如何設置App的名字和logo？
- 如何實現消息推送？
通常打開一個網頁，瀏覽器會先從服務器下載一個document文檔，然後下載對應的js和css資源，可能還會有圖片或者字體等資源，最後會發出ajax請求獲取數據來展示頁面。如果要做離線WebApp，ajax請求則可以放棄，通常使用瀏覽器來存儲用户數據，這有點像是在開發單機遊戲。
如何離線document請求？
第一印象可能是 Http Cache，採用max-age等強制緩存，但之前文章也説過，這種存儲方式一般只能設置30天的最長時間，超過30天會變成永久緩存，你的網頁可能會永遠失去控制。採用強制緩存的缺陷是，無法實時更新，只能等緩存到期之後才能從服務器獲取新版本。
我們需要引入 service worker 的概念。service worker 是 web worker 的一個變種，web worker 是主線程之外的另一個線程，可以用來執行一些複雜且耗時的操作，service worker 也是一個線程，但它可以讓開發者控制主線程的所有網絡請求，類似於 nginx 的反向代理。利用 service worker ，我們可以將document請求緩存下來，下次請求，則從緩存中讀取，而且它自帶更新機制。
如何離線資源請求？
同樣的，service worker 也可以幫我們緩存資源文件，而且可控性比 Http Cache 強制緩存要更好。
<html>
<head>
<title>找到</title>
</head>
<body>
<script src="app.12345.js"></script>
</body>
</html>上面這個document，依賴一個12345版本的app.js，只要document不更新，那相應的依賴的資源也不會變化。所以資源一般是跟隨document一起緩存的，這樣整個站點都被緩存下來，也就實現了離線WebApp的基礎框架。
如何使用瀏覽器本地存儲？
瀏覽器本地存儲有以下幾種：
cookie: 這個一般是與服務器交互的時候會用到，每一個請求都會攜帶cookie信息localStorage: 本地存儲一些簡單key-value的信息，但容量有限，一般為2M上限sessionStorage: 同上，唯一區別是，localStorage是永久緩存，而sessionStorage是本tab才有效IndexDB: 瀏覽器端的數據庫，屬於NoSQL類型，非關係型數據庫，與MongoDB類似，可以存儲大量數據，只要硬盤夠用Cache Storage: 專門為service worker提供的本地存儲，常用於請求的緩存，get與post都能緩存
離線WebApp，除了cookie，基本都會用到。
如何設置App的名字和logo？
我們會用到一個 manifest.json 的配置文件，在原生應用開發中，清單配置文件很常見，在web上也有這麼一套規範，可以讓開發者給自己網站設定名字、logo、啓動路徑等信息。
如何實現消息推送？
消息推送在國內暫時無法實施，因為依賴瀏覽器推送服務。國產瀏覽器基本不支持 Web Push 機制，chrome支持，但卻依賴google，因GFW的問題，我們無法使用google服務。
總結
本文只是離線WebApp這個系列的一個開始，後面將圍繞着這幾個問題進行展開，最終實現開頭給的demo網站。
參考
https://web.dev/progressive-w...
