没有离线缓存的应用,没有网络时就毛都访问不了。但是当我们利用service worker设置了离线缓存,那我们的应用就算没网也能访问,是不是很神奇,下面是其简单的用法。
想了解service worker相关知识,可以看我另一篇文章service worker相关知识
1.注册service worker
调用navigator.serviceWorker.register方法即可在应用中注册需要用到的serviceWorker文件。
注意:要在页面加载完成后再进行注册,以防影响有网络情况下页面的加载速度!
// 注册 service worker
//要在async函数中使用,没有的话,去掉await关键词
if ("serviceWorker" in navigator) {
try {
const registration = await navigator.serviceWorker.register(
"../src/assets/sw.js"
);
console.log("注册成功");
} catch (error) {
console.log("注册失败", error);
}
}
- 配置sw.js
//sw.js 内容
//设置缓存名字 用于版本比较删除之前的cache
const CACHE_NAME = "cache_name_v1";
this.addEventListener("install", async (event) => {
// 开启一个cache 得到一个cache对象
const cache = await caches.open(CACHE_NAME);
// 等待cache把所有的资源存储
await cache.addAll([
"/index.html",
"/manifest.json",
"/img/icon.png",
"/css/index.css",
"/js/index.js",
]);
// 等待skipWaiting结束才进入到activate
await this.skipWaiting();
});
//sw.js 内容
// 主要清除旧的缓存
this.addEventListener("activate", async (event) => {
const keys = await caches.keys();
// 判断key 删除旧的资源
keys.forEach((key) => {
if (key !== CACHE_NAME) {
caches.delete(key);
}
});
// 表示service worker激活后,立即活的控制权
await this.clients.claim();
});
//sw.js 内容
this.addEventListener("fetch", (event) => {
const req = event.request;
event.respondWith(networkFirst(req));
});
// 网络优先
async function networkFirst(req) {
try {
// 优先网络读取最新的资源
const fresh = await fetch(req);
return fresh;
} catch (e) {
// 去缓存中读取
const cache = await caches.open(CACHE_NAME);
const cached = await cache.match(req);
return cached;
}
}