通过简单配置,内容作者现在可以为在 AEM Sites 中创建的体验启用渐进式 Web 应用程序 (PWA) 功能。
这是一项高级功能,需要您:
在使用此功能之前,Adobe 建议您与开发团队讨论它以确定将它用于项目的最佳方式。
利用渐进式 Web 应用程序 (PWA),可以将 AEM 站点本地存储在用户计算机上并使其可供脱机访问,从而实施针对 AEM 站点的像应用程序一样的沉浸式体验。即使失去 Internet 连接,用户也可以在旅途中浏览站点。即使网络中断或不稳定,PWA 也能提供无缝体验。
内容作者无需为站点重新编码,而是可将 PWA 属性配置为站点的页面属性中一个额外的选项卡。
利用 PWA,用户可以获得站点的本地副本,并提供像应用程序一样的体验,即使没有 Internet 连接也是如此。
渐进式 Web 应用程序是一项不断发展的技术,并且支持本地应用程序安装和其他功能,具体取决于您使用的浏览器。
要为您的站点启用 PWA 功能,您的项目环境需达到两个要求:
这些是作者必须与开发团队协调的技术步骤。每个站点只需执行一次这些步骤。
核心组件版本 2.15.0 及更高版本完全支持 AEM Sites 的 PWA 功能。由于 AEMaaCS 始终包含最新版本的核心组件,因此您可以利用现成的 PWA 功能。您的 AEMaaCS 项目将自动满足此要求。
Adobe 建议不要在自定义组件或未从核心组件扩展的组件上使用 PWA 功能。
PWA 功能会生成和使用 /content/<sitename>/manifest.webmanifest
文件。默认情况下,Dispatcher 不公开此类文件。要公开这些文件,开发人员必须将以下配置添加到您的站点项目。
File location: [project directory]/dispatcher/src/conf.dispatcher.d/filters/filters.any >
# Allow webmanifest files
/0102 { /type "allow" /extension "webmanifest" /path "/content/*/manifest" }
根据您的项目,您可能需要加入对重写规则的各种类型的扩展。当您引入隐藏请求并将请求重定向到 /content/<projectName>
的规则时,将 webmanifest
扩展包含在重写条件中会很有用。
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg|.webmanifest)$
满足前提条件后,内容作者可以轻松地为站点启用 PWA 功能。以下是有关如何执行此操作的基本概览。详细选项部分中详述了各个选项。
登录 AEM。
从主菜单中,选择 导航 > 站点.
选择您的站点项目并选择 属性 或使用热键 p
.
选择渐进式 Web 应用程序选项卡,并配置适用的属性。至少您需要:
选择启用 PWA 选项。
定义启动 URL。
将 512x512 png 图标上传到 DAM 并将它引用为应用程序的图标。
配置要让 Service Worker 在离线时采用的路径。典型路径为:
/content/<sitename>
/content/experiencefragements/<sitename>
/content/dam/<sitename>
/etc/clientlibs/<sitename>
选择 保存并关闭.
您的站点现已配置,您可以将它作为本地应用程序安装。
现在,您已配置站点以支持 PWA,您可以自行体验它。
以下部分提供了有关在为 PWA 配置站点时可用的选项的更多详细信息。
以下这些设置通过让您的站点可安装在访客的主屏幕上并离线使用,使其可表现得如同原生应用程序一样。
这些设置使该站点的某些部分可以离线使用,并且可以在访客的设备上本地使用。这将允许控制 Web 应用程序的缓存,优化网络请求并支持离线体验。
您的开发人员团队很可能对如何设置离线配置提出宝贵意见。
并非所有 PWA 功能都可用于 AEM Sites。这些是几项值得注意的限制。
Adobe 还建议在您实施 PWA 时做到以下几点。
Adobe 建议您限制要预缓存的页数。
在提供客户端库时添加了一个遵循以下模式的缓存选择器:lc-<checksumHash>-lc
。每次在构成库的文件(和依赖项)之一发生变化时,此选择器即发生变化。如果列出了 service-worker 要预缓存的客户端库并要引用新版本,则可手动检索并更新该条目。因此,Adobe 建议您在项目脚本和样式表稳定后再将您的站点配置为 PWA。
AEM 核心组件的图像组件决定了要获取的前端的最佳演绎版。此机制还包括与该资源的最后修改时间对应的时间戳。此机制使 PWA 预缓存的配置难以理解。
在配置预缓存时,用户必须列出所有可获取的路径变体。这些变体由质量和宽度等参数组成。建议您将这些变体的数量减少到最多三个:小、中、大。可通过图像组件的内容策略对话框做到这一点。
如果不仔细配置,则消耗大量内存和网络资源可能会严重影响 PWA 的性能。此外,如果您打算预缓存比如 50 个图像,并且每个图像有三个宽度,则维护站点的用户不得不在页面属性的 PWA 预缓存部分中维护多达 150 个条目的列表。
Adobe 还建议您在项目对图像的使用情况稳定后再将站点配置为 PWA。