docs/整合PWA.md · 小伙子挺不错/react-umijs-devextreme

尚未开始.

客户经常要求打包为手机APP. 大多数情况下, 只是为了手机桌面可以有个入口.
如果项目没有特别的要求, 还是尝试用Google的PWA来实现可安装桌面图标的功能.
[参考](https://github.com/umijs/umi/issues/4793)

## 按照google官方文档要求, 创建manifest文件

[写法参考](https://developer.mozilla.org/en-US/docs/Web/Manifest)
manifest.webmanifest

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

``` JS
// 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?$/],
        }, ]);
    },
    ...
}
```

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

``` JS
// 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');
        },
    });
}
```

## 将 register-service-worker.js 文件引入到app 运行入口，app.ts 中 引入这个文件，在运行应用前先运行这个脚本对 service worker 进行注册

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

小伙子挺不错/react-umijs-devextreme

简介

发行版

贡献者

近期动态

小伙子挺不错/react-umijs-devextreme .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

小伙子挺不错/react-umijs-devextreme