前端的日益發展,都離不開性能優化的手段,包括 CDN、CSS Sprite、文件的合併壓縮、異步加載、資源緩存等等。更多的時候爲了減小用戶量的請求,因而就有了PWA,秒開網站,離線訪問等等的炫酷裝B技能。html
因而就火燒眉毛想拉開PWA神祕的面紗,使用到下面的:前端
先上圖:vue
vuecli3.0react
register-service-workergit
使用過 create-react-app 的小夥伴確定知道,react官方推薦的腳手架中默認佩帶有 register-service-worker的包,通過打包後,額外生成如下文件:github
`manifest.json: 可配置該應用在瀏覽器,桌面中的打開方式,應用名字,應用運行動畫等等chrome
service-worker.js: 可看到被壓縮打包好的service worker的安裝,激活、卸載等等的功能與配置express
asset-manifest.json: 離線下強制緩存的文件,使得APP可在離線下運行npm
有關service worker的詳細問題可經過如下連接查看:json
後端配置
//如下的Code設置了公用的響應頭中返回的強緩存時間、CORS跨域等等
app.all("*", function(req, res, next) {
if(req.path !== "/" && !req.path.includes(".")) {
res.header("Access-Control-Allow-Origin", req.headers["origin"] || "*")
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Headers", 'Content-Type,Content-Length, Authorization, authorization,\'Origin\',Accept,X-Requested-With')
res.header("Access-Control-Allow-Methods", "POST,GET,PUT,DELETE,OPTIONS")
res.header("Content-Type", "application/json;charset=utf-8")
if(req.method.toUpperCase() === "GET"){
res.header("Cache-Control","max-age=7200")
}
}
next()
})
複製代碼
經過設置請求緩存後,靜態資源都必須設置爲強制緩存,才能達到離線訪問的效果。
此次採坑中遇到神坑的問題,當服務器設置了響應頭res.header("Access-Control-Allow-Origin", req.headers["origin"] || "*")
後,若是同一個瀏覽器都是GET到該服務器的請求,則會報錯,報錯中顯示跨域禁止,由於上面設置的強制緩存的緣由,瀏覽器會主動緩存該GET請求,因此緩存中的GET請求的響應頭中的Access-Control-Allow-Origin
(設置容許域名跨域)會顯示第一次發出GET請求的域名,而第二次同一個瀏覽器不一樣的域名去GET這個請求,則Access-Control-Allow-Origin
返回的是第一個請求的域名,因此會報錯。
最後經過打包後,第一次訪問SPA時,service worker會自動緩存該SPA中所須要的資源,而AJAX請求的數據,則是被瀏覽器主動緩存的,從而能夠達到緩存的效果,在安卓的高版本的chrome中,還能夠將該SPA像APP同樣打包下載到桌面上,有本身的開機動畫等等。
在評論處感謝王品洲
的提醒:(PC)Chrome不能添加到桌面上 :能夠試試 F12->Application-> Manifest ->Add to homesreen