likes
comments
collection
share

react + webpack + Service Worker 搭建离线web

作者站长头像
站长
· 阅读数 95

service worker 是什么

service workers 本质上充当 Web 应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API 旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API。

注意事项:

  • Service workers 只能在本地调试localhostHTTPS上使用。
  • 基于web worker,所以不会阻碍当前js线程的执行。
  • 在 Firefox 浏览器的用户隐私模式,Service Worker 不可用。
  • ios Safari支持,但苹果不对第三方的app的webview开放Service Worker功能。

兼容性:

移动端的兼容性不太好,而且ios的第三方的app的webview不能使用。

react + webpack + Service Worker 搭建离线web

使用方法:

基于原来的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'));

最后打包上线,Networksize显示ServiveWorker,缓存成功。

react + webpack + Service Worker 搭建离线web

END

使用对Service Worker的可以进一步提升产品的性能和弱网情况下的体验,但在移动端兼容性不好,且ios下的Hybrid的webview是不支持的,看需求场景否能使用。

转载自:https://juejin.cn/post/7125988057500614664
评论
请登录