如何在PWA中使用Service Workers？

修改于 2023-07-26 03:25:11

词条归属：PWA

要在PWA中使用Service Worker，需要遵循以下步骤：

注册Service Worker

在应用程序中注册Service Worker，可以在应用程序的JavaScript代码中使用以下代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker 注册成功:', registration.scope);
    }, function(err) {
      console.log('Service Worker 注册失败:', err);
    });
  });
}

这段代码会检查浏览器是否支持Service Worker，如果支持，就在页面加载完成后注册Service Worker。在注册Service Worker时，需要指定Service Worker脚本文件的位置。

缓存应用程序资源

在Service Worker脚本文件中，可以使用以下代码缓存应用程序的资源：

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('myapp-static-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/main.js',
        '/images/logo.png'
      ]);
    })
  );
});

这段代码会在Service Worker安装时，打开一个缓存并将应用程序的资源添加到缓存中。

处理离线请求

在Service Worker脚本文件中，可以使用以下代码处理离线请求：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request);
      }
    })
  );
});

这段代码会在每次网络请求时，检查缓存中是否存在响应。如果存在，就返回缓存的响应。否则，就使用fetch()方法从网络获取响应。

更新缓存

在Service Worker脚本文件中，可以使用以下代码更新缓存：

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          return cacheName.startsWith('myapp-') && cacheName !== 'myapp-static-v1';
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

这段代码会在Service Worker激活时，检查所有缓存，并删除旧的缓存。这样，当应用程序更新时，缓存中的响应将是最新的。

[译] JS 中 service workers 的简介