通过Service Worker 缓存优化 Typecho 的首页访问加速
Service Worker 是一种运行在浏览器背景的脚本，它可以在页面关闭后继续运行，主要用于处理网络请求、缓存资源、推送消息等功能。
认识
Service Worker 也是一个后台运行的脚本，充当一个代理服务器，拦截用户发出的网络请求，比如加载脚本和图片。Service Worker 可以修改用户的请求，或者直接向用户发出回应，不用联系服务器，这使得用户可以在离线情况下使用网络应用。它还可以在本地缓存资源文件，直接从缓存加载文件，因此可以加快访问速度。
条件
要使用 Service Worker 确保网站支持 HTTPS 协议，这是必要条件。
注册
Typecho 使用的话，需要在主题的 header.php 或者 footer.php 里面添加如下代码，以完成 Service Worker 注册。
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceworker.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
}
</script>
新建
在网站的根目录新建 serviceworker.js 和 offline.html 两个独立文件，其中js为引入的必需文件，offline为非必需离线文件。
const CACHE_NAME = 'typecho-cache-v2';
const OFFLINE_URL = '/offline.html';
const urlsToCache = [
'/',
'/index.php',
'/usr/themes/你的主题名字/css/style.min.css', /**css文件
'/usr/themes/你的主题名字/js/script.min.js', /**js文件
'/usr/uploads/ /**存储在服务器的图片或文件
'/favicon.ico',
OFFLINE_URL,
'https://artalk.bosir.cn/dist/Artalk.js' /**第三方缓存文件
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
.then(() => self.skipWaiting())
);
});
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(name => {
if (name !== CACHE_NAME) {
return caches.delete(name);
}
})
);
}).then(() => self.clients.claim())
);
});
self.addEventListener('fetch', event => {
if (event.request.method !== 'GET') return;
event.respondWith(
caches.match(event.request).then(response => {
if (response) return response;
return fetch(event.request).then(response => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseToCache));
return response;
}).catch(() => {
return caches.match(OFFLINE_URL);
});
})
);
});
offline模式，即离线模式，f12 打开开发者工具后找到 online选项，点击后会出现offine 字样，点击打开离线模式，刷新页面会发现首页依然可以访问，而没有缓存的页面就显示下面的离线页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水清无鱼</title>
</head>
<body>
<h1>离线模式</h1>
</body>
</html>
缓存
为了防止在浏览器需要请求新版本的 serviceworker.js 文件时，而文件自身被缓存，所以需要给 serviceworker.js 文件单独指定缓存头 Cache-control: no-store 或 no-cache 。然后在 Nainx 的 server { 区域内添加：
# serviceworker.js 不设置缓存
location ~* /(.*)/serviceworker\.js {
add_header Cache-Control no-cache;
add_header Pragma no-cache;
add_header Expires 0;
}
添加完毕后，重启Nginx服务器。
更新
在更新 Service Worker 时，需要修改 CACHE_NAME 的版本号以触发缓存更新
const CACHE_NAME = 'typecho-cache-v1';
或
const CACHE_NAME = 'typecho-cache-v2';
总结
整体来说，只要不涉及复杂的主题和js，Typecho 已经足够快，且拥有良好的打开速度。可如果你像我一样比较追求极致性能，喜欢折腾，也可以尝试一下。我的目标是把博客优化到和静态博客一样丝滑，目前缓存过后进入首页只需要100ms以内，en...
题外话
目前 typecho 已经出现了 1.3.0测试版本，没错，就是目前我现在使用的这个版本。不过我并不建议大家进行升级，毕竟BUG有点多。我目前是全站 0 插件，测试版本的兼容性有待考量。且如果php像我一样为最新版，出现的问题可能更多...
参考资料
1.// cloud.tencent.com/developer/article/2005909
2.// www.luolt.cn/archives/1848.html
3.// www.bookstack.cn/read/webapi-tutorial/docs-service-worker.md
