PWA 实战：使用 service worker 优化页面加载速度-JavaScript中文网-JavaScript教程资源分享门户

PWA（Progressive Web Apps）是一种新兴的 Web 应用程序模型，它可以让 Web 应用程序像本地应用程序一样运行。其中一个重要的特点是离线缓存，即使在没有网络连接的情况下也可以访问应用程序。这是通过 service worker 技术实现的。

service worker 是什么？

service worker 是一种 JavaScript 工作线程，它可以在后台运行，独立于 Web 页面。它可以拦截网络请求并决定如何响应这些请求，可以用于实现离线缓存、消息推送等功能。

service worker 与 Web 页面之间通过消息传递进行通信。它可以在 Web 页面没有打开的情况下运行，这使得它可以实现后台任务，比如离线缓存和消息推送。

如何使用 service worker 实现离线缓存？

使用 service worker 实现离线缓存需要以下几个步骤：

在 Web 页面中注册 service worker，代码如下：

// javascriptcn.com 代码示例
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service worker registered:', registration);
    })
    .catch(error => {
      console.log('Service worker registration failed:', error);
    });
}

编写 service worker 脚本

在 service worker 脚本中，需要实现 fetch 事件的监听器，用于拦截网络请求并决定如何响应这些请求。在这个例子中，我们将使用 Cache API 实现离线缓存。

// javascriptcn.com 代码示例
self.addEventListener('fetch', event => {
  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('my-cache')
              .then(cache => {
                cache.put(event.request, responseToCache);
              });
            return response;
          });
      })
  );
});

缓存 Web 页面资源

在 service worker 脚本中，需要实现 install 事件的监听器，用于缓存 Web 页面资源。在这个例子中，我们将缓存 index.html 和 app.js。

// javascriptcn.com 代码示例
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          '/app.js'
        ]);
      })
  );
});

更新缓存

在 service worker 脚本中，需要实现 activate 事件的监听器，用于更新缓存。在这个例子中，我们将删除旧缓存并保留最新缓存。

// javascriptcn.com 代码示例
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames.filter(cacheName => {
            return cacheName.startsWith('my-') && cacheName !== 'my-cache';
          }).map(cacheName => {
            return caches.delete(cacheName);
          })
        );
      })
  );
});

总结

使用 service worker 可以实现离线缓存，提高 Web 应用程序的性能和用户体验。在使用 service worker 时，需要注意以下几点：

service worker 只能在 HTTPS 网站上运行。
service worker 只能在支持它的浏览器上运行，需要进行兼容性测试。
service worker 会在后台运行，需要注意资源占用问题。

参考资料：

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650e32fb95b1f8cacd77862d