Open yueyp opened 1 year ago
暂时没有, 欢迎 PR ~~
希望能支持该功能
1、添加依赖:devDependencies:{ "webpack-pwa-manifest": "^4.3.0", "workbox-webpack-plugin": "^7.1.0"} , dependencies: {"register-service-worker": "^1.7.2"};
2、添加文件register-service-worker.js , 在app.tsx引入该文件;
import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') {
register('/service-worker.js', {
registrationOptions: { scope: './' },
ready(registration) {
console.log('Service worker is active.');
},
registered(registration) {
console.log('Service worker has been registered.');
},
cached(registration) {
console.log('Content has been cached for offline use.');
},
updatefound(registration) {
console.log('New content is downloading.');
},
updated(registration) {
console.log('New content is available; please refresh.');
},
offline() {
console.log('No internet connection found. App is running in offline mode.');
},
error(error) {
console.error('Error during service worker registration:', error);
},
});
}
3、在ice.config.mts文件,配置webpack webpack: (webpackConfig: any) => { if (process.env.NODE_ENV === 'production') { const plugin = [ new WorkboxWebpakcPlugin.GenerateSW({ skipWaiting: true, clientsClaim: true, }), // 需要注意 WebpackPwaManifest 需要在 HtmlWebpackPlugin 之后执行 new WebpackPwaManifest({ filename: 'pwa-manifest.json', name: 'My Progressive Web App', short_name: 'MyPWA', description: 'My awesome Progressive Web App!', theme_color: '#123124', background_color: '#111', crossorigin: 'use-credentials', // can be null, use-credentials or anonymous icons: [ { src: path.resolve('src/assets/logo.png'), sizes: [192, 512], // multiple sizes }, ], }), ]; webpackConfig.plugins?.push(...plugin); } return webpackConfig; }, 4、在document.tsx文件中
下添加下面的配置<head>
{
process.env.NODE_ENV === 'production' ? (
<link rel="manifest" href="/pwa-manifest.json" crossOrigin="use-credentials" />
) : null
}
</head>
5、vscode下载Live Server配置本地https服务就可以,编译打包代码:npm run build ,打包后得到的index.html,右键使用Live Server启动服务就可以见到效果
请问下ice3.0有相关pwa插件吗,怎么做离线化缓存