如何设计令人惊叹的进步Web应用程序_极简慕枫

当你想要引领进步的生活时会想到什么？这是一个旨在比以前更好的生活。渐进式Web应用程序（PWA）以相同的方式工作。它们是Web应用程序，旨在提供远远优于传统Web应用程序提供的体验的用户体验。

为了进一步说明这一点，以下是Google在2015年首次推出渐进式网络应用时定义的方式：

一个渐进的Web应用程序，使用现代Web功能来提供类似用户体验的应用程序。北京网站制作

现在推文

通过“app like”Google意味着本机移动应用程序（您可以从Google Play商店或Apple的App Store下载）。考虑到这一点，将PWA视为在Web浏览器中运行的应用程序，但外观和性能与智能手机上安装的本机应用程序非常相似。

PWA在今年的网络发展趋势中积聚了很多动力。对于网页设计而言，最终开始模糊网络和原生移动应用之间界限的软件开发方法有可能变得非常受欢迎。

渐进式Web应用程序

PWA使开发人员能够克服与Web应用程序开发相关的最常见挑战。例如（对于开发人员），创建应用程序非常有意义，这些应用程序不需要用户在应用程序商店中寻找它，下载它，然后在它们可以使用之前安装它。

除了接入点的URL之外，PWA消除了这些步骤。其次，它可以避免开发人员为多个平台创建相同应用程序的不同版本，从而降低成本和开发时间。如果您要为iOS和Android本地开发应用程序，则需要对其进行两次编码（在Objective-C或Swift for iOS和Java for Android中）。但是，使用PWA，您只需设计和开发它以支持现代Web浏览器，使其响应，并且您可以覆盖所有平台。

在我们分享有关设计渐进式Web应用程序的一些技巧之前，让我们先看看它们与传统的Web和本机移动应用程序的区别。这将有助于我们更好地理解为什么他们最近一直在创造这样的嗡嗡声。

需要构建一个Web应用程序？

通过跨平台兼容性，Web应用程序仍然是产品的终极媒介。告诉我们您的项目是否有免费咨询。

联系我们

PWA与Web Apps

人们普遍认为体验网站没有本机网络应用程序那么丰富。当然，网站可以一次显示大量信息; 但是，当在内置交互性的较小屏幕上仅显示最相关的内容时，通常首选Web应用程序。这就是为什么Web应用程序开发起飞的原因。

然而，虽然Web应用程序针对移动使用进行了优化，但它们似乎仍然无法完全动摇“webby”体验。例如，他们不能：

• 充分利用手机的大部分硬件（如陀螺仪）

• 没有互联网连接的工作

然而，随着渐进的Web应用程序，设计人员和开发人员终于找到了弥合这一差距的方法，因为

• 它们可以在没有互联网连接的情况下使用，其中包括： PWA利用应用程序shell架构（所需的最小HTML，CSS和JavaScript）和服务工作者（独立于您的应用程序工作的可编程代理）来允许脱机使用。

• 服务工作者分别缓存应用程序及其shell的内容。这意味着最后加载的UI在脱机模式下仍然可用，因为它是从设备的本地缓存加载的。北京网站制作

• 您可以使用它们发送Web推送通知： PWA在推送API和服务工作者的帮助下，可以从服务器接收通知，这是移动网络上缺少的功能。

PWA与原生移动应用程序

渐进式Web应用程序旨在提供类似体验的本机移动应用程序。例如，它们都可以接收推送通知并脱机运行。

另一方面，本机移动应用程序不提供一些功能，但PWA可以提供，例如：

• 安装：可以通过URL在任何Web浏览器上访问PWA。您可以将其保存为手机主屏幕上的快捷方式。但是，要下载本机应用程序，您需要访问App Store，搜索应用程序并下载它才能使用它。

• 可发现性： Google将PWA识别为应用程序（因为它们可以通过URL访问），这使得它们像Web应用程序一样可被发现，这是本机应用程序无法共享的好处。您可以应用SEO策略来帮助您的PWA从网络上的其他应用程序脱颖而出，而不是主要取决于本机移动应用程序开发人员依赖的应用程序下载和良好评论的数量，以获得可见性。

• 更新：渐进式Web应用程序始终提供最新版本。您无需做任何事情来确保您是最新的。经验总是新鲜的。但是，对于本机应用程序，您必须从App Store下载应用程序更新。

这些好处并不意味着PWA可以完全取代原生体验。例如，渐进式网络应用程序无法使用您的设备的电话功能，如SMS或您的联系人列表。如果设计师希望充分利用这一趋势，他们必须专注于合理的努力。

让我们来看看在设计下一个渐进式Web应用程序时需要注意的事项。北京网站制作

设计下一个渐进式Web应用程序

此时，我们知道渐进式Web应用程序模仿了Web和本机应用程序的质量。为了充分利用这种统一的体验，设计师应该识别出两全其美的功能，并相应地集中精力。

注意图标

移动应用设计师特别关注图标设计。而且，由于您的PWA-将其添加到主屏幕 - 将位于其他本机应用程序旁边，因此也应该考虑其图标设计。

这是有充分理由的。用户可能会毫不犹豫地点击手机上的原生应用图标中具有不同外观的图标。第一印象总是非常重要，应用程序的图标是它对用户的第一印象。

要使您的PWA图标与设备中的其他应用程序融为一体，它必须灵活，以适应不同的平台 - 例如Android，iOS和Windows-并适应风格元素（其形状，具有/不具有背景的外观）或以不同的颜色等）。

这样做的一个好方法是使您的PWA图标的设计与原生应用程序图标的视觉标准相匹配或至少接近。一个灵感来源是Google的Material Design指南Google的Material Icons。

采用脱机第一种方法

在最近的一篇文章中，我们讨论了“好的设计”是如何预测用户需求的。设计师和开发人员在这方面做得非常出色。以手机中的应用程序为例。

在某个时间点，开发人员已经预料到，即使连接不可用，人们仍希望Web应用程序仍可在其智能手机上运行。这就是原生移动和渐进式网络应用程序的存在。

离线只是生活中的一个事实。如果您是移动设备，则可能会在某个时候离线。

现在推文

考虑一下，在离线模式下访问某些功能有其好处。以Facebook应用程序为例，即使没有互联网连接，您也可以在其中查看新闻源。显然，这不会与最新的更新，但仍然。您始终可以选择参考之前看过的帖子。

渐进式网络应用程序尚未发展到目前为止，至少目前还没有。与传统的Web应用程序一样，它们无法利用平台的硬件。但是设计人员仍然可以使用他们的离线功能，比如实现服务工作者来缓存某些内容，这对他们有利。

首先，专注于为用户体验增加价值，然后决定您的渐进式Web应用程序可以在脱机模式下提供哪些信息来实现此目的。

以柏林航空公司的渐进式网络应用程序为例，它在初次网上办理登机手续后会缓存旅行者登机牌。这项功能允许航空公司的乘客离线访问他们的登机牌，如果他们需要在机场再次显示或审查它们，他们可能不会有Wi-Fi或蜂窝数据访问。

北京网站制作