PWA 不是噱头：离线缓存、安装与推送通知实战

PWA 不只是加个 manifest 和 service worker，它通过离线缓存、安装到主屏幕和推送通知让 Web 应用获得原生体验。文章给出了 manifest.json 和完整 service worker 的配置示例，解释了 Cache First 策略与离线回退的实现，并梳理了推送通知的前端权限请求与展示逻辑，同时指出 PWA 的适用场景与常见坑点，强调协同配置的重要性。

二进制发布于 2026/6/70 浏览

前端一提到 PWA，总有几种固定的声音：'浏览器打开不就挺好？''原生 App 都做了，还要这干嘛？''不就是加个 manifest 和 service worker 嘛。'——但真动手的时候，离线访问失效、安装提示不弹、推送通知调不通，这些坑一个没落下。

PWA 不是简单的技术堆叠。它让 Web 应用能像原生 App 一样离线运行、安装到主屏幕、接收推送通知，同时还保留了跨平台和免分发的优势。这篇文章会串一遍完整的配置要点，从 manifest 到 service worker 的缓存策略，再到推送通知的接入，该踩的坑我都一并标注。

manifest.json：不只是换个图标

很多人以为 manifest 只是给个应用名和几个图标尺寸，实际它决定了安装后的启动行为、显示模式、主题色以及状态栏样式。下面是一个典型的 manifest.json：

{
  "name": "我的 PWA 应用",
  "short_name": "PWA 应用",
  "description": "一个完整的 PWA 应用示例",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的 PWA 应用</title>
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#317EFB">
  <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
  <link rel="preload" href="/style.css" as="style">
  <link rel="preload" href="/script.js" as="script">
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>我的 PWA 应用</h1>
  <p>这是一个完整的 PWA 应用</p>
  <button id="notification-btn">发送通知</button>
  <script src="/script.js"></script>
  <script>
    // 注册 service worker
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
          .then(registration => {
            console.log('Service Worker 注册成功:', registration.scope);
          })
          .catch(error => {
            console.log('Service Worker 注册失败:', error);
          });
      });
    }
  </script>
</body>
</html>

const CACHE_NAME = 'pwa-app-cache-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/manifest.json',
  '/icons/icon-72x72.png',
  '/icons/icon-96x96.png',
  '/icons/icon-128x128.png',
  '/icons/icon-144x144.png',
  '/icons/icon-152x152.png',
  '/icons/icon-192x192.png',
  '/icons/icon-384x384.png',
  '/icons/icon-512x512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Cache opened');
        return cache.addAll(ASSETS_TO_CACHE);
      })
      .then(() => self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .then(response => {
            if (response && response.status === 200 && response.type === 'basic') {
              const responseToCache = response.clone();
              caches.open(CACHE_NAME)
                .then(cache => {
                  cache.put(event.request, responseToCache);
                });
            }
            return response;
          })
          .catch(error => {
            if (event.request.mode === 'navigate') {
              return caches.match('/offline.html');
            }
          });
      })
  );
});

self.addEventListener('push', event => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/icon-72x72.png',
    data: { url: data.url }
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

// script.js
function requestNotificationPermission() {
  if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        console.log('通知权限已授予');
      } else {
        console.log('通知权限被拒绝');
      }
    });
  }
}

function sendNotification() {
  if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.ready.then(registration => {
      registration.showNotification('测试通知', {
        body: '这是一条测试通知',
        icon: '/icons/icon-192x192.png',
        badge: '/icons/icon-72x72.png',
        data: { url: '/' }
      });
    });
  }
}

window.addEventListener('load', () => {
  requestNotificationPermission();
  const notificationBtn = document.getElementById('notification-btn');
  if (notificationBtn) {
    notificationBtn.addEventListener('click', sendNotification);
  }
});

// 检查当前运行模式
function checkPwaMode() {
  const isPwa = window.matchMedia('(display-mode: standalone)').matches ||
                window.navigator.standalone ||
                document.referrer.includes('android-app://');
  console.log(isPwa ? '应用以 PWA 模式运行' : '应用以浏览器模式运行');
}
checkPwaMode();

PWA 不是噱头：离线缓存、安装与推送通知实战

manifest.json：不只是换个图标

更多推荐文章

相关免费在线工具

Service Worker：离线与缓存的灵魂

推送通知：需要服务器配合

不是替代品，但很管用

更多推荐文章

相关免费在线工具

PWA 不是噱头：离线缓存、安装与推送通知实战

manifest.json：不只是换个图标

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

Service Worker：离线与缓存的灵魂

推送通知：需要服务器配合

不是替代品，但很管用

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具