【PWA】用Service Worker实现离线应用

没有离线缓存的应用，没有网络时就毛都访问不了。但是当我们利用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;
    }
  }

【PWA】用Service Worker实现离线应用

猜你喜欢