Webpack4漸進式網路應用程序

什麼是漸進式網路應用程序

漸進式網路應用程序(Progressive Web Application - PWA)，是一種可以提供類似於原生應用程序(native app)體驗的網路應用程序(web app)。PWA 可以用來做很多事。其中最重要的是，在離線(offline)時應用程序能夠繼續運行功能。這是通過使用名為 Service Workers[https://developers.google.com/web/fundamentals/primers/service-workers/] 的網路技術來實現的。

到目前為止，我們一直是直接查看本地文件系統的輸出結果。通常情況下，真正的用戶是通過網路訪問網路應用程序；用戶的瀏覽器會與一個提供所需資源（例如，.html, .js 和 .css 文件）的伺服器通訊。

那麼讓我們來使用一個簡易伺服器，搭建出我們所需的離線體驗。我們將使用 http-server package 包：

還要修改 package.json 的 scripts 部分，來添加一個 server:run 腳本：

操作之前如果本地沒有實踐項目的話，可以使用之前分享的項目來實踐，具體操作如下

操作完後繼續如下操作

在package.json中添加如下

添加完後類似如下

我們先打包並運行下，操作如下

會有類似如下輸出

如果你打開瀏覽器訪問 http://127.0.0.1:8081，應該會看到在 dist 目錄創建出服務，並可以訪問 webpack 應用程序。如果停止伺服器然後刷新，則 webpack 應用程序不再可訪問。

這就是我們最終要改變的現狀。「停止伺服器然後刷新，仍然可以查看應用程序正常運行」

添加 Workbox

plugins中添加

有了 Workbox，再執行 npm run build 時會發生什麼，如下圖

可以看到，生成了 2 個額外的文件

註冊 Service Worker

修改src/index.jsx，修改添加如下代碼

再次運行 npm build build 來構建包含註冊代碼版本的應用程序。然後用

啟動服務。訪問 http://127.0.0.1:8081 並查看 console 控制台。在那裡你應該看到，如下圖

現在來進行測試。停止伺服器並刷新頁面。如果瀏覽器能夠支持 Service Worker，你應該可以看到你的應用程序還在正常運行。然而，伺服器已經停止了服務，此刻是 Service Worker 在提供服務。

激動的不要不要的，此等功力果然深厚

注意：

在實踐過程中，遇到幾個問題

1、如何清空precache

2、如何更新precache

比如我忘記加了某個文件我要做清空怎麼辦？

比如我加錯了某個文件想要更新怎麼辦？

項目地址

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！