React微前端实战教程（PWA篇）
渐进式Web应用（PWA）的好处：添加到主屏幕、缓存加速启动、离线运行、渐进式更新、通知等功能，不支持PWA的浏览器可以像以前一样使用网页。PWA上线时需要开启HTTPS协议，本地调试可以是HTTP协议。
在构建React微前端之后，相关资源都是动态选择，造成PWA安装时不好确定缓存哪些内容。本文例程使用postMessage()的方式在主线程与Service Worker线程之间传递数据，让Service Worker线程取得微前端元信息。
给React微前端Demo网站添加PWA功能的操作步骤如下：
1. 添加 PWA manifest
在网站的根目录中添加文件rmf-pwa.webmanifest，内容如下：
{
"short_name": "Micro Frontends",
"name": "React Micro Frontends Demo",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
在网站配置文件site_config.yaml的htmlBegin添加：
<link rel="manifest" href="/rmf-pwa.webmanifest"/>
有了这份清单，Chrome浏览器就可以识别我们的网站为PWA，就能安装并添加到主屏幕或桌面。
继续阅读→