一、背景
要了解WorkboxWebpackPlugin，应用系统定制开发首先需要说两个概念：第一个是ServiceWorker,第二个是PWA。ServiceWorker 应用系统定制开发本人写了一篇，应用系统定制开发大家可以先看一下。关于PWA,应用系统定制开发网上的讲解也很多，大家看完ServiceWorker，就知道ServiceWorker应用系统定制开发其实是基于WebWorker应用系统定制开发应用系统定制开发的一门技术。而PWA，就是基于ServiceWorker的一门技术。
二、PWA
什么是PWA
应用系统定制开发大家都知道Native app体验确实很好，下载到手机上之后入口也方便。它也有一些缺点:
-
开发成本高(ios和安卓)
-
软件上线需要审核
-
版本更新需要将新版本上传到不同的应用商店
-
想使用一个app就必须去下载才能使用，即使是偶尔需要使用一下下
-
而web网页开发成本低，网站更新时上传最新的资源到服务器即可，用手机带的浏览器打开就可以使用。但是除了体验上比Native app还是差一些，还有一些明显的缺点
-
手机桌面入口不够便捷，想要进入一个页面必须要记住它的url或者加入书签
-
没网络就没响应，不具备离线能力
-
不像APP一样能进行消息推送
那么什么是PWA呢？
PWA全称Progressive Web App`，即渐进式WEB应用。
一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题？
- 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
实现了消息推送 - 它解决了上述提到的问题，这些特性将使得
Web应用渐进式接近原生App。
怎么做PWA
1、添加manifest.json 到你的首页
<head> <title>Minimal PWA</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel="manifest" href="manifest.json" /> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="icon" href="/e.png" type="image/png" /></head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
mainfest.json内容如下
{ "name": "Minimal PWA", // 必填 显示的插件名称 "short_name": "PWA Demo", // 可选 在APP launcher和新的tab页显示，如果没有设置，则使用name "description": "The app that helps you understand PWA", //用于描述应用 "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的 "start_url": "/", // 应用启动时的url "theme_color": "#313131", // 桌面图标的背景色 "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。 "icons": [ // 桌面图标，是一个数组 { "src": "icon/lowres.webp", "sizes": "48x48", // 以空格分隔的图片尺寸 "type": "image/webp" // 帮助userAgent快速排除不支持的类型 }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ]}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
如果用的是安卓手机，可以下载chrome浏览器自己操作看看。上述配置即配置了你的网页的图标，类似于应用图标。
2、设置ServiceWorker
这里可以参考本人的这篇。
3、总结
PWA的优势
- 可以将app的快捷方式放置到桌面上，全屏运行，与原生app无异
- 能够在各种网络环境下使用，包括网络差和断网条件下，不会显示undefind
- 推送消息的能力
- 其本质是一个网页，没有原生app的各种启动条件，快速响应用户指令
- PWA存在的问题
- 支持率不高:现在ios手机端不支持pwa，IE也暂时不支持
- Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低
- 各大厂商还未明确支持pwa
- 依赖的GCM服务在国内无法使用
- 微信小程序的竞争
尽管有上述的一些缺点，PWA技术仍然有很多可以使用的点。
service worker技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。
service worker实现消息推送，使用浏览器推送功能，吸引用户渐进式开发，尽管一些浏览器暂时不支持，可以利用上述技术给使用支持浏览器的用户带来更好的体验。
三、WorkboxWebpackPlugin
在ServiceWorker那一章，只是介绍了最简单的实现方式。实际PWA的实现要比这个流程复杂的多。既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。workbox 是由谷歌浏览器团队发布，用来协助创建 PWA 应用的 JavaScript 库。当然直接用 workbox 还是太复杂了，谷歌还很贴心的发布了一个 webpack 插件，能够自动生成 Service Worker 和 静态资源列表 - workbox-webpack-plugin。
只需简单一步就能生成生产环境可用的 Service Worker ：
const { GenerateSW } = require('workbox-webpack-plugin')new GenerateSW()- 1
- 2
查看项目编译后的文件，自动生成了Service-Worker.js和mainfest.json!：
到这里大家应该明白WorkboxWebpackPlugin插件的作用了。实际项目中如果不经过配置，光写上面的是远远不够的。具体的文档可以详见。
2022.6.3日（长期有效）：打个广告，苏州华为终端BG面向社会招聘人才，Java /C C++ / Python / Javascript 。有兴趣来苏州的同学们 可以加我V 15850277051 ，走内推流程，有问必答！