Introduction to progressive web apps

这篇翻译不完整。请帮忙从英语翻译这篇文章

这篇文章将会为你介绍渐进式web应用(PWA),讨论一下它们到底是什么,相比于常规的web应用,它又带来了哪些优势。

什么是渐进式web应用?

PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和原生应用的特性。

例如,web应用更加易于发现——相比于安装应用,访问一个网站显然更加容易和迅速,并且你可以通过一个链接来分享web应用。

在另一方面,原生应用与操作系统可以更加完美的整合,也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行,并且相较于使用浏览器访问,用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

PWA赋予了我们创建同时拥有以上两种优势的应用的能力。

这并不是一个新概念——这样的想法在过去已经在web平台上通过许多方法出现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的Firefox OS的生态系统中离线运行和安装web应用已经成为了可能。

PWAs, 不但如此,更是提供了所有的甚至是更多的特性,来让web更加优秀。

什么使应用成为PWA?

正如前文所述,PWA不是使用一种技术创建的。它们代表了构建Web应用程序的新理念,涉及一些特定的模式,API和其他功能。如果一个Web App从一开始就是PWA,那就不那么明显了。当应用程序满足某些要求时,可以将其视为PWA,或者实现一组给定的功能:离线工作,可安装,易于同步,可以发送推送通知等。

此外,还有一些工具可以按百分比衡量应用的完整性。(Lighthouse目前是最受欢迎的工具)通过实施各种技术优势,我们可以使应用程序更加渐进式,从而最终获得更高的Lighthouse 得分。但这只是一个粗略的指标。

这里有一些关键的原则来辨别一个web应用是否是一个PWA应用。它应该具有以下特点:

  • Discoverable, 内容可以通过搜索引擎发现。
  • Installable, 可以出现在设备的主屏幕。
  • Linkable, 你可以简单地通过一个URL来分享它。 
  • Network independent, 它可以在离线状态或者是在网速很差的情况下运行。
  • Progressive, 它在老版本的浏览器仍旧可以使用,在新版本的浏览器上可以使用全部功能。
  • Re-engageable, 无论何时有新的内容它都可以发送通知。
  • Responsive, 它在任何具有屏幕和浏览器的设备上可以正常使用——包括手机,平板电脑,笔记本,电视,冰,等。
  • Safe, 在你和应用之间的连接是安全的,可以阻止第三方访问你的敏感数据。

这么做值得吗?

当然值得!只需要相对较小的代价就可以实现PWA的核心特性,这样的优势是巨大的。例如:

  • 减少应用安装后的加载时间, 多亏了 Service Workers来进行缓存, 以此来节省带宽和时间。
  • 当应用有可用的更新时,可以仅仅去更新发生改变的那部分内容。与之相反,对于一个原生应用而言,即便是最微小的改动也需要强制用户去再次下载整个应用。
  • 外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上,应用可以全屏运行,等。
  • 凭借系统通知和推送消息与用户保持连接,对用户产生更多的吸引力,并且提高转换效率。

有许多知名的成功企业正在尝试PWA的方式,选择一个增强的网站体验而不是一个原生应用。事实上它们也确实从中获得了显而易见的益处。  PWA Stats 这个网站上分享了许多案例研究,这都证明了以上这些优势。

最著名的案例可能是Flipkart Lite--印度最大的电子商务网站,在2015年重建为渐进式网络应用程序,转化率提高了70%。AliExpress PWA也看到了比web app或native app更好的结果,新用户的转换率提高了104%。鉴于其利润增长以及转换为PWA所需的工作量相对较少,优势显而易见。

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

You can even generate PWAs online using the PWABuilder website.

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

Browser support

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

An example application

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

文档标签和贡献者

此页面的贡献者: eightHundreds, yijie_sun
最后编辑者: eightHundreds,