Progressive Web Apps (PWA) 教程

1. 什么是 Progressive Web Apps (PWA)？

Progressive Web Apps (PWA) 是一种结合了 Web 应用和原生移动应用优势的应用程序。它们可以在任何设备上运行，并且具有离线访问、推送通知、快速加载等特性。PWA 使用现代 Web API 和传统的渐进增强策略来提供类似原生应用的用户体验。

1.1 PWA 的核心特性

渐进式增强：适用于所有浏览器，无论新旧。
响应式设计：适应任何设备，包括桌面、平板和手机。
离线访问：通过 Service Workers 实现离线访问。
应用外壳架构：快速加载应用外壳，动态加载内容。
推送通知：与用户互动，提高用户参与度。
安装性：用户可以将其添加到主屏幕，无需通过应用商店。

2. 开发环境设置

在开始开发 PWA 之前，我们需要设置一个基本的开发环境。

2.1 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它允许我们在服务器端运行 JavaScript。

访问 Node.js 官网下载并安装适合你操作系统的版本。
安装完成后，打开终端或命令提示符，输入以下命令验证安装是否成功：
```
node -v
npm -v
```
如果显示版本号，说明安装成功。

2.2 创建项目目录

创建一个新的项目目录：
```
mkdir my-pwa
cd my-pwa
```
初始化 npm 项目：
```
npm init -y
```
这将创建一个 package.json 文件，用于管理项目的依赖和脚本。

3. 创建基本的 HTML 页面

首先，我们创建一个简单的 HTML 页面作为 PWA 的基础。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My PWA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My PWA</h1>
    <script src="app.js"></script>
</body>
</html>

4. 添加 Service Worker

Service Worker 是 PWA 的核心组件之一，它允许我们在后台运行脚本，处理缓存、推送通知等任务。

4.1 注册 Service Worker

在 app.js 中注册 Service Worker：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('Service Worker registered with scope:', registration.scope);
            })
            .catch(error => {
                console.log('Service Worker registration failed:', error);
            });
    });
}

4.2 创建 Service Worker 脚本

在项目根目录下创建 sw.js 文件，并添加以下代码：

self.addEventListener('install', event => {
    console.log('Service Worker installing.');
});

self.addEventListener('activate', event => {
    console.log('Service Worker activating.');
});

self.addEventListener('fetch', event => {
    console.log('Fetching:', event.request.url);
});

5. 添加 Web App Manifest

Web App Manifest 是一个 JSON 文件，它提供了关于 PWA 的元数据，如名称、图标、主题颜色等。

5.1 创建 Manifest 文件

在项目根目录下创建 manifest.json 文件，并添加以下内容：

{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ]
}

5.2 在 HTML 中引用 Manifest

在 index.html 的 <head> 部分添加以下代码：

<link rel="manifest" href="/manifest.json">

6. 测试 PWA

现在，我们可以测试我们的 PWA 了。

6.1 启动本地服务器

使用 Node.js 的 http-server 模块启动一个本地服务器：

npm install http-server -g
http-server

6.2 访问 PWA

打开浏览器，访问 http://localhost:8080，你应该能看到你的 PWA 页面。

6.3 检查 PWA 功能

离线访问：关闭网络连接，刷新页面，你应该仍然能看到页面内容。
添加到主屏幕：在 Chrome 浏览器中，点击右上角的菜单，选择“添加到主屏幕”。

7. 实践练习

7.1 添加离线缓存

修改 sw.js 文件，添加离线缓存功能：

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
    '/',
    '/styles.css',
    '/app.js',
    '/icon.png'
];

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

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

7.2 添加推送通知

获取用户权限：

if ('Notification' in window) {
    Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
            console.log('Notification permission granted.');
        }
    });
}

发送通知：

if (Notification.permission === 'granted') {
    new Notification('Hello!', {
        body: 'This is a notification from your PWA.'
    });
}

8. 总结

通过本教程，你已经学会了如何创建一个基本的 Progressive Web App。你了解了 PWA 的核心特性，包括 Service Worker、Web App Manifest 和离线缓存。通过实践练习，你进一步掌握了如何实现离线访问和推送通知。

PWA 是一个强大的工具，可以帮助你创建高性能、用户体验良好的 Web 应用。继续探索和学习，你将能够构建更加复杂和功能丰富的 PWA。

9. 进一步学习资源

通过这些资源，你可以深入了解 PWA 的更多高级功能和最佳实践。

← Previous: 17. 现代 Web 开发 Next: WebAssembly 简介 →