微信小程式來了，可以利用WEB技術在微信打造一個有著Native應用體驗的應用，業界非常看好這種形式。但是你們也許不知道，Google早已有類似的規劃，甚至層次更高。那就是PWA（漸進式增強WEB應用）。
PWA有以下幾種特性：
- Installablity（可安裝性）
- App Shell
- Offline（離線能力）
- Re-engageable（推送通知能力）
所有這些特性都是“優雅降級、漸進增強的”，給支援的裝置更好的體驗，不支援的裝置也不會更差。這就和微信小程式這種二流設計的根本不同之處。
本部落格也在向著PWA的方向邁進，第一步我選擇了Offline，也就是離線能力。可以讓客戶在沒有網路連線的時候仍然可以使用部分服務。這個能力利用了Service Worker技術。
實現思路就是，利用service worker，另起一個執行緒，用來監聽所有網路請求，講已經請求過的資料放入cache，在斷網的情況下，直接取用cache裡面的資源。為請求過的頁面和圖片，展示一個預設值。當有網路的時候，再重新從伺服器更新。
程式碼這裡就不貼了，以後可能會專門寫一篇來詳細介紹Service Worker，有興趣的可以直接參考原始碼。
註冊起來也非常方便
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// ServiceWorker_js (function() { 'use strict'; navigator.serviceWorker.register('/sw.js', {scope: '/'}).then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); })(); |
這裡需要注意的是，sw.js所在的目錄要高於它的控制範圍，也就是scope。我把sw.js放在了根目錄來控制整個目錄。
接下來看看我們的最終效果吧，你也可以在自己的瀏覽器下斷網嘗試一下。當然有部分瀏覽器目前還不支援，比如大名鼎鼎的Safari。
離線有快取情況
離線無快取情況
會展示一個預設的頁面
-EOF-
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
