前陣子在個(gè)項(xiàng)目做緩存的過(guò)程中，無(wú)意間發(fā)現(xiàn)PWA這個(gè)好東西席函，當(dāng)時(shí)比較忙沒(méi)來(lái)細(xì)細(xì)研究铐望，現(xiàn)在回過(guò)來(lái)頭來(lái)看看。
什么是PWA
介紹就不介紹了茂附，這里有更詳細(xì)的正蛙，直接開(kāi)始實(shí)驗(yàn)。
創(chuàng)建項(xiàng)目
使用vue-cli3來(lái)構(gòu)建項(xiàng)目基本的結(jié)構(gòu)营曼，在選擇配置項(xiàng)的時(shí)候把PWA support勾上乒验。
配置項(xiàng)
首先我們需要配置一下webpack打包后的路徑，不然我們將會(huì)看到一片空白和一堆404的報(bào)錯(cuò)蒂阱。
在根目錄下創(chuàng)建vue.config.js,然后寫一些簡(jiǎn)單的配置锻全。
module.exports = {
publicPath: './'
};
然后來(lái)到src里面找到registerServiceWorker.js文件狂塘，這個(gè)就是service workers的配置文件,可以對(duì)sw的各個(gè)生命周期進(jìn)修改，這次主要是簡(jiǎn)單的體驗(yàn)功能所以我并沒(méi)有修改
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready () {
console.log(
'準(zhǔn)備完成'
)
},
registered () {
console.log('注冊(cè)成功')
},
cached () {
console.log('緩存')
},
updatefound () {
console.log('正在下載新內(nèi)容.')
},
updated () {
console.log('新內(nèi)容可用鳄厌；請(qǐng)刷新.')
},
offline () {
console.log('找不到Internet連接荞胡。應(yīng)用程序正在脫機(jī)模式下運(yùn)行')
},
error (error) {
console.error('服務(wù)工作者注冊(cè)過(guò)程中出錯(cuò):', error)
}
})
}
接下來(lái)進(jìn)入public文件加找到manifest.json文件，這個(gè)是為了實(shí)現(xiàn) PWA 應(yīng)用添加至桌面的功能了嚎，可以配置用的圖標(biāo)泪漂、名稱等信息。詳細(xì)可以看https://pwa.baidu.com/pwa/engage-retain-users/add-to-home-screen/introduction歪泳，打不開(kāi)的復(fù)制鏈接再打開(kāi)萝勤。
{
"name": "PWA-DEMO", //項(xiàng)目主名稱
"short_name": "DEMO", //項(xiàng)目小名
"icons": [ //設(shè)置你需要的logo圖標(biāo)，我這里隨便找了一張
{
"src": "./timg.jpg",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./timg.jpg",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html", //啟動(dòng)頁(yè)面
"display": "standalone", //啟動(dòng)過(guò)渡動(dòng)畫
"background_color": "#000000", //背景顏色
"theme_color": "#4DBA87" //導(dǎo)航欄顏色
}
然后
接下來(lái)打包呐伞，然后部署的服務(wù)器（sw為了安全起見(jiàn)要求在https環(huán)境下）敌卓，打開(kāi)。
因?yàn)檫M(jìn)本沒(méi)有修改任何的頁(yè)面代碼伶氢，所以長(zhǎng)這樣的趟径。
打開(kāi)開(kāi)發(fā)者工具，到application下的service workers勾選Offline癣防，模擬一個(gè)斷網(wǎng)的情況舵抹。
然后按F5刷新，你就會(huì)神奇的發(fā)現(xiàn)即使沒(méi)有網(wǎng)絡(luò)依然能夠正常的訪問(wèn)劣砍，這就是pwa的神奇之處。
最后附上git地址：https://gitee.com/HelpG/pwa-demo.git
