作为本地应用程序的轻量级版本，progressive web apps（PWAs）提供了可靠的、可立即安装的传统应用程序版本。这篇文章解释了PWAs的内部工作原理，描述了开发PWAs的最佳实践，并为您提供了Cloudinary作为app的一部分优化富媒体的卓越功能内容。这里主题是：什么是渐进式网络应用？渐进式Web应用程序的架构风格是什么？渐进式网络应用的检查表有哪些项目？进步的Web应用程序必须满足什么样的期望？举几个流行的渐进式网络应用程序的例子怎么样？开发渐进式Web应用程序的最佳实践是什么？你如何使用Cloudinary优化渐进式Web应用程序中的可视内容？什么是渐进式网络应用？渐进式web应用程序（PWAs）是模仿本地应用程序体验的web应用程序，必须-功能：pwa通常包括键盘快捷键、文件系统访问、应用程序标记、媒体控件和剪贴板支持等功能，这些功能都是通过现代webapi和WebAssembly创建的。可靠：无论网络连接的质量如何，pwa仍然可用。最近的内容总是可用的，如果访问请求失败，PWAs会警告用户并告诉他们原因。另外，PWAs支持脱机访问。可安装：PWAs在独立窗口中运行，而不是浏览器选项卡，因此可以像本地应用程序一样启动。您可以将PWAs指定为默认值，就像对本机应用程序所做的那样。重要的2020年3月，苹果宣布其Safari浏览器引擎WebKit将在7天后删除本地存储的cookies。因此，除非您在七天内访问PWA的站点，否则该应用程序将不会在您的Apple设备上运行。尽管这一变化并没有给PWAs敲响丧钟，但您必须调整将来如何开发PWAs。此外，由于谷歌与苹果合作制定了这一政策，其他设备可能很快也会采用这一政策。渐进式Web应用程序的架构风格是什么？在创建PWA时，可以从两种体系结构样式中进行选择，即服务器端渲染（SSR）和客户端渲染（CSR），以定义加载页面的方式以及PWA所需的用户客户端和服务器之间的通信量工作.sswhen用户客户端请求您的web应用程序，SSR在然后交付预呈现的页面。以下是SSR的优点：为用户提供快速初始渲染成熟的体系结构和完善的工具支持所有浏览器，无论JavaScript特性如何然而，存在两个缺点：必须为每个用户导航生成新的文档对象模型（DOM）。由于对web服务器的往返请求，重新呈现很慢。CSR具有CSR架构的同一个用户请求返回一个默认页面，其中动态内容在交付后通过JavaScript操作DOM呈现。以下是企业社会责任的好处：CSR将页面更新卸载到客户端资源。考虑到不需要将请求发送到服务器，重新呈现会更快。CSR不必重新呈现整个页面，而是可以根据需要仅重新呈现部分页面。注意缺点：CSR依赖于用户客户端来支持JavaScript方法。客户端资源可能会减慢渲染速度。渐进式网络应用的检查表有哪些项目？一般来说，对于那些用户主要浏览和查看静态内容（如新闻或日程安排应用程序）的pwa，选择SSR。CSR对于内容根据用户行为或实时内容而变化的动态网站（如社交媒体或购物应用程序）更可取。然而，在实践中，许多应用程序将这两种风格结合起来，以优化性能和用户体验。因为所有的web应用都需要用户对页面的初始请求，所以采用SSR来确保第一次呈现在交付之前完成是有意义的。结果是将应用程序的所有组件缓存到shell中，供用户访问。然后，当服务器发送新数据时，可以使用CSR通过缓存的元素动态呈现各个元素。进步的Web应用程序必须满足什么样的期望？您可以使用提供本机特性的api来构建pwa。pwa的目的是通过可安装的方式在单个代码库的任何地方工作。要安装，PWAs必须满足Google编写的渐进式Web应用检查清单中记录的期望，该清单包含以下项目：性能：PWAs必须快速启动、快速运行，并优先考虑以用户为中心的指标。浏览器兼容性：PWAs必须能在所有浏览器中工作，这取决于所使用的设备。您可以利用功能检测功能来确保浏览器的兼容性，通过该功能，您可以在发布浏览器功能时对其进行说明。响应能力：PWAs必须是响应迅速的web应用程序，并且在任何大小的屏幕上都具有同等的功能。确保您的内容适应屏幕和视口大小的变化。脱机功能：PWAs必须在脱机时尽可能多地保留功能。例如，即使没有网络连接，登机牌、日历事件等的用户特定内容也必须可用。变量输入：用户必须能够从任何输入设备访问PWAs。无论是键盘、鼠标设备、键盘还是触摸屏，PWAs都必须提供类似的功能。不要根据屏幕大小或设备限制输入选项。然而，PWAs可能会为某些输入方法提供增强的功能。举几个流行的渐进式网络应用程序的例子怎么样？尽管用户并不熟悉，但许多公司已经在为他们的网站运行PWAs。下面是一些流行的ones.AliExpressPrevious上一页著名的电子零售商AliExpress将移动用户转化为app用户的努力并没有如预期的那样奏效，部分原因可能是网站与移动网站之间的适应性较差。为了纠正这一问题，AliExpress将其移动网站改为PWA。不久之后，用户参与度显著提高，包括用户转化率提高了104%，会话量增加了74%长度.twitter大多数人都熟悉标准的Twitter应用程序，并不是每个人都知道该公司还创建了Twitter精简版。这是一个可安装的PWA，旨在改善移动用户的体验，其中许多用户依赖于薄弱或不稳定的网络连接。twitterlite通过优化的图像和缓存的数据提供了一种移动体验，用于以较低的数据需求进行即时页面加载。此外，用户可以接收推送通知并将PWA添加到设备的主屏幕，就像完整的应用程序一样。到目前为止，twitterlite已经取得了令人印象深刻的进步，包括每次会话访问的页面数量增加了65%，发送的页面数量激增了75%tweets.ForbesA《福布斯》是一家顶级商业杂志，它发布了许多营销、金融和投资主题的内容，提供印刷版、网站版和手机版。最近，这家出版公司增加了一个PWA选项，旨在增强移动用户的体验。一旦发布，PWA就获得了广泛的采用，在每个用户的会话数（43%）、阅读到完成的文章数（6次）和参与率（100%）方面都有显著的提高。开发渐进式Web应用程序的最佳实践是什么？为了确保您的PWA得到广泛认可，并避免包含不必要或不需要的特性，请在开发过程中采用以下最佳实践。保管好东西简单.PWAs不打算取代独立的应用程序，所以不要设计它们这样做。相反，您的目标是通过选择一些功能（如推送通知、小部件和离线可用性）来压缩和增强移动体验。专注于构建这些核心功能，不要在应用程序多-平台发展。与PWAs你可以建立一个网站，作为一个iOS和Android应用程序。这节省了构建iOS和Android独立体验的成本和复杂性，同时为用户提供了最好的功能，而不管他们是如何访问的内容。优先顺序内容。因为用户希望PWAs能够简化、平滑和简化他们的体验，确保高优先级的内容可以轻松、方便地获得。不要用复杂的菜单或分散注意力的广告和横幅来过度拥挤内容，以免用户不得不在精神上过滤内容。相反，要做一些重要的事情，比如号召大家行动，很明显。沟通与用户。很多用户在与技术互动时已经开始期待即时的满足和反馈。如果他们必须等待某个应用程序中发生了什么，他们想知道为什么以及需要多长时间。为了防止由于缺乏响应而产生的挫败感，请清楚地告知你的应用程序当时在做什么，比如通过确认输入或显示渲染的进度轮。避免不必要的互动。因为许多PWA在屏幕空间有限的移动设备上访问，整洁的设计至关重要。如果在有限的空间中存在太多的交互项，用户可能会意外地执行意外的操作行动。到避免这种情况，改变交互的注册方式，比如需要长按打开一个项目，或者用两个手指滚动列表。此外，清楚地识别交互特性和静态特性。为用户优化设备。而在设计PWA时，请记住它的用途。通常，移动设备的布局和导航因桌面应用而异。因此，请注意用户与设备交互的方式，并找出构建以适应这些交互的功能。例如，如果用户旋转他们的设备，你的应用程序功能将如何变化。或者，鼠标移动与触摸所产生的效果屏幕。聚焦打开可读性。很好精心设计的字体可能很吸引人，在大屏幕上看起来可能很吸引人，但在移动设备上通常不太好翻译。此外，某些设备上可能无法使用自定义字体。为了获得一致和舒适的用户体验，请坚持简单、默认
