PWA 开发实践：如何构建具有良好用户体验的 PWA 应用？-JavaScript中文网-JavaScript教程资源分享门户

随着移动设备的普及和网络的普及，越来越多的用户希望能够随时随地访问网站，即使在没有网络连接的情况下也能够使用网站的核心功能。PWA（Progressive Web App）就是应运而生的一种解决方案，它采用了 Web 技术和现代浏览器的新特性，能够为用户带来更好的应用体验和更高的可用性。

本文将介绍如何构建具有良好用户体验的 PWA 应用。我们将分为以下几个步骤：

创建基本的 Web 应用
确定应用的核心功能
实现 PWA 的关键特性
优化应用性能
部署应用到生产环境

1. 创建基本的 Web 应用

首先，我们需要创建一个基本的 Web 应用，可以使用任何你熟悉的前端框架，比如 React、Vue、Angular 等，这里我们以 React 为例。

创建项目目录，并初始化一个 React 应用：

mkdir my-pwa
cd my-pwa
npx create-react-app .

启动应用：

npm start

打开浏览器访问 http://localhost:3000，我们就能看到 React 应用的欢迎界面。

2. 确定应用的核心功能

在构建 PWA 应用之前，我们需要了解应用的核心功能是什么。这个过程需要站在用户的角度，思考他们使用这个应用的目的。同时，我们也需要对应用的数据进行分析，以确定哪些数据是必需的，哪些是次要的。

以一个电商应用为例，可能的核心功能包括：

查看商品列表
查看商品详情
加入购物车
下单
支付
查看订单状态

我们需要确保应用的核心功能能够在离线状态下也能正常访问，因此我们需要先创建一个离线缓存的策略，以确保用户即使在没有网络连接的情况下也能使用应用的核心功能。

3. 实现 PWA 的关键特性

PWA 的关键特性包括：

离线访问
应用安装
推送通知

离线访问

离线访问是 PWA 的核心特性之一，在有网络连接的情况下，我们需要预加载应用的核心资源，以确保用户可以快速访问。

我们可以使用 service worker 来实现离线访问，service worker 是一个 JavaScript 脚本，运行在浏览器背后，它可以拦截网络请求，将请求转发给缓存，以实现离线访问，并提高应用的性能。

例如，我们可以使用 Workbox 库来创建一个 service worker，它提供了一组简单易用的 API，能够帮助我们快速实现常见的 PWA 功能，比如缓存策略、离线访问、Push 通知等。

安装 Workbox：

npm install workbox-cli --save-dev

创建一个 service worker 配置文件：

npx workbox wizard

按照提示进行配置，最后会生成一个 workbox-config.js 文件，内容类似以下代码：

module.exports = {
  "globDirectory": "build/",
  "globPatterns": [
    "**/*.{json,ico,html,js,css,png,jpg}"
  ],
  "swDest": "build/sw.js"
};

其中，globPatterns 指定需要缓存的文件类型，swDest 指定生成的 service worker 路径。

最后，在项目根目录下的 package.json 文件中添加如下脚本：

{
  "scripts": {
    "build": "npm run build && workbox generateSW --config workbox-config.js",
  }
}

这样，在构建应用时，Workbox 会自动生成一个 service worker。

应用安装

PWA 还允许用户将应用安装到设备上，以便更方便地访问应用。我们可以使用 Web App Manifest 和 Service Worker 来实现应用安装功能。

Web App Manifest 是一个 JSON 文件，用来定义应用的元数据，包括应用图标、名称、主题颜色等。它允许我们在桌面、起始页或应用商店等位置提供一致的体验。

在 public 目录下创建一个 manifest.json 文件，添加以下内容：

// javascriptcn.com 代码示例
{
  "name": "My PWA",
  "short_name": "My PWA",
  "icons": [
    {
      "src": "./logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#fff",
  "background_color": "#000"
}

这样，我们就已经创建了一个简单的 Web App Manifest，指定了应用的名称、图标、主题色等信息。在 index.html 文件中添加以下代码，将 manifest 文件引入页面：

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

接下来，我们需要在 service worker 中添加一个监听器，以便在用户点击应用安装按钮时触发。在 service worker 文件中添加以下代码：

// javascriptcn.com 代码示例
self.addEventListener('fetch', function(event) {
  if (event.request.url.endsWith('/manifest.json')) {
    event.respondWith(
      new Response('{"name": "My PWA"}', {
        headers: {'Content-Type': 'application/json'}
      })
    );
  }
});

这样，我们就已经实现了 PWA 的应用安装功能。

推送通知

PWA 还支持推送通知功能，我们可以向用户发送推送通知，以提醒他们更新内容或执行一些操作。

Push API 是提供了向用户发送推送通知的能力的 API，需要在服务器端配合使用。以 Firebase 为例，我们可以使用 Firebase 提供的 Cloud Functions 服务，编写一个云函数，向用户发送通知。

在 Firebase 控制台中创建一个新的项目，并配置 Cloud Messaging，获取 server key 和 sender ID。

安装 Firebase SDK：

npm install firebase --save

在项目根目录下创建一个 firebase-messaging-sw.js 文件，添加以下代码：

// javascriptcn.com 代码示例
importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.5.0/firebase-messaging.js');

firebase.initializeApp({
  apiKey: 'YOUR_APP_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID'
});

firebase.messaging();

其中，YOUR_APP_KEY、YOUR_AUTH_DOMAIN、YOUR_PROJECT_ID、YOUR_APP_ID 需要替换成配置的 Firebase 项目信息。

在应用中引入 Firebase SDK：

// javascriptcn.com 代码示例
import firebase from 'firebase/app';
import 'firebase/messaging';

const firebaseConfig = {
  apiKey: 'YOUR_APP_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  appId: 'YOUR_APP_ID'
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.usePublicVapidKey('YOUR_PUBLIC_VAPID_KEY');

其中，YOUR_APP_KEY、YOUR_AUTH_DOMAIN、YOUR_PROJECT_ID、YOUR_APP_ID 需要替换成配置的 Firebase 项目信息。usePublicVapidKey 方法可以生成一个 VAPID key，以便用于向用户发送推送通知的订阅。

接下来，我们需要在应用中请求用户授权，以便订阅推送通知。

messaging
  .requestPermission()
  .then(() => messaging.getToken())
  .then((token) => subscribeUserToPush(token))
  .catch((err) => console.log(err));

在订阅成功后，我们可以将订阅信息保存到服务器端，以便向用户发送推送通知。

// javascriptcn.com 代码示例
function subscribeUserToPush(token) {
  return fetch('/users/subscribe', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({token}),
  });
}

这样，我们就已经实现了 PWA 的推送通知功能。

4. 优化应用性能

除了实现 PWA 的关键特性之外，我们也需要优化应用的性能，以提高用户体验。

优化性能的方法有很多，这里列出一些常见的方法：

使用 gzip 压缩 HTML、CSS、JS 等资源，减少文件大小
使用 WebP 格式的图片，以减少图片大小
使用 CSS Sprite 和 Icon Font 等技术，减少 HTTP 请求次数
使用 HTTP2 协议、CDN 等技术，提高网络传输效率
使用 Web Worker、Code Splitting 等技术，提高应用性能

这些优化技术的实现方式不在本文讨论范围内，读者可以参考其它文章进行学习和实践。

5. 部署应用到生产环境

当我们准备好部署应用到生产环境时，需要进行以下步骤：

优化和打包应用，将其构建成可部署的 JavaScript 代码
部署应用到服务器上，以便用户可以访问
配置 HTTPS 和 SSL，以保证通信安全
配置 NGINX 或 Apache 等反向代理服务器，以提高应用性能和安全性

部署应用的过程涉及到一些比较复杂的技术，需要进行相关的学习和实践。本文不再详细讨论部署技术的实现方式。

总结

本文介绍了如何构建具有良好用户体验的 PWA 应用。从创建基本的 Web 应用、确定应用的核心功能、实现 PWA 的关键特性、优化应用性能和部署应用到生产环境等步骤进行了详细的讨论，并给出了实际的示例代码。

随着 PWA 技术和现代浏览器特性的不断发展，我们相信 PWA 应用将会越来越普及，并可以为用户带来更好的应用体验和更高的可用性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6544722c7d4982a6ebe508df