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

PWA離線應用

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

  • 因而就火燒眉毛想拉開PWA神祕的面紗,使用到下面的:前端

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

vuecli3.0react

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

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

後端配置

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

  • 在Chrome控制檯的 Network 中查看頁面加載時所下載的資源,會發現有些資源會有cache from diskcache 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

相關文章
相關標籤/搜索