如果你发现自己难以构建或优化快速网页,那么作为开发人员,可能会有替代解决方案。你可以尝试使用称为加速移动页面(AMP)的开源技术解决方案,AMP提供了几乎即时的移动页面交付(平均0.8秒),使其成为用户首次与你的网站进行交互的理想完美解决方案。另一方面,渐进式Web应用程序(PWA)使你能够提供更多的交互性和参与性功能。

AMP和PWA实际上只是技术或网页集,它们提供了实现不同目标的补充方法。在本文章中,我们将向你展示如何将两者结合起来以创建真正引人注目的超快速移动Web体验。

AMP:加速的移动页面

AMP:加速的移动页面
AMP:加速的移动页面

AMP可以提供快速,流畅的着陆页。该框架本身非常容易编码,大多数开发人员花费不到一周的时间即可完全实现它。AMP可以将内容快速呈现在用户面前,其加载速度比标准移动页面快85%。

只要你的页面保持“ AMP有效”,你就可以确信不会破坏代码或牺牲性能。你可以按照使用AMP HTML,AMP JS和AMP Cache构建的框架来开发有效的AMP页面,然后使用AMP Validator来检查你是否没有错过任何内容。有关如何构建APM的更多信息,请访问Google Developers网站。

PWA:渐进式Web应用程序

PWA:渐进式Web应用程序
PWA:渐进式Web应用程序

PWA将开放式网络的覆盖范围与本机Web应用程序的功能结合在一起。本质上,这是一个网站,其行为几乎类似于本地移动应用程序。它们可以快速加载(尤其是在缓存或重复的移动访问中),可以脱机,安全地访问并且可以从主屏幕进行访问。但是,站点的服务工作者(资产和应用程序外壳程序)只会在站点的后续负载上加速向重复访问者的传递,因此会阻碍他们的首次负载。

当没有网络或网络连接缓慢/间歇时,PWA中的服务人员可以提供可靠的体验。PWA的主要好处是它们可以在适当的时间使用Web技术,并且可以替换类似应用程序的权限,推送通知,付款请求API和更好的表单交互(自动完成,输入类型等)。PWA还可以减少用户的下载请求,这通常会在智能手机上增加负担,使用的外部JavaScript请求减少了50%。

与你将要访问的普通网站相比,PWA一旦安装(带有类似应用程序的图标),便使你的企业触手可及,并提供了更丰富的体验-启用了推送通知的沉浸式体验。通过启用的技术集(https,服务工作者和清单文件)增强了你的网站,甚至使其可以脱机访问。

如何结合AMP和PWA

由于AMP和PWA实际上只是一组技术或网页,它们提供了实现不同目标的补充方法,因此我们真的应该花一点时间来承认它们各自的独特优势。另外,两种技术在单独实施时都有各自的缺点,这也应予以考虑。

AMP提供了快速加载的即用型内容,需要相对较少的工作量,但缺少一些功能。另一方面,PWA提供了更高级的平台功能,可以快速加载以进行重复访问,并且即使在脱机模式下,内容也可靠。但是,在首次加载内容时,PWA不如AMP强大,因为它们的速度并不快。

可以将AMP和PWA结合在一起,以创建引人入胜的超快速移动Web体验。将其视为完美的技术匹配。这是你需要遵循的简单的两步过程:

01.使用AMP建立你的网站

这并不一定意味着整个网站:你可以专注于“入口点”或登录页面。确定你希望在何处看到AMP速度带来的最大增量收益。如果实施正确,则AMP应该会从Google缓存中获得闪电般的快速加载时间。

为了将PWA逻辑与AMP集成,所有这些都从称为amp-install-service worker的AMP组件开始,该组件可以从任何AMP页面安装Service Worker。

它启用了从AMP缓存安装服务工作者的功能,因此在用户访问原始站点时就安装了服务工作者。每当从发布AMP文件的来源提供AMP文件时,用户体验就不会中断,并且服务工作程序会运行。在集成PWA功能之前,最好以这种方式将AMP作为进入站点的“页面”入口点,并在“幕后”预热PWA,然后再将用户切换到平稳的前进路线。

02.通过PWA功能逐步增强

实施AMP和服务工作者后,请使用最能满足你的业务目标的PWA功能逐步增强你的站点。完全集成后,PWA具有许多好处,这可以轻松吸引更多用户,增加参与度并增加转化。最好的团队是愿意适应新消费者期望的团队。AMP和PWA可以很好地结合在一起,并确保你的网站吸引用户的注意力并更具吸引力。