如果您是技术负责人或数字营销分析师，并且有兴趣为您的 Adobe Experience Manager (AEM) Web 应用提供现代 Web 体验，并且一直在寻找实现该方案的方案，那么您就来对本文了。我们将介绍什么是渐进式 Web 应用 (PWA)，以及您需要通过配置来利用 WorkBox 库在 AEM 中创建 PWA 所需的内容（无需编码）。
为什么要使用 PWA？
渐进式 Web 应用利用了现代 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 是一组库，可帮助您使用 Cache Storage API 编写和管理 Service Worker 和缓存。Service Worker 和 Cache Storage API 结合使用时，可控制从网络或缓存请求资源（HTML、CSS、JS、图片等）的方式，甚至可以让您在离线时返回缓存的内容。借助 Workbox，您可以使用可直接用于生产环境的代码快速设置和管理这两项服务。
将 AEM 网站升级为 PWA
Adobe Experience Manager (AEM) 是一款全面的内容管理解决方案，用于构建网站、移动应用、表单和数字标牌。它可让您轻松管理自己的营销内容和素材资源。
虽然 AEM 为构建 Web 应用提供了丰富的库，但迄今为止仍难以通过添加 Service Worker 和清单来构建 PWA。
Adobe Experience Manager 协作平台是 Adobe Experience Manager 中的界面构建工具。将 Adobe Experience Manager 作为云服务结合使用时，AEM 协作平台可让您轻松地将任何现有的 AEM 网站或单页应用转换为可安装、支持离线访问的渐进式 Web 应用，并且只需进行配置和编码即可。它使用 Workbox 提供渐进式 Web 应用最佳实践，并降低编写样板清单和 Service Worker 的复杂性。
AEM 支持内容本地化，这意味着您可以为不同的语言区域设置不同的品牌，甚至有不同的离线内容。为此，请为各个语言母版构建不同的 PWA 配置。
AEM 中的 PWA 配置使用入门
以云服务的形式登录 Adobe Experience Manager，然后选择任意 Adobe Experience Manager 协作平台页面或语言母版，然后点击“属性”。您应该会看到一个名为“Progressive Web App”的标签页。（注意：如果您没有看到此标签页，请与 Adobe 联系以启用此功能。）只需点击几下，即可配置渐进式 Web 应用的安装方式以及外观和风格。
如果您学完了 AEM 协作平台教程，那么之前可能看到过 WKND 网站。本文以 WKND 演示为基础。完成后，您将使用 WorkBox 将 WKND 从 Web 应用更新为 PWA。
配置清单
Web 应用清单是一个 JSON 文件，其中包含描述 PWA 外观和行为的属性。Adobe Experience Manager 协作平台提供了易用的界面来配置属性。
起始网址是 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 后，您可以右键点击并检查应用，以调出开发者工具并查看“Applications”面板下的清单。
配置 Service Worker
您可以配置要缓存的内容和要使用的缓存策略。
如果您一直在使用 Service Worker，则可能熟悉缓存策略。缓存策略指定要缓存哪些资源，以及是先在缓存中查找、先在网络中查找，还是在具有网络回退的缓存中查找。然后，您可以选择在安装 Service Worker 时预缓存的资源。AEM 应用 Service Worker 实现了温缓存策略，这意味着即使您指定了路径缺失或损坏，用户体验也不会中断。
在 AEM 中，术语“客户端库”是指客户端库：相关 JavaScript、CSS 和已添加到您项目中的静态资源的组合，这些资源由客户端网络浏览器提供并加以使用。通过在界面中指定客户端库，您可以轻松地设置要离线使用的客户端库。
您还可以添加第三方资源，例如字体。此离线缓存配置会向为在内部使用 Workbox 的应用生成的 Service Worker 提供配置信息。以上就是确保应用可安装的所有步骤。安装后，该应用的图标会像平台应用一样显示在移动设备主屏幕上。点击该图标即可访问网站。
请注意，你可以随时更改你的内容或这些设置。当您发布更改时，浏览器会在客户端更新 Service Worker，并向用户显示一条消息，让用户知道有新版本的 PWA 可用。用户可以点击此消息以重新加载应用并获取最新更新。您可以打开浏览器开发者工具和应用面板以查看 Service Worker 的详细信息。
您可以展开缓存存储空间，查看已在本地缓存的内容：
成果
该看看你的努力工作所取得的成效了。仅通过配置和编码，您强化了 AEM 网站，使其成为渐进式 Web 应用。
Chrome 开发者工具提供灯塔审核功能，可让您检查您的 Web 应用和配置是否符合渐进式 Web 应用标准。
总结
渐进式 Web 应用可为您的网站提供类似于应用的体验，它利用网络的跨平台和开放性，以较低的开发和维护成本，同时提供对分发的控制权。这提高了互动度和留存率，最重要的是，还能提高转化率。将 AEM 与 Workbox 搭配使用，只需进行配置和编码，即可轻松将现有网站增强为 PWA。