PWA踩坑記，手把手教學vue搭建PWA

PWA離線應用

• 前端的日益發展，都離不開性能優化的手段，包括 CDN、CSS Sprite、文件的合併壓縮、異步加載、資源緩存等等。更多的時候爲了減小用戶量的請求，因而就有了PWA，秒開網站，離線訪問等等的炫酷裝B技能。

• 因而就火燒眉毛想拉開PWA神祕的面紗，使用到下面的：

  • vuecli3.0
  • register-service-worker
  • 一臺不太卡的安卓(安卓版本不夠高，Chrome不能添加到桌面上)

• 先上圖:

vuecli3.0

• vuecli的最新版本vuecli3.1，經過 npm install -g vue@cli 來安裝
• vuecli3.0多了不少神奇方便的功能，做者應該想要簡化開發者的開發過程，有了炫酷的可視化界面GUI，經過 vue ui 可在瀏覽器查看、安裝、管理包等等
• vuecli3.0還集成了service worker、一些經常使用的語法檢測，自動化測試等等的工具

register-service-worker

• 使用過 create-react-app 的小夥伴確定知道，react官方推薦的腳手架中默認佩帶有 register-service-worker的包，通過打包後，額外生成如下文件:

  • `manifest.json: 可配置該應用在瀏覽器，桌面中的打開方式，應用名字，應用運行動畫等等

  • service-worker.js： 可看到被壓縮打包好的service worker的安裝，激活、卸載等等的功能與配置

  • asset-manifest.json： 離線下強制緩存的文件，使得APP可在離線下運行

有關service worker的詳細問題可經過如下連接查看:

• lavas.baidu.com/pwa/README

• neveryu.github.io/2017/06/08/…

• www.colabug.com/3479278.htm…

後端配置

• 離線緩存須要後臺配合，經過有效的緩存達到離線的效果，怎樣的緩存纔是有效的？就是強制緩存啊！
• 強制緩存與協商緩存都爲緩存，主要有如下的不一樣：
  • 協商緩存：有緩存，可是會主動請求服務器後，服務器不返回任何資源
  • 強制緩存：有緩存，不會請求服務器，使用本地或者內存或者service worker中的緩存
• 先科普下緩存的分佈圖:

• 在Chrome控制檯的 Network 中查看頁面加載時所下載的資源，會發現有些資源會有cache from disk、cache from memory等等，還會有些資源直接顯示該資源的資源文件大小，那麼這是怎麼回事呢？
  • cache from disk: 這是強制緩存，表示該資源從本地的緩存文件中拉取資源
  • cache from memory：這是強制緩存，表示該資源從內存中拉取資源
  • 直接顯示資源大小：這是協商緩存或者是不存在緩存，每次都是從服務器下載該資源

• 這裏就以express爲例子，須要設置公用過濾器，爲GET請求設置強制緩存，時間爲兩小時

//如下的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