渐进式web应用程序_渐进式Web应用程序：简介

如果您从事网站建设业务，那么您可能会越来越多地听到人们谈论渐进式Web应用程序 （PWA）。 由Google开发的PWA在吸引用户方面具有网络的所有优势，以及用户可以从本地应用程序获得的速度和可靠性。

为什么选择渐进式Web应用程序？

关键卖点是：

性能

PWA加载速度很快，并且可以快速响应用户交互，而无需任何复杂的动画。

可靠性

PWA始终能够为用户提供体验，即使是脱机或在不确定的网络条件下也是如此。

更好的用户体验

PWA应该像本地应用程序一样在设备上感觉自然。 他们甚至可以提供推送通知，在用户的主屏幕上添加图标，以及删除浏览器镶边，所有这些都提供了更原生的体验。

Google在这项技术上投入了巨资，提供了大量资源，包括免费的开发人员培训，Lighthouse（用于测试PWA的基于浏览器的工具）以及大量文档（包括PWA清单）。

先离线

应用程序越来越需要在不稳定的网络条件下执行。 当浏览器处于脱机状态时，服务人员可以让您提供自定义的脱机页面或缓存中的资产，以确保用户仍然获得基本（如果受限制）的体验。 例如，《华盛顿邮报》会缓存热门新闻，使用户可以在离线时访问它们。

您是否需要PWA？

您可能需要坐下来考虑是否绝对需要将站点设为PWA。 问自己以下问题：

• 内容是否定期更新？
• 用户是否可能想离线浏览？
• 他们是否需要实时更新和推送通知？
• 他们是否可能使用支持服务人员的浏览器？ （我们稍后会再谈。）
• 如果对所有（或大多数）答案是“是”，则PWA可能值得。 （作为第4点的补充说明，不支持浏览器的用户不会因为服务人员的存在而受到阻碍（浏览器只会忽略它）–但是在您花费大量时间和精力之前，值得考虑一下PWA上的能量。）

不过，值得一提的是，PWA并不是解决性能问题的快速解决方案。 您可能需要确保已经采取了所有其他步骤来优化您的网站-也就是说，移动优先响应设计，HTML5标准，响应和延迟加载的图像，压缩和最小化资产以及内联关键CSS。 满足所有条件后，将您的站点设置为PWA具有很多好处。

您如何建立PWA？

那么您如何建立PWA？ 好吧，这并不是那么简单。 我不会在本文中讨论技术细节，但是我将在最后列出一些资源，因此如果您渴望构建，请跳到那里！

PWA依赖于Javascript Promise和Fetch API ，因此您可能希望掌握这些内容。 PWA的另一项关键技术是服务人员。

服务人员

服务工作者是一种Web工作者，当应用程序加载时在客户端安装，并在后台运行，与主浏览器线程分开。 服务工作者的主要用途是处理网络请求和存储内容以供脱机使用，以及处理推送通知。 它们非常强大，因此只能与HTTPS协议一起使用。

与服务工作者一起聪明地使用缓存可以使您的站点在用户重复访问时超快速地加载。

Web应用清单

PWA可以（给用户）提供一种使用本机应用程序的体验，包括向主屏幕添加图标（而不是用户必须通过其浏览器导航到该站点）。 Web应用程序清单是一个JSON文件，它告诉浏览器如何显示PWA。 您可以在此处定义图标，以供用户将您的应用添加到主屏幕。 目前，大多数移动浏览器（iOS，Android上的Chrome）以及MS Edge均支持此功能，但其他桌面浏览器尚不支持此功能。

资源资源

如果您准备开始构建PWA，则以下是一些有用的资源：

• 您的第一个渐进式Web应用程序
  Google的PWA分步指南
• Addy Osmani的渐进式Web应用程序入门
• 渐进式Web应用程序清单
• Jeremy Keith 脱机 （本书）
  业界领先人士广泛推荐该指南作为使您的网站离线的综合指南。

即将推出：我将与静态站点生成器Gatsby分享构建PWA的经验！

翻译自: https://css-irl.info/progressive-web-apps/