通过简单配置,内容作者现在可以为在 AEM Sites 中创建的体验启用渐进式 Web 应用程序 (PWA) 功能。
这是一项高级功能,需要您:
在使用此功能之前,建议您与开发团队进行讨论以确定将它用于项目的最佳方式。
利用渐进式 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。这些是几项值得注意的限制。
在您实施 PWA 时,Adobe 还提出了以下建议。
Adobe 建议您限制要预缓存的页数。
客户端库在交付时添加了一个缓存选择器,并遵循以下模式 lc-<checksumHash>-lc
。当构成库的某个文件(和依赖项)发生更改时,此选择器也会发生更改。如果您列出了要由 service-worker 预缓存的客户端库,并且想引用新版本,您可以手动检索并更新该条目。因此,我们建议您在使项目脚本和样式表稳定后将站点配置为 PWA。
AEM 核心组件的图像组件决定了要获取的前端的最佳演绎版。此机制还包括与该资源的最后修改时间对应的时间戳。此机制使 PWA 预缓存的配置难以理解。
在配置预缓存时,用户需要列出所有可获取的路径变体。这些变体由质量和宽度等参数组成。强烈建议将这些变体的数量减少到最多三个:小、中、大。 您可以通过图像组件的内存策略对话框来执行此操作。
如果不仔细配置,内存和网络消耗会严重影响 PWA 的性能。此外,如果您打算预缓存 50 个图像,并且每个图像具有 3 个宽度,则维护站点的用户将必须在页面属性的 PWA 预缓存部分中维护最多 150 个条目的列表。
Adobe 还建议您在使用图像的项目稳定后将站点配置为 PWA。