PWA

Progressive Web App 渐进式网页应用.

可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送

cnpm i workbox-webpack-plugin --save-dev

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

//main.js 注册 业务代码
if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		navigator.serviceWorker.register('/service-worker.js')
			.then(registration => {
				console.log('service-worker registed');
			}).catch(error => {
				console.log('service-worker register error');
			})
	})
}

此时如果直接通过 VSCode 访问打包后页面，在浏览器控制台会发现 SW registration failed。

因为打开的访问路径是：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。

• 解决路径问题

npm i serve -g

serve 也是用来启动开发服务器来部署代码查看效果的。

serve dist