最近闲来无事,把网站升级了,更加像原生APP

记录下升级过程,免得以后忘了

PWA是什么?可以去网上搜一下,but中文文章少一点

用Google 封装的 好的 workbox 来升级

注册Service Worker

在html页面注册 SW

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<script>
if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations()
            .then(regs => {
                for (let reg of regs) {
                    // 注销掉不是当前作用域的所有的 Service Worker
                     if (reg.scope !== 'http://localhost:8000/') {
                        reg.unregister()
                    }
                }
                // 注销掉污染 Service Worker 之后再重新注册自己作用域的 Service Worker
                window.addEventListener('load', () => {
                    navigator.serviceWorker.register('./sw.js').then(function (e) { console.log("支持sw:", e.scope) })
                })
            })
    }
</script>

生成SW.js文件

google cdn

1
2
importScripts("  'https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-sw.js'
");

国内建议不使用Google

jsdelivr cdn

1
importScripts("https://fastly.jsdelivr.net/npm/[email protected]/build/workbox-sw.min.js");

SW.js 编写

配置相关

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
workbox.setConfig(
    {
        // 是否开启debug
        debug: false
    }
);

let cacheSuffixVersion = '-220806'; // 缓存版本号
const maxEntries = 100; // 最大条目数

workbox.core.setCacheNameDetails({
    prefix: 'zsan', // 前缀
    suffix: cacheSuffixVersion, // 后缀
});

//检测是否安装成功
if (workbox) {
    console.log("Yay! Workbox is loaded 🎉")
} else {
    console.log("Boo! Workbox didn't load 😬")
}

预缓存文件

1
2
3
4
5
6
7
8
let cacheFiles = [
    {
        url: "/index.html",
        revision: cacheSuffixVersion
    }
];

workbox.precaching.precacheAndRoute(cacheFiles);

workbox策略

cdn策略

对于一些cdn的使用,使用CacheFirst 缓存优先策略,此策略将首先检查缓存中是否有响应,如果有响应,则使用该策略。如果请求不在缓存中,则将使用网络,并将任何有效响应添加到缓存中,然后再传递给浏览器。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
workbox.routing.registerRoute(
    new RegExp('^https://fastly\\.jsdelivr\\.net'),
    new workbox.strategies.CacheFirst({
        cacheName: 'static-immutable' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit',
        },
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxAgeSeconds: 30 * 24 * 60 * 60,
                purgeOnQuotaError: true,
            }),
        ],
    })
);

字体文件

对于字体文件,基本上确定好就不会改动了,这里使用StaleWhileRevalidate,此策略将对网络请求使用缓存来响应(如果有),并在后台更新缓存。如果未缓存,它将等待网络响应并使用它。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
workbox.routing.registerRoute(
    // 匹配 woff 字体
    new RegExp('.*.woff'),
    new workbox.strategies.StaleWhileRevalidate({
        // cache storage 名称和版本号
        cacheName: 'font-cache' + cacheSuffixVersion,
        plugins: [
            // 使用 expiration 插件实现缓存条目数目和时间控制
            new workbox.expiration.ExpirationPlugin({
                // 最大保存项目
                maxEntries,
                // 缓存 30 天
                maxAgeSeconds: 30 * 24 * 60 * 60,
            }),
            // 使用 cacheableResponse 插件缓存状态码为 0 的请求
            new workbox.cacheableResponse.CacheableResponsePlugin({
                statuses: [0, 200],
            }),
        ],
    })
);

API资源

API数据的请求使用NetworkFirst 策略,此策略将尝试首先从网络获得响应。如果收到响应,它将把它传递给浏览器,并将其保存到缓存中。如果网络请求失败,将使用最后一个缓存的响应。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
workbox.routing.registerRoute(
    // 匹配 leancloudapi.xsbb.ml
    new RegExp('^https://(?:blog\\.zsan\\.ml)'),
    new workbox.strategies.NetworkFirst({
        // cache storage 名称和版本号
        cacheName: 'blog-api-cache' + cacheSuffixVersion,
        fetchOptions: {
            mode: 'cors',
            credentials: 'omit',
        },
        networkTimeoutSeconds: 3,
    })
);

Google-Analytics

官方有Google Analytics 离线统计插件 ,但是英文的,相关资料也少,折腾了好一阵子

1、简单点,一句代码就行,注意用这个时候,head里的代码需要是官方获取的最新的

1
workbox.googleAnalytics.initialize()

2、带离线统计

需要去Google analytics 添加自定义指标和自定义维度

1
2
3
4
5
6
7
8
9
workbox.googleAnalytics.initialize({
    parameterOverrides: {
        cd1: 'offline',
    },
    hitFilter: (params) => {
        const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
        params.set('cm1', queueTimeInSeconds);
    },
});

其他后缀匹配

保证体验良好

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
workbox.routing.registerRoute(
    new RegExp('.*.(?:png|jpg|jpeg|svg|gif|webp|ico)'),
    new workbox.strategies.StaleWhileRevalidate()
);

workbox.routing.registerRoute(
    new RegExp('.*.(css|js)'),
    new workbox.strategies.StaleWhileRevalidate()
);
// 默认
workbox.routing.setDefaultHandler(
    new workbox.strategies.NetworkFirst({
        networkTimeoutSeconds: 3,
    })
);

改造完成,尽情享用🎉

参考资料

初识 Service Worker —— 使用 Workbox 快速开发 Service Worker - 宝硕博客

PWA来了,你准备好了么? - PWA学习手册

HOME · PWA 应用实战

Service worker overview - Chrome Developers