Webpack高级学习：优化代码运行性能-PWA（渐进式网络应用程序）

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。我们希望给项目提供离线体验。

只要断网就啥也没有

解决办法

渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。

其中最重要的是，在 离线(offline) 时应用程序能够继续运行功能。

内部通过 Service Workers 技术实现的。

---

https://webpack.docschina.org/guides/progressive-web-application/#adding-workbox

下载

npm install workbox-webpack-plugin --save-dev

引入+调用

const WorkboxPlugin = require("workbox-webpack-plugin");

  new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),

并且还需要注册

if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker
      .register("/service-worker.js")
      .then((registration) => {
        console.log("SW registered: ", registration);
      })
      .catch((registrationError) => {
        console.log("SW registration failed: ", registrationError);
      });
  });
}

运行

发现注册失败

SW registration failed: TypeError: Failed to register a ServiceWorker for scope ('http://127.0.0.1:5500/') with script ('http://127.0.0.1:5500/service-worker.js'): A bad HTTP response code (404) was received when fetching the script.（在当前目录去找的，但是我们的定义的在dist目录下 ）

下载静态资源服务器

npm i serve -g

serve dist

离线了可以