渐进式Web应用程序：弥合Web和移动设备之间的鸿沟

In this article, we’ll go through the basics of what a progressive web app (PWA) is, study some real life cases, and explore other uses and situations in which a PWA can be used to great effect.

在本文中，我们将介绍什么是渐进式Web应用程序(PWA)的基础知识，研究一些现实生活中的案例，并探索可以使PWA发挥巨大作用的其他用途和情况。

Nowadays, significant numbers of people are connected to the internet almost everywhere they go. There are, however, still an even larger number of users with intermittent access, such as users on mobile data plans, shared internet access and so on. Catering to these users requires changes to the information flow we’re used to.

如今，几乎所有地方的人们都可以连接到Internet。 但是，仍然有更多的用户具有间歇访问权限，例如使用移动数据计划，共享Internet访问权限的用户等。 迎合这些用户需要改变我们习惯的信息流。

By allowing users to keep browsing once they’re offline, serving the pages they’ve already visited, it’s possible to retain visitors and customers who would otherwise be in the dark once their internet is cut off.

通过允许用户在脱机后继续浏览并提供他们已经访问过的页面，可以保留访客和客户，否则他们的互联网一旦被切断，他们将处于黑暗之中。

It’s even possible to use the cached data and program functions for that, allowing for interactivity similar to mobile applications, but without the need for the user to download an app via the various app stores, and similarly, without the need for submitting to them as well.

甚至可以为此使用缓存的数据和程序功能，从而实现与移动应用程序类似的交互性，但无需用户通过各种应用程序商店下载应用程序，并且类似地，无需提交给他们。好。

什么是渐进式Web应用程序？ (What is a Progressive Web App?)

When trying to understand what exactly a progressive web app is, it might be easiest to compare relative to both websites and mobile applications. In the table below, some, not all, of the more prominent features are sidelined with PWAs in the middle, symbolizing the gap-bridging functionality of the progressive web apps.

当试图了解什么是渐进式Web应用程序时，相对于网站和移动应用程序进行比较可能是最容易的。 在下表中，一些(不是全部)较突出的功能被中间的PWA隔开了，这标志着渐进式Web应用程序的空白化功能。

Features	Website	Progressive Web App	Mobile App
Offline	NO	YES	YES
App Stores	NO	NO	YES
Responsive	YES	YES	YES
Searchable	YES	YES	NO
Local notifications	NO	YES	YES
Push notifications	NO	YES	YES
Download to install	NO	NO	YES
Fast updates	YES	YES	NO

特征	网站	渐进式Web应用	移动应用
离线	没有	是	是
应用商店	没有	没有	是
React灵敏	是	是	是
可搜寻	是	是	没有
本地通知	没有	是	是
推送通知	没有	是	是
下载安装	没有	没有	是
快速更新	是	是	没有

Keep in mind that the entire term “progressive web app” loosely contains a number of relevant and some irrelevant information and criteria. Technically, there are four requirements (see below) that define what a PWA is, currently supported by Google Chrome, Opera and Samsung Internet.

请记住，整个术语“渐进式Web应用程序”大致都包含许多相关和一些不相关的信息和标准。 从技术上讲，有四个要求(见下文)定义了什么是PWA，目前Google Chrome，Opera和Samsung Internet支持。

Once these four criteria are fulfilled, developers are free to customize the functionality according to their own wishes, so we can see both offline error pages, and full-on offline browsing depending on what project and site we’re visiting.

一旦满足了这四个条件，开发人员便可以根据自己的意愿自由自定义功能，因此，根据我们要访问的项目和站点，我们既可以看到脱机错误页面，也可以看到完整的脱机浏览。

渐进 (Becoming Progressive)

In order for any online site to be recognized as having a progressive web app installed on the server — and thus include the prompt “Add To Home Screen” for users — there are four main requirements as set out by Google:

为了使任何在线站点都被识别为在服务器上安装了渐进式Web应用程序，并因此向用户显示提示“添加到主屏幕” ，Google提出了四个主要要求：

• a site must be visited twice with a 5-minute interval to qualify
  一个网站必须每隔5分钟访问两次，才有资格
• secure HTTPS connection Valid
  安全的HTTPS连接有效
• JSON Manifest installed Valid
  JSON清单已安装有效
• Service Worker installed.
  已安装Service Worker。

必须以5分钟的间隔两次访问该网站才有资格 (Site must be visited twice with a 5-minute interval to qualify)

In Google Chrome, it’s necessary for users to have visited the site hosting the PWA twice before the browser will show the prompt for installing the PWA.

在Google Chrome浏览器中，用户必须先访问托管PWA的站点两次，然后浏览器才会显示安装PWA的提示。

It’s not the most reliable form of verification, but nonetheless, it seems to work fine, as first-time visitors won’t get bombarded with the prompt taking up 25% of a mobile screen, and furthermore, it ensures that users are somewhat interested in that particular site, seeing as how they’ve already visited it before.

它不是最可靠的验证形式，但是它似乎可以正常工作，因为初次访问者不会被提示占据了25％的移动屏幕的轰炸，此外，它还可以确保用户有些兴趣在那个特定的网站上，看看他们以前如何访问过它。

However, this is a simple way of determining user relevance and interest, and one could guess that this qualification parameter will be changed to something more substantial in the future. But for now, it seems Google developers are content with this measurement.

但是，这是一种确定用户相关性和兴趣的简单方法，并且可以猜测此资格参数将来会更改为更重要的内容。 但就目前而言，似乎Google开发人员对这种评估感到满意。

安全的HTTPS连接 (Secure HTTPS connection)

By having a secure connection to the progressive web app, users can feel relatively safe by allowing permissions to the PWA.

通过与渐进式Web应用程序建立安全连接，用户可以通过允许PWA权限来感到相对安全。

Since the network requests are routed through the service worker script, adding https to the server helps to mitigate certain vulnerabilities such as snooping.

由于网络请求是通过服务工作程序脚本路由的，因此将https添加到服务器有助于缓解某些漏洞，例如监听。

While this requirement might be focused mainly on adding safety from hijackers, having a secure connection also helps build trust with users. And since PWAs are indexable by search engines, it also makes sense to serve over TLS, since it adds a small amount of benefit SEO-wise.

尽管此要求可能主要集中在增加劫机者的安全性上，但是建立安全连接也有助于建立与用户的信任。 而且由于PWA可被搜索引擎索引，因此通过TLS提供服务也很有意义，因为它会为SEO 带来少量好处 。

已安装有效的JSON清单 (Valid JSON Manifest installed)

By providing a data extract in the format of JSON, it’s then possible to cache this information with the help of the service worker, and then use the app shell to load CSS rules to deliver an offline version with full UI capabilities.

通过提供JSON格式的数据提取，可以在服务工作者的帮助下缓存此信息，然后使用应用程序外壳加载CSS规则以提供具有完整UI功能的脱机版本。

Any time a visitor loads a new page, the service worker will cache the JSON extract, and store it physically in the app shell. This app shell is a self-contained wrapper that has all necessary style sheets, scripts, images, fonts and HTML outputs required for a user to render a complete page without loading anything else.

每当访客加载新页面时，服务工作人员都会缓存JSON提取，并将其物理存储在应用程序外壳中。 此应用程序外壳是一个独立的包装器，具有用户呈现完整页面而不加载其他任何内容所需的所有必要样式表，脚本，图像，字体和HTML输出。

Compared to a website, a PWA has the capability of still showing data when the users are no longer connected to the internet.

与网站相比，PWA具有在用户不再连接到互联网时仍显示数据的功能。

安装了有效的Service Worker (Valid Service Worker installed)

This can be classified as the bread and butter of any modern progressive web app. The service worker is responsible for caching all files, serving push notifications, content updating, data manipulation and more.

可以将其归类为任何现代渐进式Web应用程序的基础。 服务人员负责缓存所有文件，提供推送通知，内容更新，数据处理等。

It’s important to understand that this script works independently of any app or website already existing on the web server, working with event listeners and commands such as “fetch”, which resembles HTTP “Get/Post/Set” commands.

重要的是要了解，此脚本可独立于Web服务器上现有的任何应用程序或网站运行，并与事件侦​​听器和“ fetch”(类似于HTTP“ Get / Post / Set”命令)之类的命令一起使用。

By listening for any network requests on the server, but being located as a .js file on the visitor’s device, the service worker will then manipulate those events with appropriate responses, depending on whether there’s internet or not, allowing for custom offline pages.

通过侦听服务器上的任何网络请求，但它们以.js文件的形式位于访问者的设备上，服务工作者将根据是否有互联网，以适当的响应来处理这些事件，从而允许自定义脱机页面。

Furthermore, it’s possible to show custom content even if users are offline, based on their existing cache data. This set of data is even manipulative, meaning that we can code functions using the cache data as variables and parameters — if applicable to the respective project, of course.

此外，即使用户处于脱机状态，也可以根据其现有缓存数据显示自定义内容。 这组数据甚至是操纵性的，这意味着我们可以使用缓存数据作为变量和参数来对函数进行编码-当然，如果适用于各个项目。

Loading a website for the first time installs the service worker locally, and the service worker then creates a so-called app shell, containing cached data such as output pages, JSON content, CSS, images, scripts and so on.

首次加载网站会在本地安装Service Worker，然后Service Worker创建一个所谓的应用程序外壳，其中包含诸如输出页面，JSON内容，CSS，图像，脚本等缓存的数据。

This means that, while the first load might take a few seconds, subsequent loads utilizing the service worker will be significantly faster due to the sheer speed service workers deliver, and how they function by caching content.

这意味着，尽管第一次加载可能需要几秒钟，但由于服务工作者的交付速度之快以及它们如何通过缓存内容来发挥作用，因此利用服务工作者进行的后续加载将明显更快。

Once these four requirements are implemented correctly, users on Android phones and other supported devices and browsers will be prompted to add the PWA to their home screen, where it will have an icon just like a regular app, and will open up in a browser.

一旦正确实现了这四个要求，就会提示Android手机以及其他受支持的设备和浏览器上的用户将PWA添加到其主屏幕，该屏幕上会像普通应用程序一样显示一个图标，并会在浏览器中打开。

It’s up to developers to make sure that the UI resembles the existing website or app, or perhaps to develop a new UI for the PWA users entirely. Total freedom in this regard is what has made some developers interested in this trend in the first place.

开发人员应确保UI与现有网站或应用程序相似，或者完全为PWA用户开发新的UI。 在这方面的完全自由是使某些开发人员首先对这种趋势感兴趣的原因。

渐进式Web应用程序的优缺点 (Pros and Cons of Progressive Web Apps)

The pros of progressive web apps include the following:

渐进式Web应用程序的优点包括：

• better speed and performance compared to websites
  与网站相比，速度和性能更好
• security
  安全
• offline capabilities
  离线功能
• Add to Home Screen
  添加到主屏幕
• push notifications
  推送通知

• better bounce rates

  跳出率更高

• bridging the gap between mobile apps and websites
  缩小移动应用程序和网站之间的差距
• feels like an app
  感觉像一个应用程序
• no App Store submissions/rejections.
  没有App Store提交/拒绝。

There are some cons, though, including these:

但是，有一些缺点，包括：

• limited browser support
  有限的浏览器支持
• limited native API access
  受限的本地API访问
• no App Store entries
  没有App Store条目
• not all current PWAs use links for their page structure, building the PWA with tabs that are unlinkable and therefore undiscoverable by search engines.
  并非所有当前的PWA都使用链接来建立其页面结构，从而使用无法链接的标签来构建PWA，因此这些标签无法被搜索引擎发现。

使用场景 (Usage Scenarios)

For certain types of websites and mobile applications, it would make sense to develop a PWA to act in situations where either the website or app doesn’t do the user justice.

对于某些类型的网站和移动应用程序，有必要开发一个PWA以在网站或应用程序无法做到用户公正的情况下采取行动。

It’s important to realize that while users can read news, add items to their cart while in offline mode and so forth, they’ll still need internet access to get new data, or to update their profile information or add an order.

重要的是要意识到，尽管用户可以阅读新闻，在脱机模式下将商品添加到购物车等，但他们仍然需要Internet访问才能获取新数据，更新其个人资料信息或添加订单。

PWAs can help keep this data stored for when the user gets reconnected, but in certain situations, such as paywall news sites, it might not be in the site’s interest to show this data when the user cannot click on any ads, or purchase a subscription etc.

PWA可以帮助在用户重新连接时保存此数据，但是在某些情况下，例如付费新闻网站，当用户无法单击任何广告或购买订阅时，显示此数据可能不符合该网站的利益。等等

Currently there are many different types of PWAs on the web. Some work as totally independent applications that just as well could have been developed as a native app, such as The Guardian’s RioRun.

当前，网络上有许多不同类型的PWA。 有些完全独立的应用程序也可以作为本机应用程序开发，例如The Guardian的RioRun 。

Others have implemented service workers into their existing websites, adding offline capabilities through existing layers of websites — such as The Washington Post, where, if you browse their website and lose your connection, you can still read the article, and you’re presented with a specially coded offline page, offering a game of crosswords while you wait to get back online.

其他人则在他们现有的网站中实施了服务工作者，通过现有的网站层(例如《华盛顿邮报》)添加了离线功能，如果您浏览他们的网站并失去连接，仍然可以阅读该文章，并获得介绍。一个经过特殊编码的离线页面，在您等待重新上网时提供填字游戏。

FlipKart has reported more than a 70% increase in conversions, AliExpress more than +104% in conversions for new users compared to their websites.

FlipKart报告称，与新用户相比，新用户的转化次数增长了70％以上 ，速卖通的转化次数则超过了+ 104％ 。

Konga, a Nigerian online retailer, has cut down their data usage by a reported 92%, meaning a huge improvement in page load times. For their userbase, which consists largely of people browsing from 2G networks, this has the potential to revolutionize the web in countries where data is costly and high speeds scarce.

据报道，尼日利亚在线零售商Konga已将其数据使用量减少了92％，这意味着页面加载时间大大缩短了。 对于他们的用户群(主要由从2G网络浏览的人们组成)而言，这可能会在数据昂贵且高速缺乏的国家/地区革新网络。

批评 (Criticisms)

Not everyone has been equally positive towards this trend. Jeremy Keith has voiced concerns over the fact that most of the current PWAs tend to hide their URLs to resemble native mobile applications, thereby disregarding one of the main benefits of the progressive web apps altogether — namely, the ability to index and search through crawled links.

并非每个人都对该趋势持同样积极的态度。 杰里米·基思(Jeremy Keith)对当前的大多数PWA倾向于隐藏其URL使其类似于本机移动应用程序的事实表示担忧，从而完全忽略了渐进式Web应用程序的主要优势之一，即能够对爬网链接进行索引和搜索。

Based on this criticism, Alex Russel, the man responsible for developing PWAs for Google, among other things, has said:

基于这种批评，负责为Google开发PWA的人Alex Russel 说 ：

Like Jeremy, I’m agitated over the lack of access to URLs for PWAs launched in a more immersive mode. That seems to be the thing to be frustrated about if you care about URLs and sharing and it’s my concern too — so much so that our team prioritized fixing it this quarter.

像Jeremy一样，我为以更身临其境的模式启动的PWA无法访问URL感到不安。 如果您关心URL和共享， 这似乎是一件令人沮丧的事情，这也是我的关注-如此之多，以至于我们的团队优先考虑在本季度进行修复。

Jeremy Keith also expresses concern over the fact that some PWAs don’t support desktop web browsers at all, only functioning on mobile phones, which is a valid point — but not directly related to PWAs themselves. After all, it’s up to the webmasters and app owners to dictate how well their different websites, apps and PWAs should integrate. He writes:

杰里米·基思(Jeremy Keith)也对某些PWA根本不支持桌面Web浏览器，仅在手机上运行这一事实表示关注，这是有道理的，但与PWA本身没有直接关系。 毕竟，要由网站管理员和应用程序所有者来决定他们的不同网站，应用程序和PWA应该如何集成。 他写：

Looking at most of the examples of Progressive Web Apps, there’s an even more worrying trend than the return to m-dot subdomains. It looks like most of them are concentrating so hard on the “app” part that they’re forgetting about the “web” bit. That means they’re assuming that modern JavaScript is available everywhere.

查看渐进式Web应用程序的大多数示例，与返回m点子域相比，趋势更加令人担忧。 看起来他们中的大多数人都非常专注于“应用程序”部分，以至于他们忘记了“网络”部分。 这意味着他们假设现代JavaScript随处可见。

It is puzzling that the time has been taken to develop a functional PWA, and then only release it for mobiles and not for the web as well. It seems odd that companies would exclude, knowingly, a certain portion of their visitors and users. Most of the sites I’ve been visiting have not shown any particular data that would not also be suited for the web, meaning that apart from the extra time to code for the web as well, I found no reasons not to.

令人费解的是，已经花了一些时间来开发功能性PWA，然后仅将其发布给手机，而不是发布给Web。 公司故意将访问者和用户的某些部分排除在外似乎很奇怪。 我访问过的大多数网站都没有显示任何特定数据，这些数据也不适合网络使用，这意味着除了要花费额外的时间编写网络代码外，我没有理由不这样做。

四舍五入 (Rounding Off)

Progressive web apps have shown great results so far, with particularly great success in terms of conversion rates, bounce rates, and impressive performance increases. Coupled with the fact that website owners and businesses can produce a near app-like experience without the need for native development, this author believes the future looks bright for progressive web apps.

到目前为止，渐进式Web应用程序已显示出出色的效果，在转换率，跳出率和令人印象深刻的性能提升方面尤其取得了巨大的成功。 加上网站所有者和企业无需本地开发即可产生接近于应用程序的体验这一事实，因此，作者认为渐进式Web应用程序的前景一片光明。

Almost any type of business would do well to implement service workers for the sole reason of cutting down load times significantly. Not every website needs offline functionality, and not every website is concerned about conversion or bounce rates. However, given the relative ease of setting up a simple system, I recommend that any serious website owner look into this emerging technology sooner rather than later.

几乎所有类型的企业都可以很好地实施服务人员，这是唯一可以大大减少加载时间的原因。 并非每个网站都需要离线功能，也不是每个网站都关注转换率或跳出率。 但是，鉴于设置简单系统相对容易，因此我建议任何认真的网站所有者都应尽早研究此新兴技术。

I’d love to know what you think, though. Is it too early to be heading in this direction? Are things like hiding URLs and not being available everywhere against the very spirit of the web?

不过，我很想知道您的想法。 朝这个方向前进还为时过早吗？ 是否像隐藏URL这样的东西不符合Web的精神而无处不在？

翻译自: https://www.sitepoint.com/progressive-web-apps-bridging-the-gap-between-web-and-mobile/