1. 创建第一个PWA应用

任务说明

本案例将创建一个极简的PWA应用：一个包含标题和按钮的HTML页面，配套一个描述应用名称、图标和显示模式的manifest.json清单文件。完成后的应用可通过浏览器地址栏右侧的“安装”图标（或“添加到主屏幕”菜单）安装到桌面，安装后以独立窗口运行。

文件结构

my-pwa/
├── index.html
├── manifest.json
└── icon-192.png   (192×192像素PNG图标，需自行准备)

实现代码

index.html — 页面主体，引用清单文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="#" aria-disabled="true" data-keke-missing-local-link="1" onclick="return false">
    <title>我的第一个PWA</title>
</head>
<body>
    <h1>你好，PWA！</h1>
    <p>这是一个可安装到桌面的渐进式Web应用。</p>
    <button id="btn">点击我</button>
    <script>
        document.getElementById('btn').addEventListener('click', function() {
            alert('PWA 运行正常！');
        });
    </script>
</body>
</html>

manifest.json — 应用元数据与安装配置：

{
    "name": "我的第一个PWA",
    "short_name": "PWA示例",
    "start_url": "index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2196F3",
    "icons": [
        {
            "src": "icon-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        }
    ]
}

关键配置说明

• display: "standalone" — 安装后以独立窗口打开，隐藏浏览器地址栏，这是“可安装”体验的核心。
• start_url — 指定从桌面图标启动时加载的页面。
• icons — 至少提供一个192×192像素的PNG图标，否则浏览器不会触发安装提示。

落地与验证

运行方式：由于PWA安装要求页面通过HTTPS或localhost访问，请使用本地服务器（而非直接双击文件）。在项目目录下执行：

# 使用Python启动简易服务器（任选其一）
python3 -m http.server 8080

然后浏览器访问 http://localhost:8080。

验证步骤与判定标准：

1. 打开Chrome/Edge开发者工具 → Application → Manifest，确认清单文件被正确解析，无错误提示，图标已加载。
2. 观察地址栏右侧是否出现安装图标（显示器加下箭头符号）。若未出现，检查图标文件是否存在且尺寸正确。
3. 点击安装图标，浏览器弹出安装确认框，确认后桌面/程序坞出现应用图标。
4. 从桌面图标启动应用，窗口应无浏览器地址栏，标题显示“我的第一个PWA”，点击页面按钮弹出提示框，即判定通过。