记一次痛苦的Debug: Hexo 卸载 PWA 后无法改动网站 [Service Worker]

最初，我想为 blog 添加 PWA，经过漫长的 ChatGPT4，设置了 manifest.json，编写了 sw.js。但那是，我并没有十分清楚 PWA 的工作原理。

后来，心中仍存迷惑的我删除了 manifest.json 和 sw.js，然后我就发现，无论如何修改，提交到 Vercel 后都不会变化……

原理简析

sw.js 是负责控制缓存的，一旦删除，将被视作离线模式，所有已缓存的数据都会永久保留，而这也就是悲剧的开始。

正确的做法

不要删除 sw.js，通过合理的缓存设置，可以让你的网站访问速度提高一个档次，从而缓解 Vercel 带来的不好的体验。以下是一个示例：

const version = 'offline-cache-v3' // 缓存版本号，必要时改变

self.addEventListener('install', function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        Promise.all([
            self.clients.claim(),
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== version) {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});


function isUrlStartingWithFourDigitFolder(url) {
    // 正则表达式解释：^ 表示字符串开始，\/ 表示匹配斜杠 /，
    // \d{4} 表示匹配四个数字，\/ 表示再次匹配斜杠 /
    const regex = /^\/\d{4}\//;

    // 使用URL对象解析给定的URL字符串，以便我们可以轻松地获取路径部分
    const pathname = new URL(url).pathname;

    // 使用正则表达式测试路径是否匹配模式
    return regex.test(pathname);
}


self.addEventListener('fetch', function (event) {
    // 检查请求URL是否匹配不应被缓存的模式
    if (event.request.url === '/index.html' || event.request.url === '/' || isUrlStartingWithFourDigitFolder(event.request.url) || event.request.url.includes('/archives/') || event.request.url.includes('/categories/') || event.request.url.includes('/tags/') ) {
        // 直接从网络获取资源，不尝试缓存
        return fetch(event.request);
    }

    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (response) {
                return response;
            }

            var request = event.request.clone();
            return fetch(request).then(function (httpRes) {
                if (!httpRes || httpRes.status !== 200) {
                    return httpRes;
                }

                var responseClone = httpRes.clone();
                caches.open(version).then(function (cache) {
                    cache.put(event.request, responseClone);
                });

                return httpRes;
            });
        })
    );
})