PWA进阶：离线存储与推送通知的高级技巧

原创

天涯学馆

发布于 2024-05-19 17:37:17

870

发布于 2024-05-19 17:37:17

文章被收录于专栏：Web大前端Web大前端

渐进式网页应用（Progressive Web App, PWA）通过离线存储和推送通知等功能，能够提供类似原生应用的体验。

离线存储（Service Worker）

1. 智能缓存策略：

使用Cache API创建自定义缓存策略，例如，可以区分网络状态，当在线时缓存新资源，离线时使用旧资源。
使用stale-while-revalidate策略，即使在网络不稳定时也能显示旧内容，同时尝试更新。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

2. 资源更新检测：

使用CacheStorage.keys()和CacheStorage.delete()方法，定期检查并清除过期的缓存。

更新Service Worker时，可以检测版本号变化，确保新版本覆盖旧版本的缓存。

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

3. 离线页面：

当用户离线时，可以展示一个定制的离线页面，告知用户当前状态。

4. 错误处理：

优雅降级，当离线存储失败时，提供备用方案，如回退到传统的HTTP请求。

推送通知

1. 权限请求：

在适当的时间请求用户授权推送通知，例如，用户完成首次交互后。

2. 个性化通知：

根据用户行为和偏好发送相关通知，避免打扰用户。

3. 富媒体通知：

利用Web Push API的特性，发送带有图标、标题、正文和URL的富媒体通知。

navigator.serviceWorker.ready.then((registration) => {
  registration.pushManager.getSubscription()
    .then((subscription) => {
      if (subscription) {
        sendNotification(subscription);
      } else {
        showSubscriptionPrompt();
      }
    });
});

function sendNotification(subscription) {
  const payload = JSON.stringify({ title: 'New Update Available!' });
  fetch('https://your-push-server.com/send', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      subscription: subscription,
      data: payload,
    }),
  });
}