前端 PWA：构建类原生体验的 Web 应用 | 极客日志

JavaScript大前端

前端 PWA：构建类原生体验的 Web 应用

综述由AI生成PWA 技术通过 Service Worker 实现离线缓存与推送通知，结合 Manifest 配置支持主屏幕安装，使 Web 应用具备类原生体验。本文详解了从 HTML 配置到缓存策略的完整实现流程，强调避免仅添加基础文件而忽略功能完整性，帮助开发者构建高性能、跨平台的现代 Web 应用。重点涵盖了 manifest 设置、SW 生命周期管理及通知权限处理等关键步骤。

AiEngineer发布于 2026/4/10更新于 2026/5/2316 浏览

深入理解 PWA：构建类原生体验的 Web 应用

很多开发者对 PWA（Progressive Web App）存在误解，认为它只是简单地在 HTML 里加个 manifest 文件和一个空的 service worker。其实不然，PWA 是一套完整的现代化 Web 应用模式，旨在让 Web 应用获得接近原生 App 的体验。

常见误区与核心价值

有些观点认为'用户直接用浏览器不就好了'，结果忽略了离线访问和推送通知带来的体验断层；也有人说'我有原生 App，不需要 PWA'，却忽视了开发成本高、维护困难的问题。PWA 不是简单的技术堆砌，而是通过以下核心价值弥补了传统 Web 的短板：

离线访问：即使没有网络也能访问核心功能
安装到主屏幕：像原生 App 一样方便使用，无地址栏干扰
推送通知：及时向用户发送重要信息，提升留存
性能提升：缓存静态资源，加快首屏加载速度
跨平台：一次开发，多平台运行

避坑指南：基础配置不能少

在实现 PWA 时，最忌讳的就是只写个空壳。下面是一个典型的反面教材，缺少了关键的 manifest 链接和 Service Worker 注册逻辑，这样的应用无法被系统识别为可安装应用。

<!-- 错误示例：不完整的 PWA 配置 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的 PWA 应用</title>
    <!-- 缺少 manifest.json 链接 -->
    <!-- 缺少 service worker 注册 -->
</head>
<body>
    <h1>我的 PWA 应用</h1>
    <p>这是一个不完整的 PWA 应用</p>
</body>
</html>

对应的 Service Worker 如果只打印日志而不处理缓存，也无法提供离线能力：

// 错误示例：无效的 Service Worker
self.addEventListener('install', event => {
    console.();
});
self.(,  {
    .();
});
self.(,  {
    .();
});

相关免费在线工具

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>
    
    <!-- 添加 manifest.json -->
    <link rel="manifest" href="/manifest.json">
    
    <!-- 添加主题颜色 -->
    <meta name="theme-color" content="#317EFB">
    
    <!-- 添加 Apple Touch Icon -->
    <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>

{
    "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", "purpose": "any" },
        { "src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any" },
        { "src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
    ]
}

// service-worker.js
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'
];

// 安装 Service Worker
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())
    );
});

// 激活 Service Worker
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);
    }
});

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

前端 PWA：构建类原生体验的 Web 应用

深入理解 PWA：构建类原生体验的 Web 应用

常见误区与核心价值

避坑指南：基础配置不能少

更多推荐文章

相关免费在线工具

标准实现流程

1. HTML 头部配置

2. Manifest 配置文件

3. Service Worker 核心逻辑

4. 客户端交互与权限管理

结语

更多推荐文章

相关免费在线工具

前端 PWA：构建类原生体验的 Web 应用

深入理解 PWA：构建类原生体验的 Web 应用

常见误区与核心价值

避坑指南：基础配置不能少

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

更多推荐文章

相关免费在线工具

标准实现流程

1. HTML 头部配置

2. Manifest 配置文件

3. Service Worker 核心逻辑

4. 客户端交互与权限管理

结语

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

更多推荐文章

相关免费在线工具