JavaScriptProgressiveWebApp_离线缓存与推送通知-js教程-PHP中文网

JavaScriptProgressiveWebApp_离线缓存与推送通知

紅蓮之龍

发布： 2025-11-22 22:47:34

原创

968人浏览过

PWA通过Service Worker实现离线缓存与推送通知，提升Web应用体验。1. 使用Cache First、Network First等策略缓存资源，确保断网可用；2. 通过Push API和Notification API实现消息推送，需获取用户权限并订阅推送服务；3. 注意HTTPS部署、缓存版本管理及订阅信息存储，避免频繁打扰用户。掌握Service Worker生命周期与缓存机制是关键。

javascriptprogressivewebapp_离线缓存与推送通知

在现代Web开发中，Progressive Web App（PWA）通过离线缓存与推送通知功能，极大提升了用户体验。这些特性让网页应用具备接近原生App的能力，比如断网可用、后台消息提醒等。实现这些核心功能的关键是Service Worker。

离线缓存：使用Service Worker管理资源缓存

Service Worker 是一个运行在浏览器后台的脚本，独立于页面，能够拦截网络请求并控制缓存策略。

常见缓存策略包括：

Cache First：优先从缓存读取，无缓存再请求网络，适合静态资源（如CSS、JS、图片）
Network First：优先请求网络，失败后使用缓存，适合动态内容
Stale While Revalidate：立即返回缓存内容，同时后台更新缓存，兼顾速度与数据新鲜度

示例代码注册Service Worker并实现基础缓存：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log('SW registered:', reg))
    .catch(err => console.log('SW registration failed:', err));
}

登录后复制

在 sw.js 中监听 install 事件进行预缓存：

立即学习“Java免费学习笔记（深入）”；

const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/style.css', '/app.js'];

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

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

登录后复制

推送通知：实现用户消息唤醒

推送通知依赖 Push API 和 Notification API，允许应用在关闭状态下接收服务器消息并弹出提醒。

Hour One

AI文字到视频生成

查看详情

实现步骤如下：

获取用户授权：调用 Notification.requestPermission() 获取通知权限
订阅推送服务：通过 PushManager 订阅，生成唯一的推送端点（endpoint）
服务器发送推送：使用第三方服务（如Firebase Cloud Messaging或Web Push库）向端点发送消息
客户端处理推送：Service Worker 监听 push 事件并显示通知

在主页面请求权限并订阅：

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    navigator.serviceWorker.getRegistration().then(reg => {
      reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: '你的VAPID公钥'
      }).then(sub => console.log('Push subscription:', sub));
    });
  }
});

登录后复制

在 sw.js 中监听推送事件：

self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icon.png'
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

登录后复制