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