ice3.0有相关pwa插件吗

yueyp commented 1 year ago

请问下ice3.0有相关pwa插件吗，怎么做离线化缓存

wssgcg1213 commented 1 year ago

暂时没有, 欢迎 PR ~~

yyyyffqqqq commented 3 months ago

希望能支持该功能

yyyyffqqqq commented 3 months ago

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启动服务就可以见到效果

alibaba / ice

ice3.0有相关pwa插件吗 #6093