Umi: How to use PWA on umi 3.0

[nguyenhuutinh]

Hello,
wanna to know how to use pwa in 3.0

I tried but it seems that this option was removed.

Thank you

[sherry007]

因为项目中需要用 PWA 和 service worker，研究了一天，最终打通，以下是我的配置：

1. umirc.js 配置：需要安装插件 workbox-webpack-plugin

// umirc.js
const { InjectManifest } = require('workbox-webpack-plugin');
export default {
  ...
  copy: [`/pwa/${manifestName}`],  // 这个需要提供 pwa 需要的 .webmanifest 文件，然后手动将其拷贝到构建之后的目录（dist）下
  links: [{ rel: 'manifest', href: `/console/${manifestName}` }], // 手动插入 .webmanifest 文件的 link
  chainWebpack(memo) {
    // workbox 配置
    memo.plugin('workbox').use(InjectManifest, [
      {
        swSrc: './pwa/service-worker.js',
        swDest: 'sw.js',
        exclude: [/\.map$/, /favicon\.ico$/, /^manifest.*\.js?$/],
      },
    ]);
  },
  ...
}

1. 创建文件 register-service-worker.js, 文件内容是注册 service worker，需要先安装插件 register-service-worker 哈：

// register-service-worker.js
import { register } from 'register-service-worker';

function dispathServiceWorkerEvent(eventName) {
  const event = document.createEvent('Event');
  event.initEvent(eventName, true, true);
  window.dispatchEvent(event);
}

if (process.env.NODE_ENV === 'production') {
  register(`/console/sw.js`, { // 这个路径是根据你最终生成的 service worker 的文件路径来确定
    updated() {
      dispathServiceWorkerEvent('sw.updated');
    },

    offline() {
      dispathServiceWorkerEvent('sw.offline');
    },
  });
}

1. 将 register-service-worker.js 文件引入到你的 app 运行入口，我的话是在 global.js 中 引入了这个文件，反正就是在运行应用前先运行这个脚本对 service worker 进行注册

// global.js
...
import './register-service-worker';
...

1. 这个验证的话，其实本地不太好验证，我们项目的话，是把项目放到 docker 里运行，然后暴露端口进去，是可以看到 sw.js 和 .webmanifest 文件；然后在平板运行的时候可以生成桌面应用
   
   

最后，希望能够对你有所帮助，如果有问题，可以联系我

[Jerry-yx]

求大神赐教！！！！！！

用这种方法配置之后，service worker 激活成功了，但是把网断开或者更新sw文件之后都不触发注册的事件是为什么呢？刷新才会触发sw更新事件，而且报错了，不清楚是为什么？

[sherry007]

求大神赐教！！！！！！

用这种方法配置之后，service worker 激活成功了，但是把网断开或者更新sw文件之后都不触发注册的事件是为什么呢？刷新才会触发sw更新事件，而且报错了，不清楚是为什么？

叫大神言重了🤣，这个我查了一下，首先网络断开是不是本来就不会触发注册事件呢，更新sw文件的话应该是会触发更新事件的，但是你这个sw文件是不是构建之后的呀，你在哪里改了这个文件呢？我推荐你看一下这篇文章哦
我当时配置也只是稍微理解些类型为 InjectManifest 的，这种我可能不太了解怕给你说错了，不好意思呀~

[Jerry-yx]

谢谢！！！
本来是想实现build代码生成新版本的sw.js文件之后，浏览器不刷新在当前页就能感知到sw.js文件的更新，立马注册，但是后来查资料发现，并没有这样的功能，之恶能刷新之后才会重新注册。

[sherry007]

谢谢！！！
本来是想实现build代码生成新版本的sw.js文件之后，浏览器不刷新在当前页就能感知到sw.js文件的更新，立马注册，但是后来查资料发现，并没有这样的功能，之恶能刷新之后才会重新注册。

嗯嗯！不客气哦~

[jimStyle88]

@sherry007 大神你好，我在umi2.x 开启了Pwa 配置，在实际场景中发先，每次发布新版本之后，总有几个用法返回无法拉取到最新的js文件导致白屏，控制台报错（js 路径 404），目前还搞不懂为何没有触发update。 请大神支招，怎么平滑用户无感知的关闭PWA ，达到每次发布，不会有获取不到最新文件的问题出现。
目前的代码如下：

望回复

[sorrycc]

It's inactive above 3 months, feel free to reopen if still have problems.