如何使用 Parcel 构建 PWA？

推荐答案

// www.javascriptcn.com code example
# 1. 初始化项目
mkdir my-pwa
cd my-pwa
npm init -y

# 2. 安装 Parcel 和依赖
npm install --save-dev parcel
npm install --save @babel/preset-env

# 3. 创建项目结构
mkdir src
touch src/index.html src/index.js src/manifest.json src/sw.js

# 4. 配置 manifest.json
{
  "short_name": "MyPWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff"
}

# 5. 配置 Service Worker (sw.js)
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/index.js',
        '/icon.png'
      ]);
    })
  );
});

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

# 6. 配置 index.html
<!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="manifest" href="/manifest.json">
</head>
<body>
  <script src="./index.js"></script>
</body>
</html>

# 7. 配置 index.js
console.log('Hello, PWA!');

# 8. 配置 package.json
{
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

# 9. 运行项目
npm start

# 10. 构建项目
npm run build

本题详细解读

1. 项目初始化

首先，创建一个新的项目目录并初始化 package.json 文件。使用 npm init -y 可以快速生成默认的 package.json。

2. 安装 Parcel 和依赖

Parcel 是一个零配置的打包工具，非常适合快速构建 PWA。安装 Parcel 和 Babel 预设以确保代码兼容性。

3. 创建项目结构

在 src 目录下创建 index.html、index.js、manifest.json 和 sw.js 文件。这些文件是 PWA 的核心组成部分。

4. 配置 manifest.json

manifest.json 文件定义了 PWA 的元数据，如应用名称、图标、启动 URL 等。这些信息将帮助浏览器识别并安装 PWA。

5. 配置 Service Worker

Service Worker 是 PWA 的核心技术之一，它允许离线访问和缓存资源。在 sw.js 中，我们定义了安装和获取事件的监听器，以便在用户离线时提供缓存内容。

6. 配置 index.html

index.html 是应用的入口文件。在这里，我们引入了 manifest.json 和 index.js 文件，并设置了基本的 HTML 结构。

7. 配置 index.js

index.js 是应用的主要 JavaScript 文件。在这里，你可以编写应用的逻辑代码。

8. 配置 package.json

在 package.json 中，我们添加了 start 和 build 脚本，分别用于启动开发服务器和构建生产版本。

9. 运行项目

使用 npm start 命令启动开发服务器，Parcel 会自动处理所有依赖并启动一个本地服务器。

10. 构建项目

使用 npm run build 命令构建生产版本，Parcel 会优化并打包所有资源，生成可用于部署的文件。

通过以上步骤，你可以使用 Parcel 快速构建一个功能齐全的 PWA。