HUA

背景

平台各个子应用静态资源加载速度慢，用户体验有待提升

主要目的：

  • 解决资源加载慢问题，提升体验
  • 支持应用自启动（原生app体验）

项目使用到的技术栈为：React umi3 qiankun

PWA 介绍

简介

PWA 它不是特指某一项技术，而是应用多项技术来改善用户体验的 Web App，其核心技术包括 Web App Manifest，Service Worker 等，用户体验才是 PWA 的核心。

特点：

  • 可靠 - 即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现
  • 用户体验 - 快速响应，具有平滑的过渡动画及用户操作的反馈
  • 用户黏性 - 和 Native App 一样，可以被添加到桌面，具有沉浸式的用户体验

核心技术

Web App Manifest

主要为项目配置manifest.json，提供浏览器安装PWA所需的信息，例如应用程序名称和图标等。Web app manifests允许开发者配置隐藏浏览器多余的 UI（地址栏，导航栏等），让PWA具有和Native App一样的沉浸式体验。

Service Worker

  • 使用到的时候浏览器会自动唤醒，不用的时候自动休眠
  • 可拦截并代理请求和处理返回，可以操作本地缓存，如 CacheStorage，IndexedDB 等
  • 离线内容开发者可控
  • 能接受服务器推送的离线消息
  • 必须在 HTTPS 环境下才能工作

实现过程

注册 Service Worker

  1. 根目录新建 service-worker.js 文件，用于编写 Service Worker 具体逻辑。

主要添加安装、激活、缓存捕获后的处理逻辑（会在后续缓存策略章节详细描述）

  1. 注册 service worker 服务

在 index.html 文件中注入以下代码

 1<script>
 2  if ('serviceWorker' in navigator) {
 3    window.addEventListener('load', () => {
 4      navigator.serviceWorker
 5        .register('/service-worker.js')
 6        .then(registration => {
 7          console.log('SW registered: ', registration);
 8        })
 9        .catch(registrationError => {
10          console.log('SW registration failed: ', registrationError);
11        });
12    });
13  }
14</script>

我们项目是基于umi开发的，在umi3中在document.ejs添加script标签，在umi4中则需要在umirc.ts中的headScript添加内容。

安装到主屏幕

  1. 根目录(或是public目录)下新建manifest.json文件，添加需要的配置，具体可参考文档。 Web App Manifest，下面提供一份实例：
 1{
 2  "short_name": "灵思 Aicity",
 3  "name": "灵思 Aicity",
 4  "icons": [
 5    {
 6      "src": "https://xxx/144x144.png",
 7      "sizes": "144x144",
 8      "type": "image/png"
 9    },
10    {
11      "src": "https://xxx/192x192.png",
12      "sizes": "192x192",
13      "type": "image/png",
14      "purpose": "maskable"
15    }
16  ],
17  "start_url": ".",
18  "display": "minimal-ui",
19  "background_color": "#fff",
20  "theme_color": "#fff"
21}
  1. index.html中进行manifest引入
 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6    <meta
 7      name="viewport"
 8      id="scale-view"
 9      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
10    />
11    <link rel="manifest" href="/manifest.json" />
12    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
13  </head>
14</html>

到这一步启动项目之后就会在地址栏多出一个按钮

点击按钮就可以进行web app安装

安装完文件夹(或桌面)就会多出一个应用信息。

到这web应用的可安装操作就完成了，如果没有出现下载按钮，可打开控制台查看 Application-Manifest相关报错提示！！！

缓存策略

其核心是使用了 service worker 相关技术，详细可参考文档 Service Worker API。

为了减少一些处理细节上的时间，采用了google的插件workbox进行快速集成，省去了很多准备工作。

  1. 如果你只需要实现一些基本的缓存，不做预加载这些其他操作，workbox GenerateSW这个就足以满足你的需求，以下是一个建议配置：
 1import { defineConfig } from 'umi';
 2import { GenerateSW } from 'workbox-webpack-plugin';
 3
 4export default defineConfig({
 5  
 6  
 7  chainWebpack(memo) {
 8    memo.plugin('workbox').use(GenerateSW, {
 9      
10      cacheId: 'webpack-pwa', 
11      
12      skipWaiting: true, 
13      clientsClaim: true, 
14      swDest: 'service-wroker.js', 
15      globPatterns: ['**/*.{html,js,css,png.jpg}'], 
16      globIgnores: ['service-wroker.js'], 
17      runtimeCaching: [
18        
19        {
20          
21          urlPattern: /.*\.js/, 
22          
23          handler: 'NetworkFirst' 
24        }
25      ]
26    })
27  }
28})
  1. 遇到复杂点的场景，还是需要一定自由度去编写策略，我们可以选择workbox InjectManifest进行处理，详细实现如下：

umirc.ts

 1import { defineConfig } from 'umi';
 2import { InjectManifest } from 'workbox-webpack-plugin';
 3
 4export default defineConfig({
 5  
 6  
 7  chainWebpack(memo) {
 8    
 9    memo.plugin('workbox').use(InjectManifest, [
10      {
11        
12        swSrc: './service-worker.js', 
13        
14        swDest: 'service-worker.js', 
15        
16        maximumFileSizeToCacheInBytes: 10 * 1024 * 1024
17      },
18    ]);
19  }
20})

service-worker.js

registerRoute和GenerateSW中的runtimeCaching配置是一样的，主要区分下集中缓存策略：

  • CacheFirst会在有缓存的时候返回缓存，没有缓存才会去请求并且把请求结果缓存
  • CacheOnly只返回缓存，不请求
  • NetworkFirst请求将会发出，成功的话就返回结果添加到缓存中，如果失败则返回立即缓存
  • NetworkOnly只请求，不读写缓存
  • StaleWhileRevalidate类似于 CacheFirst，区别在于在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存，如果本来就没有 Cache 缓存的话，直接就发起网络请求并返回结果
 1import { registerRoute } from 'workbox-routing';
 2import {
 3  StaleWhileRevalidate,
 4  NetworkFirst,
 5  CacheFirst,
 6} from 'workbox-strategies';
 7
 8
 9self.__WB_DISABLE_DEV_LOGS = true;
10
11
12registerRoute(
13  /.*(gif|jpg|jpeg|png|svg|otf|woff|woff2|ttf|mp4|pbf).*/,
14  new CacheFirst({
15    cacheName: 'cache-static',
16    expiration: {
17      maxEntries: 1000, 
18      maxAgeSeconds: 30 * 24 * 60 * 60, 
19    },
20  }),
21);
22
23
24registerRoute(
25  /.*\.js.*/,
26  new StaleWhileRevalidate({
27    cacheName: 'cache-js',
28    expiration: {
29      maxEntries: 100, 
30      maxAgeSeconds: 30 * 24 * 60 * 60, 
31    },
32  }),
33);
34
35
36registerRoute(
37  /.*\.css.*/,
38  new StaleWhileRevalidate({
39    cacheName: 'cache-style',
40    expiration: {
41      maxEntries: 100,
42      maxAgeSeconds: 30 * 24 * 60 * 60, 
43    },
44  }),
45);
46
47
48registerRoute(
49  /^.*(-api\.).*$/,
50  new NetworkFirst({
51    cacheName: 'cache-api',
52    cacheableResponse: {
53      statuses: [200],
54    },
55  }),
56);
57
58
59registerRoute(
60  ({ url }) => {
61    
62    const reg = /.*(\.flv|\.m3u8|\.ts|\.tsx).*/;
63    return !reg.test(url.href);
64  },
65  new NetworkFirst({
66    cacheName: 'cache-others',
67    cacheableResponse: {
68      statuses: [200],
69    },
70  }),
71);
72

到这再请求页面的时候Application => Storage =>Cache storage里就能看到被缓存下来的文件了。

预加载实现

在上述基础上，我们对service-worker.js进行一些改造，让他可以进行预缓存。其实在配置InjectManifest的时候也提到了，workbox 会帮我们生成一份构建产物的映射(manifest)。借助这个我们可以实现预缓存。具体操作如下：

 1import { precacheAndRoute } from 'workbox-precaching';
 2
 3
 4
 5
 6const routes = ['/xxx', '/aaa'];
 7
 8const precacheList = self.__WB_MANIFEST || [];
 9precacheAndRoute([...precacheList, ...routes]);
10
11
12
13
14const precacheApps = ['portrait', 'map', 'graph'];
15precacheApps.forEach((app) => {
16  fetch(`/${app}/asset-manifest.json`)
17    .then((response) => response.json())
18    .then((data) => {
19      const files = Object.values(data).filter(
20        (file) => !file.includes('/index.html'),
21      );
22      precacheAndRoute(files);
23    })
24    .catch((e) =>
25      console.error(
26        `Error: can not fetch ${app} app asset-manifest.json`,
27      ),
28    );
29});

Features

多 Tab 探索

这是目前比较常见的一个问题，在pwa应用内使用window.open()打开新tab会跳转到浏览器中，这样体验感是很不好的；对此我们想到了两种解决方案：

  1. 自己实现一套 Tab UI

大概长这样…

主要就是通过拦截window.open()，维护一份tabs的相关数据，使用iframe渲染每一个子页面

  • 优点：功能齐全，UI展示效果好
  • 缺点：性能差(主要原因你想想，开20个自定义tab，实际使用的是一个浏览器Tab性能，这不得炸了…)；刷新、全屏、多个pwa应用等场景数据维护成本高；
  1. 使用chrome实验性api(目前楼主的方案)

在大概chrome@89版本左右开始，chrome 提出了 display: tabbed 模式，使用该模式需要手动开启：

这样在安装的时候会提示“在新标签页中打开”

大概长这样

  • 优点：原生交互体验好
  • 缺点：实验性api，用户使用成本大（目前我们平台还是小范围的推多tab形式，主要是内部人员使用，用于演示这些操作）

唤起方式

主要是针对pwa应用之间的相互唤起、开机启动这些

持续探索中，有好方案欢迎留言…

POST 缓存方案

由于cache storage不支持缓存 POST 请求，所以在首页展示有POST相关接口进行数据拉取时，离线效果不理想。这个问题更多的是探讨是否有必要这样做，理论上遵守restful api规范的话就不会存在这个问题(具体的原因就不进行深究了…)。

抛开业务，我们只探讨技术方案；对此找了下相关文档，还真有实现方案，大致分以下几部：

  • Service Worker 拦截一个 POST 请求，并根据request中的查询字符串组成一个 MD5 加密的缓存key。
  • Service Worker 使用缓存key将新的 JSON 响应存储在 IndexedDB 中。
  • 如果POST请求失败，Service Worker 使用缓存key检查 IndexedDB。如果密钥存在，则返回缓存的 JSON。

具体的可以参考原文Service worker无法缓存POST请求？来我教你

结语

这是一次很好的学习过程，上述所提到的插件是Webpack的，Vite也有相关插件vite-plugin-pwa，配置大同小异。有什么问题欢迎评论区交流👏👏👏

个人笔记记录 2021 ~ 2025