vue PWA

vue創建PWA項目：

vue ui

創建項目，選擇手動配置，選擇支持PWA

 

 創建完成之后，項目根目錄下生成registerServiceWorker.js，在main.js中注冊service-worker

 

 在vue.config.js中配置需要緩存的ajax請求

 

創建service-worker，目錄與配置文件中的一致：

創建dev文件夾，在dev下創建service-worker.js

 打包后的目錄：

 ajax接口包含getlunbo的接口會被緩存，其他的接口不會被緩存；

demo：

運行項目之后打開控制台可以在application cache cache-storage中看到緩存；

 

在network中選擇offline，模擬斷網，刷新頁面依然可以訪問頁面，

 

 

 點擊瀏覽器中的+號，可以安裝應用到本地，實現離線瀏覽

 

 總結：

PWA：漸進式web application

tips：只能在http://localhost或者https下運行；

離線瀏覽web應用，生成桌面應用，頂部通知，預緩存（在頁面沒有啟動之前，請求資源保存到瀏覽器），真正訪問的時候很快，請求本地

英文看支持率可以在caniuse  中文就是lavas官網可以看到

service-worker

本質就是瀏覽器開啟一個線程（類似webworker），該線程可以攔截請求，發請求（類似node服務器）

sw生命周期

 

 install:Service Worker安裝成功后被觸發的事件，在事件處理函數中添加需要緩存的文件（預先緩存資源）

activate：當Service-Worker安裝完成后並進入激活狀態，會觸發activate事件，通過監聽activate事件你可以做一些預處理，如對舊版本的更新 對無用緩存的清理等。

（檢查更新資源）

message: Service Worker運行於獨立context中，無法直接訪問當前頁面主線程的DOM等信息，但是通過postMessage API,可以實現他們之間的消息傳遞，這樣主線程就可以接受Service Worker的指令操作 DOM.(瀏覽器與serviceworker通信的事件)

數據緩存

H5中的CacheAPI

使用CacheAPI獲取指定緩存內容

demo:

- ```js

// 創建響應對象 開始
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});
var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
var myResponse = new Response(blob,init);
// 創建響應對象 結束
caches.open('key1').then(function(cachedRequests) { 
cachedRequests.put('/def113',myResponse)
});
```

緩存

workbox-sw一個工具庫

• 預緩存靜態資源 ====> worker.precaching.precacheAndRoute(['xxx'])
• 動態緩存動態資源 ====>workbox.routing.registerRoute(fn)

緩存算法策略 workbox.strategies

• 緩存優先  cacheFirst()
• 網絡優先 networkFirst()
• 僅緩存 cahceOnly()
• 僅網絡 networkOnly()
• state while Revalidate(緩存優先並更新緩存) staleWhileRevalidate()

更新問題

在Service Worker中會緩存service worker的具體行為

讓register-worker每次請求新的service worker就可以更改緩存內容與緩存策略