前端 PWA 实战：构建离线可用与可安装的 Web 应用 | 极客日志

JavaScript大前端

前端 PWA 实战：构建离线可用与可安装的 Web 应用

综述由AI生成PWA 技术通过 Manifest 和 Service Worker 实现 Web 应用的类原生体验。核心优势包括离线访问、主屏幕安装及推送通知。对比了不完整配置与标准实践，详解了缓存策略、权限请求及推送处理逻辑。正确实施需关注资源预加载、版本管理及多端兼容性，避免仅添加基础文件而忽略功能完整性。掌握 PWA 能让 Web 应用兼具跨平台灵活性与原生性能体验。

涅槃凤凰发布于 2026/4/12更新于 2026/5/2620 浏览

前端 PWA 实战：构建离线可用与可安装的 Web 应用

常见误区

提到 PWA，很多人第一反应是'这不就是加个 manifest 和 service worker 吗？'。确实，基础配置很简单，但真正的挑战在于如何让它具备原生体验。

离线访问：很多开发者以为加了缓存就能离线，结果静态资源没配好，连首页都打不开。
安装到主屏幕：manifest 配置不全，导致用户无法看到'添加到主屏幕'的提示。
推送通知：忽略了权限请求时机，或者没有处理后台推送逻辑，导致通知发不出去。

PWA 不是简单的技术堆砌，而是一种现代化的 Web 应用模式。我们需要关注的是完整的用户体验闭环。

为什么你需要这个？

在移动端流量见顶的今天，PWA 提供了极佳的替代方案：

离线访问：即使网络波动或无网，核心功能依然可用。
安装便捷：像原生 App 一样出现在主屏幕，无需经过应用商店审核。
推送触达：通过 Service Worker 实现消息推送，提升用户留存。
性能优化：利用缓存策略加速首屏加载，减少服务器压力。
跨平台：一套代码覆盖 iOS、Android 及桌面端浏览器。

避坑指南：反面教材

看看这些常见的错误写法，它们往往导致 PWA 失效或体验割裂。

不完整的 HTML 结构

<!-- 缺少必要的 meta 标签和 manifest 链接 -->
<!DOCTYPE html>
<html>
<head>
    <title>我的 PWA 应用</title>
    <!-- 缺少 theme-color -->
    <!-- 缺少 apple-touch-icon -->
</head>
<body>
    <h1>我的 PWA 应用</h1>
    <p>这是一个不完整的 PWA 应用</p>
</body>
</html>

无效的 Service Worker


self.(,  {
    .();
});
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 -->
    <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>
    <!-- 注意：添加 ID 以便 JS 绑定事件 -->
    <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" }
    ]
}

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 ? 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));
});

// 请求通知权限
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 应用

常见误区

为什么你需要这个？

避坑指南：反面教材

不完整的 HTML 结构

无效的 Service Worker

更多推荐文章

相关免费在线工具

标准实践：完整落地

1. HTML 入口文件

2. Manifest 配置文件

3. Service Worker 核心逻辑

4. 前端交互脚本

核心要点

更多推荐文章

相关免费在线工具

前端 PWA 实战：构建离线可用与可安装的 Web 应用

前端 PWA 实战：构建离线可用与可安装的 Web 应用

常见误区

为什么你需要这个？

避坑指南：反面教材

不完整的 HTML 结构

无效的 Service Worker

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

更多推荐文章

相关免费在线工具

标准实践：完整落地

1. HTML 入口文件

2. Manifest 配置文件

3. Service Worker 核心逻辑

4. 前端交互脚本

核心要点

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

更多推荐文章

相关免费在线工具