webpack从入门到原理（高级十一）—— PWA

i东东
231 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

前言

我们开发的 Web App 项目，当项目一旦处于网络离线情况，就没法访问了,为了能够给项目提供良好的离线体验，就需要用到PWA。

image.png

PWA

渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。其中最重要的是，在 离线(offline)  时应用程序能够继续运行功能。内部通过 Service Workers 技术实现的。

使用

首先需要下载安装包

npm i workbox-webpack-plugin -D

配置如下：

// webpack.prod.js
const WorkboxPlugin = require("workbox-webpack-plugin");
......
plugins:[
    new WorkboxPlugin.GenerateSW({
        // 这些选项帮助快速启用 ServiceWorkers
        // 不允许遗留任何“旧的” ServiceWorkers
        clientsClaim: true,
        skipWaiting: true,
    })
]

因为PWA的兼容性不好，所以需要通过if判断去判断是否兼容，兼容才生效！

// main.js
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);
      });
  });
}

配置完成之后,打包运行代码可以看到控制台出现ServiceWorker注册失败！在没有网络的时候还是会报错未连接到互联网！

image.png

上面的错误是因为：我们打开的访问路径是：http://127.0.0.1:5500/dist/index.html。此时页面会去请求 service-worker.js 文件，请求路径是：http://127.0.0.1:5500/service-worker.js，这样找不到会 404。实际 service-worker.js 文件路径是：http://127.0.0.1:5500/dist/service-worker.js。 所以就会报错。解决这个问题需要安装一个serve,serve是用来启动开发服务器来部署代码查看效果的。

下载安装包

npm i serve -g

在控制台执行下面命令进行部署:

serve dist

如下图就部署成功了 image.png

运行代码，可以在控制台看到如下信息，说明注册成功

image.png 注册成功之后到控制台在NetWork中更改为离线状态，刷新页面看到如下，在李现状态下页面显示正常，离线状态下文件是请求 service-worker来获取的。这样离线访问就成功了。

image.png

小结

通过PWA技术实现了离线时程序还能够正常运行的功能，但是这个功能的兼容性是比较差的，所以使用的时候还是要稍微注意一下的。今天是持续更文的第17天，继续加油！

avatar
文章
阅读
粉丝