Webpack：PWA离线缓存

什么是 Service Worker？

Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件，可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息

• 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）
• 在web worker的基础上增加了离线缓存的能力
• 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）
• 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
• 由事件驱动的,具有生命周期
• 可以访问cache和indexDB
• 支持推送
• 并且可以让开发者自己控制管理缓存的内容以及版本

Webpack中 如何实现离线缓存？

1. 下载插件

   npm install workbox-webpack-plugin -D	// 通过此插件实现离线缓存
   npm install http-server -D		// 通过http-serer服务器来运行打包后的代码
   

2. 在package.json文件中，进行配置服务器

   "scripts": {
       "start": "http-server dist",
       "build": "webpack",
     },
   

3. 在webpack.config.js文件中进行配置

   const WorkboxPlugin = require('workbox-webpack-plugin')	// 引入插件
   module.exports = {
       //在plugins里实例化此插件
        plugins:[
           new WorkboxPlugin.GenerateSW({
               clientsClaim:true,
               skipWaiting:true
           })
       ],
   }
   
   

4. 然后在入口文件,也就是业务代码里加上一下代码，测试一下，不加也没事

   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')
           })
       })
   }
   

5. 然后 通过 npm run build 进行打包

6. 通过 npm run start 运行服务器

​ 这时候你会发现，当断开服务器 以后，在访问这个 端口，依然可以正常显示，这是刚才配置的离线缓存文件，给存储了，这也给我们带来了很大便利，也给用户带来了很好的体验

当然这只是一个简单地配置，详细的配置，可以查阅webpack官网