Go语言视频零基础入门到精通

admin

为什么要给 vue 项目添加 PWA

为什么要添加？因为不管是部署在 IIS，还是 nginx，每次应用部署后，再次访问因为旧的 js 已经不存在，所以页面访问的时候会整个报错，报错的结果就是一个白屏。
为了解决这个问题，我的解决方案是使用 PWA ，这样就可以将 js 缓存到本地，再次发布后，service-worker.js 会使旧的 js 失效，重新请求并缓存 js。

如果对于问题这个有更好的解决方案，务必请大佬指定一二
安装 PWA 的相关依赖包
Yarn 安装

1. [code]yarn add sw-precache-webpack-plugin --dev
2. yarn add uglify-es --dev

复制代码

[/code]
npm 安装

1. [code]npm install sw-precache-webpack-plugin --dev-dev
2. npm install uglify-es --dev-dev

复制代码

[/code]
添加修改相关配置
下面这些文件忘记出处是哪，Github也能搜到一些，之前写的 PWA 的 Demo 里面拿过来的~
添加 build/service-worker-dev.js

1. [code]self.addEventListener("install", () => self.skipWaiting())
3. self.addEventListener("activate", () => {
4.   self.clients.matchAll({ type: "window" }).then(windowClients => {
5.     for (let windowClient of windowClients) {
6.       // Force open pages to refresh, so that they have a chance to load the
7.       // fresh navigation response from the local dev server.
8.       windowClient.navigate(windowClient.url)
9.     }
10.   })
11. })

复制代码

[/code]
添加 build/service-worker-prod.js

1. [code];(function() {
2.   "use strict"
4.   // Check to make sure service workers are supported in the current browser,
5.   // and that the current page is accessed from a secure origin. Using a
6.   // service worker from an insecure origin will trigger JS console errors.
7.   var isLocalhost = Boolean(
8.     window.location.hostname === "localhost" ||
9.       // [::1] is the IPv6 localhost address.
10.       window.location.hostname === "[::1]" ||
11.       // 127.0.0.1/8 is considered localhost for IPv4.
12.       window.location.hostname.match(
13.         /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
14.       )
15.   )
17.   window.addEventListener("load", function() {
18.     if (
19.       "serviceWorker" in navigator &&
20.       (window.location.protocol === "https:" || isLocalhost)
21.     ) {
22.       navigator.serviceWorker
23.         .register("service-worker.js")
24.         .then(function(registration) {
25.           // updatefound is fired if service-worker.js changes.
26.           registration.onupdatefound = function() {
27.             // updatefound is also fired the very first time the SW is installed,
28.             // and there"s no need to prompt for a reload at that point.
29.             // So check here to see if the page is already controlled,
30.             // i.e. whether there"s an existing service worker.
31.             if (navigator.serviceWorker.controller) {
32.               // The updatefound event implies that registration.installing is set
33.               var installingWorker = registration.installing
35.               installingWorker.onstatechange = function() {
36.                 switch (installingWorker.state) {
37.                   case "installed":
38.                     // At this point, the old content will have been purged and the
39.                     // fresh content will have been added to the cache.
40.                     // It"s the perfect time to display a "New content is
41.                     // available; please refresh." message in the page"s interface.
42.                     break
44.                   case "redundant":
45.                     throw new Error(
46.                       "The installing " + "service worker became redundant."
47.                     )
49.                   default:
50.                   // Ignore
51.                 }
52.               }
53.             }
54.           }
55.         })
56.         .catch(function(e) {
57.           console.error("Error during service worker registration:", e)
58.         })
59.     }
60.   })
61. })()

复制代码

[/code]
添加 build/load-minified.js

1. [code]"use strict"
3. const fs = require("fs")
4. const UglifyJS = require("uglify-es")
6. module.exports = function(filePath) {
7.   const code = fs.readFileSync(filePath, "utf-8")
8.   const result = UglifyJS.minify(code)
9.   if (result.error) return ""
10.   return result.code
11. }

复制代码

[/code]
修改 build/Webpack.prod.conf.js
首先引用

1. sw-precache-webpack-plugin

复制代码

和

1. build/load-minified

复制代码

1. [code]const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin")
2. const loadMinified = require("./load-minified")

复制代码

[/code]
为 webpack 插件 HTMLWebpackPlugin 添加参数

1. serviceWorkerLoader: `<script>${loadMinified( path.join(__dirname, "./service-worker-prod.js"))}</script>

复制代码

1. [code]  plugins: [
2.       ....
3.   new HtmlWebpackPlugin({
4.       filename:
5.         process.env.NODE_ENV === "testing" ? "index.html" : config.build.index,
6.       template: "index.html",
7.       inject: true,
8.       minify: {
9.         removeComments: true,
10.         collapseWhitespace: true,
11.         removeAttributeQuotes: true
12.         // more options:
13.         // https://github.com/kangax/html-minifier#options-quick-reference
14.       },
15.       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
16.       chunksSortMode: "dependency",
17.       serviceWorkerLoader: `<script>${loadMinified( path.join(__dirname, "./service-worker-prod.js"))}</script>`
18.     }),

复制代码

[/code]
并在最后添加 SWPrecacheWebpackPlugin 插件

1. [code]// service worker caching
2. new SWPrecacheWebpackPlugin({
3.   cacheId: "web_pwa",
4.   filename: "service-worker.js",
5.   staticFileGlobs: ["dist/**/*.{js,html,css}"],
6.   minify: true,
7.   stripPrefix: "dist/"
8. })

复制代码

[/code]
在 /index.html 中注入 service-worker.js

1. [code]<%= htmlWebpackPlugin.options.serviceWorkerLoader %>

复制代码

[/code]
如下所示

1. [code]
2. <body>
3.   <div id="app"></div>
4.   <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
5.   <!-- built files will be auto injected -->
6. </body>   

复制代码

[/code]

至此，添加完毕，build 之后查看缓存中是否包含 js 检验结果

注意：PWA 应用需要在本地上运行或者 https 协议下， 要保证你的页面是安全页面。

结语
几分钟就搞定了，然后把之前的一个基于VUE的后台模板项目也升级了，如果有相同需求的可以参考下。
仓库地址：https://github.com/yimogit/me-admin-template
线上预览：https://vue-admin.yimo.link/