PWA离线优先策略：提升用户体验的关键步骤

头像
天涯学馆
     湖北
    阅读 7 分钟

    Progressive Web Apps (PWA) 的离线优先策略是通过Service Worker和Cache API实现的，它允许在没有网络连接时仍然可以访问网站的部分或全部内容。

    1. 创建Service Worker注册文件（service-worker.js）：

    self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache-v1').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/style.css',
        '/script.js',
        // 添加其他需要预缓存的文件路径
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request).then((networkResponse) => {
        caches.open('my-cache-v1').then((cache) => {
          cache.put(event.request.url, networkResponse.clone());
        });
        return networkResponse;
      }).catch(() => {
        // 如果所有尝试都失败，可以返回一个备用响应，比如错误页面
        return caches.match('/offline.html');
      });
    })
  );
});

    2. 注册Service Worker：

    在你的主应用中注册Service Worker：

    if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then((registration) => {
        console.log('Service Worker registered:', registration);
      })
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

    3. 更新策略：

    当有新版本的应用时，需要更新Service Worker和缓存内容。可以在Service Worker中监听activate事件：

    self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((cacheName) => cacheName !== 'my-cache-v1').map((cacheName) => caches.delete(cacheName))
      );
    })
  );
});

    4. 更新Service Worker：

    更新Service Worker时，需要改变Service Worker文件名（如增加版本号），这样浏览器会认为这是新的SW并触发安装过程。

    5. 更新Service Worker生命周期管理：

    确保在Service Worker更新时，旧版本的Service Worker不会影响用户体验。通常，你可能希望旧版本Service Worker完成所有请求后再关闭：

    self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

    6. 配置manifest文件：

    创建一个manifest.json文件，定义应用的元数据和离线图标：

    {
  "short_name": "My App",
  "name": "My Awesome Progressive Web App",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

    在HTML中引用manifest文件：

    <link rel="manifest" href="/manifest.json">

    7. 离线通知和重新加载提示

    当用户离线后重新上线时，可以通过Service Worker发送通知提醒用户重新加载页面以获取更新内容：

    self.addEventListener('online', (event) => {
  clients.matchAll({ type: 'window' }).then((clients) => {
    clients.forEach((client) => {
      client.postMessage({ type: 'RELOAD' });
    });
  });
});

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'RELOAD') {
    clients.matchAll({ type: 'window' }).then((clients) => {
      clients.forEach((client) => {
        if (client.url === self.registration.scope && 'focus' in client) {
          client.focus();
          client.reload();
        }
      });
    });
  }
});

    在主应用中监听消息：

    navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'RELOAD') {
    alert('网络已恢复，刷新页面获取最新内容。');
    location.reload();
  }
});

    8. 离线提示和体验

    当用户离线时，提供友好的离线页面或提示：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>离线页面</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f2f2f2;
    }

    h1 {
      font-size: 2rem;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>您已离线，稍后再试。</h1>
</body>
</html>

    然后在Service Worker的fetch事件中处理：

    self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      // 检查网络请求失败的情况
      return fetch(event.request).catch(() => {
        // 返回离线页面
        return caches.match('/offline.html');
      });
    })
  );
});

    9. 更新缓存策略

    有时你可能希望缓存特定版本的资源，而不是始终使用最新的。这可以通过在Service Worker中添加版本控制来实现：

    const CACHE_NAME = 'my-cache-v2';
const urlsToCache = [
  // ...
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      if (response) {
        return response;
      }
      return fetch(event.request).then((networkResponse) => {
        caches.open(CACHE_NAME).then((cache) => {
          cache.put(event.request.url, networkResponse.clone());
        });
        return networkResponse;
      });
    })
  );
});

    10. 使用App Shell架构

    App Shell模型是一种常见的PWA设计模式，它提供一个基本的用户界面框架，即使在离线状态下也能加载。App Shell通常包括导航、头部、侧边栏等非动态内容，这样即使在离线时，用户也能看到应用的基本结构。

    首先，创建一个App Shell HTML文件（如app-shell.html），包含基本的布局和样式。然后，在Service Worker中预缓存App Shell：

    const appShellUrls = [
  '/app-shell.html',
  '/app-style.css',
  // 其他App Shell相关的资源
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('app-shell-cache').then((cache) => {
      return cache.addAll(appShellUrls);
    })
  );
});

    在fetch事件中，优先从缓存中获取App Shell资源：

    self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(caches.match('/app-shell.html'));
  } else {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
    );
  }
});

    11. 使用Service Worker拦截网络请求

    Service Worker还可以用于拦截特定类型的网络请求，例如API调用。这使得你可以在离线时返回默认值或存储的响应，以提供一致的用户体验：

    self.addEventListener('fetch', (event) => {
  if (event.request.url.startsWith('https://api.example.com')) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request).then((networkResponse) => {
          caches.open('api-cache').then((cache) => {
            cache.put(event.request.url, networkResponse.clone());
          });
          return networkResponse;
        });
      })
    );
  } else {
    // 处理其他非API请求
  }
});

    12. 集成WebSocket支持

    如果你的应用使用WebSocket进行实时通信，可以使用workbox-websocket库在Service Worker中处理WebSocket连接，确保在离线时能够接收和发送消息：

    importScripts('https://unpkg.com/workbox-sw@latest/runtime-caching/workbox-sw.prod.v2.js');
importScripts('https://unpkg.com/workbox-websocket@latest/workbox-websocket.prod.v2.js');

workbox.webSocket.register('wss://your-websocket-endpoint.com', {
  onConnect: (client) => {
    console.log('WebSocket connected:', client);
  },
  onClose: (client) => {
    console.log('WebSocket disconnected:', client);
  },
});

    13. 测试和监控

    确保在不同网络条件下测试你的PWA，包括2G、3G和离线状态。可以使用Chrome开发者工具的模拟网络条件功能。同时，使用Lighthouse等工具定期评估PWA的性能和离线体验。

    14. 总结

    通过这些策略，可以创建一个高度可用且用户体验优秀的PWA，即使在离线或弱网络环境下也能正常工作。PWA的目标是提供接近原生应用的体验，因此持续优化和测试是关键。

    pwa前端javascript
    天涯学馆
    15 声望1 粉丝

    专注于web开发技术！学习和分享知识

    « 上一篇
    Webpack Bundle Analyzer：深入分析与优化你的包

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 22阅读 9.8k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.6k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.1k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3k

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.1k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.5k评论 3

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.5k评论 3

    0 条评论
    得票最新