react + webpack + Service Worker 搭建离线web
service worker 是什么
service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。
注意事项:
- Service workers 只能在本地调试
localhost
或HTTPS
上使用。 - 基于web worker,所以不会阻碍当前js线程的执行。
- 在 Firefox 浏览器的用户隐私模式,Service Worker 不可用。
- ios Safari支持,但苹果不对第三方的app的webview开放Service Worker功能。
兼容性:
移动端的兼容性不太好,而且ios的第三方的app的webview不能使用。
使用方法:
基于原来的react项目基础下:
1、安装workbox-webpack-plugin
npm i workbox-webpack-plugin -D
package.json
"workbox-webpack-plugin": "^6.5.3"
2、webpack.config.js
只缓存图片、js、css,不缓存html,可以解决更新版本还在使用上个版本的缓存问题。
const { GenerateSW } = require('workbox-webpack-plugin');
...
...
{
plugins:[
new GenerateSW({
clientsClaim: true,
skipWaiting: true, // 安装成功后立即接管网站,注意这个要和 clientsClaim 一起设置为 true
cleanupOutdatedCaches: true, // 尝试删除老版本缓存
maximumFileSizeToCacheInBytes: 1024000 * 4, // 只缓存 4M 以下的文件
include: [/.*.(png|jpg|jpeg|svg|ico|webp)$/, /.*.(js|css)$/], // 只缓存图片、js、css
}),
]
}
3、新增/src/installServiceWorker.ts
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('service-worker.js')
.then((reg) => {
console.log('Service Worker 开启成功');
})
.catch((e) => {
console.error('Error during service worker registration:', e);
});
} else {
console.log('不支持serviceWorker');
}
4、在index.tsx导入
import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/app';
import './src/installServiceWorker';
ReactDOM.render(<App />, document.getElementById('app'));
最后打包上线,Network
的size
显示ServiveWorker
,缓存成功。
END
使用对Service Worker的可以进一步提升产品的性能和弱网情况下的体验,但在移动端兼容性不好,且ios下的Hybrid的webview是不支持的,看需求场景否能使用。
转载自:https://juejin.cn/post/7125988057500614664