【serviceWorker】serviceWorker 攻略

serviceWorker 攻略

一、什么是service worker

Service Worker 是一种在浏览器背后运行的 JavaScript 脚本，它可以在网络请求和响应之间充当代理，以使您能够控制页面的网络请求和缓存。Service Worker 为您提供了一种编程方式来处理离线体验、网络性能优化和推送通知等功能。

二、service worker特点

独立于页面：Service Worker 在浏览器背后运行，与页面完全独立，即使页面关闭或者用户离开了页面，Service Worker 仍然可以继续运行。
网络代理：Service Worker 可以拦截页面发起的网络请求，并根据需要处理这些请求，包括响应缓存、离线支持、请求重定向等。
离线支持：通过使用 Service Worker，您可以在客户端缓存应用程序的资源，使得用户在离线状态下仍然能够访问应用程序的内容。
推送通知：Service Worker 还可以用于接收来自服务器的推送通知，以便在用户不活跃时发送通知。
后台同步：Service Worker 提供了后台同步功能，允许您在网络连接恢复时执行后台数据同步操作。
安全性：由于 Service Worker 在独立的上下文中运行，因此它具有一定的安全性，可以防止恶意脚本干扰或劫持 Service Worker。

三、service worker应用场景

离线缓存：Service Worker 可以拦截页面的网络请求，并将请求的响应数据缓存到客户端，从而实现离线缓存功能。这使得用户在离线状态下仍然能够访问应用程序的内容，提高了应用程序的可靠性和用户体验。
性能优化：Service Worker 可以缓存应用程序的资源（如 HTML、CSS、JavaScript 文件、图像等），使得这些资源能够在用户再次访问应用程序时快速加载，提高了页面加载速度和性能。
后台同步：Service Worker 提供了后台同步功能，允许您在网络连接恢复时执行后台数据同步操作。这使得应用程序能够在后台执行一些耗时的任务，如数据同步、数据备份等，而不会影响到用户的使用体验。
推送通知：Service Worker 还可以用于接收来自服务器的推送通知，以便在用户不活跃时发送通知。这使得您可以向用户发送实时的通知消息，提高了应用程序的交互性和用户参与度。
动态内容更新：通过使用 Service Worker，您可以在客户端缓存应用程序的内容，并定期更新缓存，以确保用户能够获得最新的内容。这使得您能够实现动态内容更新，提供更具吸引力和实时性的用户体验。
路由和路由拦截：Service Worker 可以拦截页面的路由请求，并根据需要对路由进行处理，例如重定向、路由转发等。这使得您能够实现自定义的路由逻辑，实现更灵活的页面导航和路由管理。

四、使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Progressive Web App</title>
  <link rel="stylesheet" href="/styles/main.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <img src="/images/logo.png" alt="Logo">
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          console.error('ServiceWorker registration failed: ', err);
        });
      });
    }
  </script>
</body>
</html>

sw.js

// 定义要缓存的资源列表
const cacheName = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

// 在安装阶段缓存所需资源
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// 拦截网络请求并返回缓存数据
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 如果在缓存中找到匹配的请求，则直接返回缓存数据
        if (response) {
          return response;
        }
        // 否则，向网络发起请求并将响应存入缓存
        return fetch(event.request).then(
          function(response) {
            // 确保响应有效
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            // 将请求和响应克隆到缓存中
            var responseToCache = response.clone();
            caches.open(cacheName)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
            return response;
          }
        );
      })
  );
});