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是不支持的，看需求场景否能使用。