请问下ice3.0有相关pwa插件吗，怎么做离线化缓存
jk9hmnmh1#
暂时没有, 欢迎 PR ~~
s6fujrry2#
希望能支持该功能
vnjpjtjt3#
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文件，配置webpackwebpack: (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 anonymousicons: [{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启动服务就可以见到效果
3条答案
按热度按时间jk9hmnmh1#
暂时没有, 欢迎 PR ~~
s6fujrry2#
希望能支持该功能
vnjpjtjt3#
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引入该文件；
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文件中下添加下面的配置
5、vscode下载Live Server配置本地https服务就可以，编译打包代码：npm run build ，打包后得到的index.html，右键使用Live Server启动服务就可以见到效果