使用渐进式 Web 应用构建现代离线应用

2025-05-24

使用渐进式 Web 应用构建现代离线应用

渐进式 Web 应用 (PWA) 或将成为现代移动应用开发的下一个重大突破。这款强大的工具兼具原生应用的功能和 Web 应用的覆盖范围。它们使用现代 API 来提供可靠性和可安装性，同时只需一份代码库即可在任何地点、任何设备上为任何人提供服务。PWA 在 Web 开发领域正蓬勃发展，大大小小的公司都在积极利用这项强大的技术。今天，我想向您介绍 PWA，并帮助您从一个简单的应用开始。

我们将讨论：

什么是 PWA？

渐进式 Web 应用 (PWA) 是一种利用现代技术提供与原生应用高度相似的用户体验的 Web 应用。近年来，PWA 广受欢迎，因为它们不仅提升了性能和用户体验，还能在用户离线时轻松访问。

PWA 的主要目标是利用移动应用开发者可用的大部分功能，提供与原生应用相同的体验。PWA 将移动应用和 Web 应用的精髓融合到一项技术中。您本质上可以使用前端 Web 技术构建一个网站，但它的行为、体验和操作都与移动应用类似。

替代文本

星巴克用于离线订购的现代 PWA。

这种现代化的应用开发解决方案使移动应用开发者能够轻松地将产品推向市场，而无需经历Apple 或 Play 商店缓慢的验证过程。PWA 部署后，用户即可立即使用。这也意味着用户无需手动更新应用即可获得最新版本：它会被自动部署。

PWA 的开发成本明显低于原生应用，因为它无需同时组建 iOS 和 Android 团队。与原生应用相比，这种极具价值的现代应用开发解决方案能够利用更广阔的 Web 生态系统来维护应用。PWA 显然有很多优势。让我们来看看它们的一些特点。

  • 渐进式： PWA 必须在每台设备上运行并逐步增强，这意味着必须考虑到用户设备或浏览器可用的功能。
  • 可发现：渐进式 Web 应用程序本质上是一个网站，因此它必须能够在搜索引擎上被发现。
  • 离线功能：渐进式 Web 应用(PWA) 应该能够在用户离线时正常工作。即使在网络连接较差或信号较弱的区域，PWA 也应该能够正常工作。
  • 类似应用程序：。PWA 的行为和外观应该类似于原生应用程序。
  • 可链接： PWA 本质上是网站，因此它们应该使用 URI 来指示应用程序的状态，以便应用程序可以保留其状态。

PWA 示例

渐进式 Web 应用 (PWA) 已经成为应用生态系统的一部分。你可能已经用过它了，只是你不知道！以下五款热门 PWA，带你了解哪些公司正在使用这项现代技术。

Uber： Uber 使用 PWA 技术在低速 2G 网络上进行拼车预订。该 PWA 允许用户在与原生应用不兼容的低端设备上访问 Uber 的服务。

Pinterest： Pinterest 了解到，由于移动端性能不佳，只有 1% 的移动用户会转化为注册用户，因此设计了 PWA。他们使用基于 PWA 的技术进行了重新设计，以提升用户体验。

星巴克：星巴克为其网页订餐系统构建了渐进式网页应用 (PWA)，以提供与原生应用类似的线下订餐体验。星巴克的 PWA 允许你无需联网即可浏览菜单并自定义订单。

Spotify： Spotify 采用 PWA 技术，以克服与 Apple 合作的限制。Spotify 的 PWA 应用利用自适应 UI，随着用户使用应用的进度而自动切换背景。

Soundslice： Soundslice 是一款音乐教育软件，它使用 PWA 技术来提升音乐学习体验。基于 Soundslice PWA 的播放器允许用户在其他移动设备或桌面设备上阅读音乐的同时学习音乐。

您应该构建 PWA 还是原生应用程序？

虽然使用 PWA 显然有很多优势，但在某些情况下，原生应用可能是一个更好的选择。让我们进一步分析一下。

PWA 非常适合以下情况：

  • 应用程序必须迅速上市
  • 你的预算有限
  • 上线后你有几个计划
  • 跨平台兼容性是必需的

原生应用非常适合以下情况：

  • 关键要求是速度和响应能力
  • 您想使用特定的硬件或功能
  • 该应用程序必须与第三方应用程序集成

PWA 基础知识

在学习如何下载和构建 PWA 之前，我们需要了解这些应用的组织和结构的基本原理。本节将向您介绍 PWA 的基础知识。为了顺利完成本节，您需要具备一些 HTML、CSS 和 JavaScript 知识。现在就开始吧！

Web 应用清单

Web 清单对于 PWA 至关重要。它提供元数据，指示浏览器如何在任何设备上使用文本文件渲染和显示 PWA JSON。这是重要的第一步，必须安装在主屏幕上。稍后我们将向您展示如何从头创建 Web 应用清单，但您也可以使用清单生成器，这是 PWA 开发者的常用选择。

替代文本

来自微软的 PWA 文档

服务人员

Service Worker 是所有 PWA 的重要基础。它们允许我们拦截网络请求并针对不同的调用实施缓存策略。您可以将其视为一种 Web Worker，但它是一个 JavaScript 文件，充当 Web 应用程序和网络之间的代理。它拦截 HTTP 请求并从网络或本地缓存提供响应。Service Worker 是安全的，无法直接与 DOM 交互。它们通过界面与页面通信postMessage，而界面可以直接与 DOM 交互。

PWA 文件结构

看一下这个 PWA 文件结构。我们将在下面讨论必需部分，并解释哪些功能是可选的。

{
  "short_name": "MyCoolPWA",
  "name": "My cool Progressive Web App",
  "orientation": "landscape",
  "description": "A simple experiment with PWAs",
  "background_color": "#3367D6",
  "theme_color": "#3367D6",
  "scope": "/",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "src": "/images/icons-144.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "maskable any"
    },    
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable any"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable any"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "itunes",
      "url": "https://itunes.apple.com/app/native-app/id345"
    },
    {
      "platform": "play",
      "id": "com.my-domain.native"
      "url": "https://play.google.com/store/apps/details?id=com.my-domain.native",
    }
  ],
  "dir": "ltr"
}
Enter fullscreen mode Exit fullscreen mode

name/short_name

这是在用户设备上安装 PWA 后，应用程序图标下使用的值。short_name当可用空间不足时使用。建议将其控制在 12 个字符以内，以避免被截断。

start_url

这是 PWA 启动时要加载的应用资源的路径。这表示我们希望应用每次启动时都从主页开始。

display

这指定了您的 PWA 应用将如何显示，您可以根据浏览器体验指定不同的值，例如browser标准体验或standalone独立窗口。

icons

这将决定哪些图标显示在主屏幕或启动画面上。其分辨率至少应为144px。某些浏览器（例如 Chrome）建议使用两个不同大小的图标，以便在不同设备上进行缩放。然后，我们可以使用该purpose属性来指示这些不同图标的用途。

background_color

顾名思义，这将设置 PWA 的背景颜色。您可以指定所需的颜色，在 Chrome 上，该背景颜色也会用于启动画面。

我们的 PWA 文件结构中的以下特性是可选属性，用于添加不同的功能或设计元素。如果您想要一个功能齐全的 PWA，建议您使用它们；但如果您只想从基础开始，则只需要我们上面讨论的内容。

  • orientation
  • theme_color
  • scope
  • description
  • related_applications
  • dir

掌握渐进式 Web 应用程序。

学习如何构建、部署和托管 PWA，无需费力浏览视频或复杂的文档。掌握成为熟练 PWA 开发者所需的所有工具。Educative 的文本课程易于浏览，并提供实时编程环境，让学习快速高效。

使用渐进式 Web 应用从零到大师

从头开始创建 PWA

现在我们已经熟悉了 PWA 的基础知识，让我们从头开始学习如何创建一个！本指南将向您介绍创建 PWA 的基础知识。想要更全面的 PWA 构建指南，请查看 Educative 的课程《从零开始，使用渐进式 Web 应用打造卓越应用》。

步骤 1：建立一个基本网站

要制作 PWA，我们需要一个网站。您可以自行搭建，只要它能够在不同的屏幕、浏览器和设备上良好扩展即可；您也可以下载模板。如果您使用模板，请替换模板中的内容，index.html并使用 CSS 更改颜色或设计。网站搭建完成后，我们就可以将其转变为渐进式 Web 应用 (PWA)。

第 2 步：为主屏幕创建应用图标

正如我们在“文件结构”部分提到的，您需要一个 PWA 应用图标。该图标将显示在主屏幕上。您可以自行设计徽标，也可以从网上下载免费的徽标。无论哪种方式，您的徽标都必须是正方形，分辨率至少为144 像素。图标制作完成后，请下载并将 HTML 代码添加到<head>文件index.html。请务必检查此文件的路径是否正确。对于应用设备，需要进行一些额外的设置才能正确显示 PWA 图标。

步骤 3：创建并注册 Web 应用清单

正如我之前提到的，Web 应用清单是构建 PWA 的重要一步。这个文件包含了您网站的所有数据。您可以自己创建一个，也可以使用 Web 应用清单生成器并填写所需的数据。如果您是新手，这是一个不错的选择，因为您可以保留不了解的功能的默认设置。

通常，清单文件存储在 Web 应用程序的根目录中。您可以随意命名它，只要它.webmanifest在末尾有 即可。然后，我们使用 媒体类型 来提供它application/manifest+json。接下来，我们必须使用HTML 文档中<link>部分中的 标签将清单与 Web 应用程序关联起来<head>。以下示例指示用户代理必须采用清单元数据。我们还需要通过添加 属性 来添加凭据crossorigin="use-credentials。

<head>
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
</head>
Enter fullscreen mode Exit fullscreen mode

步骤 4：添加服务工作者

正如我之前概述的，Service Worker 充当我们应用程序和网络的代理。为了使其能够离线运行，我们需要将它添加到 PWA 中。要成功创建 Service Worker，您需要了解JavaScript 中的 Promise知识。创建 Service Worker 主要分为四个步骤：

1. 使用包含 Service Worker 逻辑的 JavaScript 文件注册 Service Worker。您可以使用以下代码。在此阶段，error如果无法获取 Service Worker 文件，您可能会生成一个错误。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceWorker.js')
      .then((registration) => { 
         // The registration was successful       
      })
      .catch((err) => {
         // The registration failed
      });
  }
Enter fullscreen mode Exit fullscreen mode

2. 安装 Service Worker。在此阶段，通常会执行预取操作以确保目标资源（例如静态文件）已下载。这正是我们在 JavaScript 代码中使用Promisecaches.open()的地方。和cache.addAll()都会返回 Promise。安装完成后，Service Worker 会延迟激活，直到旧的 Service Worker 不再控制客户端（如果您已安装）。

var urlsToCache = [
  '/',
  '/styles/styles.css',
  '/script/home.js'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache')
      .then((cache) => {
        return cache.addAll(urlsToCache);
      })
  );
});
Enter fullscreen mode Exit fullscreen mode

3. 激活 Service Worker。旧的 Service Worker 消失后，新的 Service Worker 将被激活。

替代文本
来自 Google 的 PWA 文档

4. 获取并拦截请求。现在我们的 Service Worker 已安装并激活，可以拦截请求并与本地缓存进行通信。我们可以通过多种方式实现此阶段。目前，我将向您展示适用于一般 PWA 场景的最简单方法。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // The responce is in the cache
        if (response) {
          return response;
        }

        // No cache match, we attempt to fetch it from the network
        return fetch(event.request);
      }
    )
  );
});
Enter fullscreen mode Exit fullscreen mode

现在我们了解了在 PWA 中创建和安装 Service Worker 的基本步骤。请记住，还有其他方法可以使用 Service Worker，例如使用sw-toolbox或利用不同的缓存策略。如果您想更多地实践 Service Worker 及其生命周期，Educative 的课程“渐进式 Web 应用从零到精通”将教您如何创建自定义离线页面。现在，让我们进入创建 PWA 的下一个阶段。

步骤 5：初始化“添加到主屏幕”对话框

用户可以通过“添加到主屏幕对话框 (A2HS)”将应用安装到本地设备。我们还需要通过 HTTPS 连接为应用提供服务。为此，Chrome 浏览器会要求您的 PWA 拥有已注册的服务工作线程 (Service Worker)。满足这些要求后，浏览器将显示 A2HS 对话框，例如按钮、弹出窗口或菜单选项。添加到主屏幕后，您的 PWA 将看起来像一个原生应用，并使用您提供的图标。

步骤 6：测试您的 PWA 和清单文件

现在您已经拥有了基本的 PWA，您需要测试它是否正常运行，并确定它是否是一个优秀的 PWA。PWA 开发者常用的工具是 Google Lighthouse，它可以评估您的 PWA 并提出改进建议。您可以安装 Lighthouse，打开您的网站，然后点击“生成报告”。这将打开一个包含宝贵信息的标签页。您应该关注的数据是“渐进式 Web 应用”、“性能”、“可访问性”和“最佳实践”类别的评级。从中，您可以确定需要进行哪些更改。

您还需要测试清单文件。为此，您可以使用浏览器的 DevTools。例如，在 Chrome 中，您需要打开“应用程序”选项卡，访问“清单”部分（左侧），然后查看文件的属性。如果出现错误，它会显示警告。您也可以使用清单验证器来完成此步骤。

替代文本

下一步要学什么

恭喜！您现在知道如何创建基本的 PWA 并将其下载到用户的主屏幕。显然，这个过程比传统的原生应用流程要快得多，也容易得多。PWA 是现代 Web 应用创建和部署的强大工具。要掌握 PWA 开发，还有很多东西需要学习。接下来您需要学习的内容和工具包括：

  • 缓存策略
  • Cloud Firestore 用于离线持久化
  • PWA 库和 Workbox
  • 如何使用 Angular 创建 PWA
  • 部署和托管 PWA

Educative 的课程《渐进式 Web 应用从零入门》由高级软件工程师兼 PWA 爱好者 Francesco Leardini 编写，将带您通过实践完成所有这些步骤及更多内容。本课程将深入讲解构建服务工作线程、缓存、通过 Firebase 部署 PWA 等策略。课程结束后，您将成为一名自信的 PWA 开发者，并开发出功能完善的渐进式 Web 应用。

掌控您的职业生涯并学习如何创建现代渐进式 Web 应用程序。

继续阅读

文章来源：https://dev.to/educative/build-modern-offline-apps-with-progressive-web-apps-4ep8
Devto 翻译
PREV
如何设计 Web 应用程序：软件架构 101
NEXT
50 个 Python 面试问题及答案