PWA是Progressive Wed Application(漸進(jìn)式Wed應(yīng)用程序)的縮寫
通常情況下，我們運(yùn)行npm run build之后嗦玖，生成dist目錄，我們?cè)侔?code>dist目錄里的代碼放到服務(wù)器上，然后服務(wù)器就可以把我們的頁(yè)面跑起來(lái)了谴麦。
但是，有的時(shí)候伸头，我們?cè)陂_發(fā)過(guò)程中匾效，可能并沒有一個(gè)后端的服務(wù)器，這個(gè)時(shí)候恤磷，我們可以模擬一臺(tái)后端的服務(wù)器面哼，怎么模擬呢？ 借助http-server這個(gè)模塊
具體步驟如下：
- 安裝模塊
npm install http-server --save-dev
- 安裝好以后扫步，我們?cè)?code>package.json里魔策，寫一個(gè)
start命令,這樣寫的意思時(shí)，當(dāng)我們運(yùn)行npm run start時(shí)河胎，會(huì)在dist目錄下闯袒，開啟一個(gè)http-server
image.png - 命令配置好以后，我們執(zhí)行命令
npm run start游岳，然后我們可以從下邊兩個(gè)地址的8080端口訪問(wèn)到我們開啟的服務(wù)器
image.png
我們?cè)跇I(yè)務(wù)代碼里政敢，打印一句話
image.png
然后我們?cè)僭L問(wèn)服務(wù)器，看下是否有打印胚迫，結(jié)果是可以打印出這句話的
image.png
假如喷户，這個(gè)時(shí)候，服務(wù)器關(guān)閉了晌区，我們?cè)偃ピL問(wèn)這個(gè)地址摩骨，會(huì)發(fā)現(xiàn)頁(yè)面訪問(wèn)不到了
image.png
這就是傳統(tǒng)的網(wǎng)頁(yè)，那么PWA是一種什么技術(shù)呢朗若？
- 假如我們?cè)L問(wèn)一個(gè)網(wǎng)址恼五，第一次我們?cè)L問(wèn)成功了，忽然之間服務(wù)器掛掉了哭懈，第二次再去重新訪問(wèn)這個(gè)網(wǎng)站的時(shí)候灾馒，它可以在本地有一份緩存，我們可以直接用這個(gè)緩存把之前訪問(wèn)到的頁(yè)面遣总，在展示出來(lái)睬罗，這樣的話轨功，即便服務(wù)器掛掉，我們?cè)诒镜剡€可以看到之前訪問(wèn)到的頁(yè)面容达，這就是
PWA
要想實(shí)現(xiàn)這種PWA的技術(shù),在webpack中有一個(gè)google已經(jīng)做過(guò)的現(xiàn)成的webpack插件古涧，使用這種插件做代碼的打包，我們可以非常便捷的實(shí)現(xiàn)這種PWA的技術(shù)花盐，配置步驟如下：
- 安裝
npm install workbox-webpack-plugin --save-dev
- 本地測(cè)試的代碼羡滑，不用考慮服務(wù)器是否掛掉的問(wèn)題。只有要上線的代碼算芯，才需要做PWA的處理柒昏，做的更完善，遇到斷網(wǎng)等情況熙揍，依然可以訪問(wèn)职祷，用戶體驗(yàn)更好，所以我們需要配置
webpack.prod.js
image.png - 配置好以后届囚，再運(yùn)行打包命令
npm run build,可以看到生成的文件多了這兩個(gè)有梆，通過(guò)這兩個(gè)文件就可以讓service-worker正常生效，是我們的項(xiàng)目支持PWA應(yīng)用的要求奖亚，service-worker我們可以理解為另類的緩存,有了這個(gè)緩存淳梦，我們可以讓我們的頁(yè)面能夠被緩存住，即使服務(wù)器崩潰昔字，也可以被緩存住
image.png - 當(dāng)然爆袍，光生成這兩個(gè)文件還不夠，實(shí)際上作郭，要實(shí)現(xiàn)PWA應(yīng)用要求陨囊，我們還要寫一些業(yè)務(wù)代碼，
index.js里如下：
console.log('hello , this is LEE YANG')
// 瀏覽器如果支持serviceWorker夹攒，那么我們就可以進(jìn)行如下操作
if ('serviceWorker' in navigator) {
// 當(dāng)頁(yè)面加載好以后蜘醋，進(jìn)行如下操作
window.addEventListener('load', () => {
// 如果注冊(cè)成功的操作，返回的是promise
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('service-worker registed')
}).catch(error => {
console.log('service-worker register error')
})
})
}
- 業(yè)務(wù)代碼修改后咏尝，重新打包
npm run build - 打包成功之后压语，運(yùn)行
npm run start,控制臺(tái)會(huì)輸出
image.png - 這個(gè)時(shí)候，如果我們關(guān)掉服務(wù)器
ctrl+c,再刷新頁(yè)面编检，還是會(huì)輸出胎食，這就是PWA的概念
image.png
