登录
首页 >  文章 >  前端

PWA离线访问与推送通知实现教程

时间：2026-03-17 20:50:34 433浏览 收藏

本文深入讲解如何用JavaScript打造功能完整的PWA应用，重点攻克离线访问与推送通知两大核心能力：通过Service Worker实现灵活的缓存策略（如缓存优先+网络更新），让网页在断网时依然可用；结合Push API、Notification API与VAPID密钥体系，完成用户授权、设备订阅、后端推送及前端通知展示的全链路实现，并附上HTTPS要求、iOS兼容性提醒及Chrome DevTools实战调试技巧——手把手带你把普通网页升级为媲美原生应用的渐进式体验。

JavaScript如何实现PWA应用_怎样实现离线访问和推送通知

JavaScript 实现 PWA（Progressive Web App）核心靠三件套：Web App Manifest、Service Worker 和 HTTPS。离线访问靠 Service Worker 缓存资源，推送通知则依赖 Push API + Notification API + 后端消息服务（如 Firebase Cloud Messaging）。下面分两块讲清楚关键实现步骤。

让网页支持离线访问

离线能力由 Service Worker 控制，它是一个在后台运行的脚本，能拦截网络请求并返回缓存内容。

  • 注册 Service Worker：在主 JS 文件（如 main.js）中检查浏览器支持后注册：
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg))
      .catch(err => console.error('SW registration failed:', err));
  });
}
  • 编写 sw.js 实现缓存策略：常用“缓存优先 + 网络更新”模式（Stale-While-Revalidate）：
const CACHE_NAME = 'pwa-v1';
const urlsToCache = ['/', '/index.html', '/styles.css', '/app.js'];

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

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request)
      .then(cached => cached || fetch(e.request))
      .catch(() => caches.match('/offline.html')) // 可选：提供离线页面
  );
});
  • 注意点：Service Worker 只在 HTTPS（或 localhost）下生效；缓存版本需手动更新 CACHE_NAME 或用 Workbox 自动管理；首次加载不会触发 install，刷新后才生效。

添加推送通知功能

推送需要用户授权、生成设备唯一标识（Push Subscription）、后端发送消息，前端监听事件并展示通知。

  • 请求用户授权并获取订阅信息：
// 检查是否支持 Push API
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.ready.then(reg => {
    reg.pushManager.getSubscription().then(sub => {
      if (sub) return sub;
      return reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('YOUR_VAPID_PUBLIC_KEY')
      });
    }).then(sub => {
      // 将 subscription 对象发送到你的后端保存
      fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(sub)
      });
    });
  });
}
  • 在 Service Worker 中处理推送事件：
self.addEventListener('push', e => {
  const data = e.data?.json() || {};
  const options = {
    body: data.body || '你有一条新消息',
    icon: '/icons/icon-192.png',
    badge: '/icons/badge.png'
  };
  e.waitUntil(self.registration.showNotification(data.title || 'PWA 提醒', options));
});

self.addEventListener('notificationclick', e => {
  e.notification.close();
  e.waitUntil(clients.openWindow('/'));
});
  • 关键准备项：需生成 VAPID 密钥对（用 web-push 工具），后端用私钥签名发送推送；Chrome/Firefox 要求站点为 HTTPS；iOS Safari 目前不支持 Push API（仅支持 Safari 的 Web Push，机制不同）。

补充：快速验证和调试技巧

开发阶段建议借助 Chrome DevTools 的 Application 面板：

  • 在 Application → Manifest 查看 Web App Manifest 是否解析成功（需有 manifest.json 并在 HTML 中 link）；
  • 在 Application → Service Workers 可强制 skip waiting、update on reload、unregister；
  • 在 Application → Clear storage 一键清除缓存与 SW 注册状态；
  • 用 Network → Offline 模拟断网，测试页面是否正常加载。

不复杂但容易忽略：每次修改 sw.js 后必须刷新两次——第一次触发新 SW 安装，第二次让它激活并接管页面。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>