umijs或者webpack配置pwa

UMI.js 实现 PWA

UMI.js 是一个可扩展的企业级前端应用框架，它包含了许多优秀的插件，可以快速搭建起一个高质量的前端应用。UMI.js 提供了 umi-plugin-pwa 插件，可以很方便地实现 PWA。

1. 安装 umi-plugin-pwa 插件

在 UMI.js 项目中执行以下命令安装 umi-plugin-pwa 插件：

 

npm install umi-plugin-pwa --save-dev

2. 在路由配置文件中配置 PWA

在 config/config.js 文件中添加如下配置，声明需要添加 PWA 功能：

 

export default {
  plugins: [
    ['umi-plugin-pwa', {
      // 这里进行 PWA 配置
    }]
  ]
}

3. 配置 manifest.json

在根目录下新建一个名为 public/manifest.json 的文件，并输入以下内容：

 

{
  "name": "My App",
  "short_name": "My App",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "./favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ]
}

上述代码定义了应用的名称、启动 URL、显示方式、背景色、主题色以及图标等信息。

4. 配置 ServiceWorker

在 src 目录下新建一个名为 sw.js 的文件，并输入以下内容：

 

const CACHE_NAME = 'my-app-cache-v1'
const urlsToCache = [
  '/',
  '/index.html',
  '/manifest.json'
]

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  )
})

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response
        }
        return fetch(event.request)
          .then(response => {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response
            }
            const responseToCache = response.clone()
            caches.open(CACHE_NAME)
              .then(cache => cache.put(event.request, responseToCache))
            return response
          })
      })
  )
})

上述代码定义了一个名为 my-app-cache-v1 的 Cache Storage，将 urlsToCache 数组中的资源进行缓存，同时使用 Service Worker 拦截网络请求，如果已有缓存，则直接返回缓存内容；如果没有缓存，则发起网络请求，并将响应内容进行缓存。

5. 在 HTML 文件中注册 Service Worker

在应用入口的 HTML 文件中添加以下代码，用于注册 Service Worker：

 

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then(registration => {
          console.log('ServiceWorker registration successful with scope: ', registration.scope)
        })
        .catch(err => {
          console.log('ServiceWorker registration failed: ', err)
        })
    })
  }
</script>

上述代码通过 navigator.serviceWorker.register() 方法注册 Service Worker，并在控制台中输出注册结果。

通过以上步骤，就可以在 UMI.js 项目中实现 PWA。

Webpack 实现 PWA

Webpack 是一个非常流行的前端项目构建工具，它也可以很方便地进行 PWA 配置。

1. 安装插件

在 Webpack 项目中执行以下命令安装插件：

 

npm install workbox-webpack-plugin --save-dev

2. 在 Webpack 配置文件中配置 PWA

在 Webpack 的配置文件中添加以下代码：

 

const path = require('path')
const { GenerateSW } = require('workbox-webpack-plugin')

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ]
}

上述代码使用了 workbox-webpack-plugin 插件，并通过 GenerateSW 类配置 PWA 相关的选项。clientsClaim: true 表示新的 Service Worker 激活后立即掌控所有页面，而不是需要等待页面关闭才能生效；skipWaiting: true 表示当有新的 Service Worker 可用时，立即让其取得控制权。

3. 配置 manifest.json

在根目录下新建一个名为 public/manifest.json 的文件，与 UMI.js 示例中的代码类似，在此处配置应用的基本信息。

4. 配置 ServiceWorker

在 src 目录下新建一个名为 sw.js 的文件，并输入与 UMI.js 示例中的代码类似的内容。

5. 在 HTML 文件中注册 Service Worker

与 UMI.js 示例中相同，在 HTML 文件中注册 Service Worker 并输出注册结果的信息。

通过以上步骤，就可以在 Webpack 项目中实现 PWA。