使用 WorkBox 在 Adobe Experience Manager 上实现现代网络体验

Kalyanaraman Balasubramaniam Krishnan

Salvatore Denaro

如果您是技术主管或数字营销分析师，并且有意为 Adobe Experience Manager (AEM) Web 应用提供现代 Web 体验，但一直在寻找实现此目标的方法，那么请参阅本文。本课将介绍什么是渐进式 Web 应用 (PWA)，以及您需要具备哪些条件才能在 AEM 中通过配置（而无需编码）利用 WorkBox 库创建 PWA。

为何选择 PWA？

渐进式 Web 应用利用了现代网络的优势。它们可以安装到您的设备上，加载迅速，并且后续的访问可即时加载。它们会快速响应输入。在网络连接不可靠或离线时，它们也能正常运行。PWA 使用新型 API 提供富有吸引力的类似应用体验，可选全屏界面、后台更新和离线数据访问。

若要将 Web 应用增强为渐进式 Web 应用，需要添加两个工件：

Web 应用清单：用于定义应用的入口点网址的 JSON 配置文件、用于表示 PWA 的图标，以及其他描述应用外观和行为的配置。
Service Worker：一种脚本，可提供后台服务，通过定义 PWA 使用的资源以及访问这些资源的策略来丰富您的 PWA。

什么是 Service Worker？

从本质上讲，Service Worker 只是浏览器在您与 Web 应用互动时独立运行的脚本。活跃的 Service Worker 提供服务，例如使用 Cache API 进行智能缓存、使用 Background Sync API 保持数据最新，以及与推送通知集成。具有适当缓存策略的 Service Worker 能够针对各种场景提供稳定可靠的用户体验，能够即时返回预缓存的资源，将数据存储在缓存中，并在连接到网络时更新资源。

从头开始编写 Service Worker 可能并非易事。Workbox 的创建就是为了简化此过程。Workbox 是一组库，可帮助您编写和管理 Service Worker，并使用 Cache Storage API 进行缓存。将服务工件和 Cache Storage API 搭配使用时，可以控制如何从网络或缓存请求资源（HTML、CSS、JS、图片等），甚至允许您在离线时返回缓存的内容。借助 Workbox，您可以使用可投入生产的代码快速设置和管理这两者以及更多内容。

将 AEM 网站升级为 PWA

Adobe Experience Manager (AEM) 是一款全面的内容管理解决方案，可用于构建网站、移动应用、表单和数字标牌。这样，您就可以轻松管理营销内容和素材资源。

尽管 AEM 提供了丰富的用于构建 Web 应用的库，但到目前为止，通过添加 Service Worker 和清单来构建 PWA 仍然非常困难。

Adobe Experience Manager Sites 是 Adobe Experience Manager 中的界面构建工具。将 AEM Sites 与 Adobe Experience Manager 作为云服务搭配使用时，您只需进行配置，无需编码，即可轻松将任何现有的 AEM 网站或单页应用转换为可安装且支持离线使用的渐进式 Web 应用。它使用 Workbox 提供适用于渐进式 Web 应用的最佳实践，并抽象出编写样板清单和服务工作线程的复杂性。

AEM 支持内容本地化，这意味着您可以为不同的语言区域提供不同的品牌信息，甚至不同的离线内容。为此，请为每个语言母版构建不同的 PWA 配置。

在 AEM 上配置 PWA 入门

以云服务的身份登录 Adobe Experience Manager，选择任意 Adobe Experience Manager 网站页面或语言主页面，然后点击“媒体资源”。您应该会看到一个名为“Progressive Web App”的标签页。（注意：如果您没有看到此标签页，请与 Adobe 联系，以启用此功能。）只需点击几下，即可配置渐进式 Web 应用的安装以及外观和风格。

如果您已完成 AEM Sites 教程，可能之前就见过 WKND 网站。本文以 WKND 演示为基础。完成后，您将使用 WorkBox 将 WKND 从 Web 应用更新为 PWA。

配置清单

网站应用清单是一个 JSON 文件，其中包含用于描述 PWA 外观和行为的属性。Adobe Experience Manager Sites 提供了一个易于使用的界面来配置媒体资源。

起始网址是 PWA 的入口点。当用户在手机上点按 PWA 图标时，便会访问启动网址。显示模式用于配置应用是窗口化体验还是全屏体验。您还可以指定应用的屏幕方向。主题颜色是窗口和工具栏的颜色，背景色是应用启动时启动画面的颜色。图标是指应用安装在设备上时显示在设备主屏幕或应用抽屉中的图片。图片中显示的配置会生成下方所示的清单 JSON。

{
  "name": "WKND Adventures and Travel",
  "short_name": "WKND Adventures and Travel",
  "start_url": "/content/wknd/us/en.html",
  "display": "standalone",
  "theme_color": "#FFDC00",
  "background_color": "#FF851B",
  "orientation": "any",
  "icons": [
    {
      "src": "/content/dam/wknd/pwa-logo.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ]
}

起始网址可以不同于您网域的默认着陆页。通过更改 start_url 参数，您可以将用户直接转到应用体验，而不是未经身份验证的用户或新用户会看到的默认页面。这为 PWA 用户提供更流畅、更接近应用的体验。

AEM 了解不同语言区域可能具有不同的外观和风格。您可以针对不同的语言区域或语言配置不同的属性、颜色和图标，然后将配置与链接的页面同步。

在浏览器中访问 PWA 后，您可以右键点击并检查以调出 DevTools，然后在“应用”面板下查看清单。

配置服务工件

您可以配置要缓存的内容以及要使用的缓存策略。

如果您一直在使用 Service Worker，可能对缓存策略很熟悉。缓存策略用于指定要缓存哪些资源，以及是先在缓存中查找这些资源，还是先在网络中查找这些资源，或者先在缓存中查找，然后在网络中回退。然后，您可以在安装服务工件时选择要预缓存的资源。AEM 应用服务工作器会实现温存储策略，这意味着即使您指定的路径缺失或损坏，用户的体验也不会中断。