在 AMP/MIP 页面中预加载 PWA

    接下来先开门见山的介绍一下整个方案的步骤。

    1. 将所有的叶子页面都做成 AMP/MIP，通过 指向 PWA 对应的页面。
    2. 在 AMP 页面中嵌入 <mip-install-serviceworker> 来提前注册 Service Worker。
    3. Service Worker 在注册和安装的时候把 PWA 页面依赖的文件缓存好，包括 App Shell 依赖的所有资源。
    4. AMP 页面中所有链接都跳到 PWA。

    编写 Service Worker 的逻辑

    与上节不同的是，在这种方案里需要对将要跳转的 PWA 页面的 App Shell 等文件进行预缓存，从而提升跳转首屏展现的用户体验，因此代码编写上会有一些区别，下面代码所展示的是一个 AMP/MIP 跳转的 PWA 的 Service Worker 文件的一部分内容，主要是对 App Shell 先进行预缓存。

    1. const CACHE_NAME = 'my-site-precache'
    2. const URLS_TO_CACHE = [
    3.   '/',
    5.   '/static/app.js',
    6.   '/static/app.css'
    7. self.addEventListener('install', event => {
    8.   event.waitUntil(
    10.       // 将列表中的文件进行预缓存
    11.       return cache.addAll(URLS_TO_CACHE)
    12.     })
    13. })

    到这里注册 Service Worker 和编写 Service Worker 都已经完成了，开发者只需要再将 AMP/MIP 中的链接跳转到对应的 PWA 页面即可。