如果您是技术主管或数字营销分析师，希望为您的 Adobe Experience Manager (AEM) Web 应用提供现代 Web 体验，并且一直在寻找这方面的方案，那么您来对文章了。本课程将介绍什么是渐进式 Web 应用 (PWA)，以及您需要通过配置在 AEM 中利用 WorkBox 库创建 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 作为云服务与 Adobe Experience Manager 搭配使用时，AEM 协作平台可让您轻松地将任何现有的 AEM 网站或单页应用转换为可安装且支持离线操作的渐进式 Web 应用，并且只需进行配置，无需编写任何代码。它使用 Workbox 为渐进式 Web 应用提供最佳实践，并简化了编写样板清单和 Service Worker 的复杂性。
AEM 支持内容本地化，这意味着您可以针对不同的语言区域采用不同的品牌推广甚至离线内容。为此，请为每个语言母版构建不同的 PWA 配置。
开始在 AEM 上配置 PWA
以云服务的形式登录 Adobe Experience Manager，然后选择任意 Adobe Experience Manager 网站页面或语言母版并点击属性。您应该会看到一个名为“Progressive Web App”的标签页。（注意：如果您没有看到该标签，请与 Adobe 联系以启用此功能。）只需点击几下，您就可以配置 Progressive Web App 的安装方式以及外观和风格。
如果您已完成 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 中，术语“clientlibs”是指客户端库：已添加到项目中、由客户端网络浏览器提供和使用的相关 JavaScript、CSS 和静态资源的组合。您只需在界面中指定相应的客户端库，即可轻松将客户端库设为可离线使用。
您还可以添加第三方资源，例如字体。该离线缓存配置向一个 Service Worker 提供配置信息，这个 Service Worker 是为您在内部使用 Workbox 的应用生成的。以上就是将应用设置为可安装的大致内容。安装后，应用图标将像平台应用一样显示在移动设备的主屏幕上。点击该图标即可访问该网站。
请注意，你可以随时更改内容或设置。当您发布更改时，浏览器会在客户端更新 Service Worker，并向用户显示一条消息，告知用户 PWA 有较新版本可用。用户可以点击该消息来重新加载应用并获取最新更新。您可以打开浏览器开发者工具和应用面板，查看 Service Worker 的详细信息。
您可以展开缓存存储空间以查看已在本地缓存的内容：
成果
现在看看您的努力成果。只需配置，无需编写代码，您刚刚增强了 AEM 网站，成为一个渐进式 Web 应用。
Chrome 开发者工具提供“灯塔”审核功能，可让您检查您的 Web 应用和配置是否符合渐进式 Web 应用标准。
总结
渐进式 Web 应用可为您的网站提供类似应用的体验，它利用了网络的跨平台和开放性，能够以较低的开发和维护成本，同时实现对分发的控制。这有助于提高互动度和留存率，最重要的是，还能提高转化率。将 AEM 与 Workbox 结合使用，只需配置即可轻松将现有网站增强为 PWA，而无需编写任何代码。