什么是 Service Worker?
Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件,可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息
- 基于web worker(一个独立于JavaScript主线程的独立线程,在里面执行需要消耗大量资源的操作不会堵塞主线程)
- 在web worker的基础上增加了离线缓存的能力
- 本质上充当Web应用程序(服务器)与浏览器之间的代理服务器(可以拦截全站的请求,并作出相应的动作->由开发者指定的动作)
- 创建有效的离线体验(将一些不常更新的内容缓存在浏览器,提高访问体验)
- 由事件驱动的,具有生命周期
- 可以访问cache和indexDB
- 支持推送
- 并且可以让开发者自己控制管理缓存的内容以及版本
Webpack中 如何实现离线缓存?
-
下载插件
npm install workbox-webpack-plugin -D // 通过此插件实现离线缓存 npm install http-server -D // 通过http-serer服务器来运行打包后的代码
-
在
package.json
文件中,进行配置服务器"scripts": { "start": "http-server dist", "build": "webpack", },
-
在
webpack.config.js
文件中进行配置const WorkboxPlugin = require('workbox-webpack-plugin') // 引入插件 module.exports = { //在plugins里实例化此插件 plugins:[ new WorkboxPlugin.GenerateSW({ clientsClaim:true, skipWaiting:true }) ], }
-
然后在入口文件,也就是业务代码里加上一下代码,测试一下,不加也没事
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') }) }) }
-
然后 通过 npm run build 进行打包
-
通过 npm run start 运行服务器
这时候你会发现,当断开服务器 以后,在访问这个 端口,依然可以正常显示,这是刚才配置的离线缓存文件,给存储了,这也给我们带来了很大便利,也给用户带来了很好的体验
当然这只是一个简单地配置,详细的配置,可以查阅webpack官网