渐进式web应用程序_为什么渐进式Web应用程序是Web开发的未来

渐进式web应用程序

by Tushar Agrawal

由Tushar Agrawal

为什么渐进式Web应用程序是Web开发的未来 (Why Progressive Web Apps Are The Future Of Web Development)

“The key is to embrace disruption and change early. Don’t react to it decades later. You can’t fight innovation.” — Ryan Kavanaugh

“关键是尽早接受颠覆和变革。 几十年后不要对此作出React。 您无法抗拒创新。” —瑞安·卡瓦诺(Ryan Kavanaugh)

Lately, there’s been a lot of buzz around PWAs with many claiming it to be future of web development, especially in terms of mobile devices. At its core, a Progressive Web App (PWA) is simply a web application that uses modern web techniques to deliver a native app-like experience to users. These are web applications with progressive enhancement to implement features like caching, background sync, and push notifications.

最近，关于PWA的讨论越来越多，许多人声称PWA是Web开发的未来，尤其是在移动设备方面。 渐进式Web应用程序(PWA)从本质上讲就是一个使用现代Web技术向用户提供类似于本机应用程序的体验的Web应用程序。 这些是具有逐步增强功能的Web应用程序，可实现缓存，后台同步和推送通知等功能。

Even though PWAs have been around for more than two years now, the response is quite underwhelming. Few big players have adopted this philosophy but most haven’t actually embraced it very much. Chrome and Mozilla are perhaps the best browsers to test out your PWAs as Apple is yet to get into this stuff.

尽管PWA已经存在了两年多，但React却很差劲。 很少有大公司采用这种哲学，但大多数人实际上并没有非常接受它。 Chrome和Mozilla可能是测试您的PWA的最佳浏览器，因为Apple尚未涉足这些东西。

PWA-真的好吗？ (PWA — Is it really good ?)

On one hand, we have native apps that are undoubtedly fast and efficient in most of the cases. On the other hand, there are websites that are kinda slow and with the connectivity issues, it only gets worse.

一方面，我们拥有的本地应用程序在大多数情况下无疑都是快速有效的。 另一方面，有些网站运行缓慢，并且存在连接问题，只会变得更糟。

Accelerated Mobile Pages Project (AMP) spearheaded by Twitter and Google was launched in 2016 to solve those slow connection issues only. PWAs work flawlessly in all the possible scenarios. With a good connection, there is never a problem. The problem is when we have no connection and we are greeted with the error page.

由Twitter和Google牵头的加速移动页面项目( AMP )于2016年启动，仅解决那些缓慢的连接问题。 PWA在所有可能的情况下均能完美工作。 有了良好的连接，就不会有问题。 问题是当我们没有连接并且遇到错误页面时。

But this can become most annoying if we have a slow connection. The page seems to be loading and all we see is a blank screen. We just wait, wait and wait but the page never seems to load. This is where PWA comes to our rescue. The best part about PWAs — you get the best user experience possible in slow connectivity as well as no connectivity (yep , you read it right..).

但是，如果连接速度较慢，这可能会变得最令人讨厌。 该页面似乎正在加载，我们所看到的只是一个空白屏幕。 我们只是等待，等待，然后等待，但是页面似乎从未加载。 这就是PWA拯救我们的地方。 关于PWA的最好的部分-在缓慢的连接以及没有连接的情况下，您可以获得最佳的用户体验(是的，您没看错..)。

为什么使用PWA有意义 (Why it makes sense to use PWA)

According to a study, an average user spends 80% of his total time on apps on only three of his apps (For me its Chrome, Quora and Medium).

根据一项研究，普通用户仅将其总时间的80％花费在自己的三个应用程序上(对我来说，就是Chrome，Quora和Medium)。

The other apps just sit idle for most of this time consuming a precious portion of the memory. Moreover, it costs around ten times to develop an app rather than creating a website for the same. The cost can get much higher if you plan to develop and maintain separate code bases for different platforms like Android, iOS and the web.

其他应用程序在大部分时间中都处于闲置状态，消耗了宝贵的内存部分。 而且，开发一个应用程序而不是为其创建网站要花费大约十倍的时间。 如果您计划为Android，iOS和Web等不同平台开发和维护单独的代码库，则成本可能会更高。

PWA可以使用的本机应用程序功能 (Native App features that PWAs can use)

• Push notifications
  推送通知
• Full Screen
  全屏
• Offline working
  离线工作
• Splash screen is supported giving it a more app like feel
  支持启动屏幕，使它看起来更像应用程序

PWAs can make use of many more such features. The above points are only to give you a hint of what PWAs are capable of. However, there are some traditional features that only native apps enjoy as of now.

PWA可以利用更多此类功能。 以上几点仅是为了提示您PWA的功能。 但是，到目前为止，有些功能只有本机应用程序才能使用。

到目前为止，PWA无法使用的本机应用程序功能 (Native App features that PWAs can’t use as of now)

• No or highly restrictive access to different hardware sensors
  没有访问或限制访问不同的硬件传感器
• Alarms
  警报器
• Phonebook Access
  电话簿访问
• Modfiying System Settings
  修改系统设置

PWAs are evolving quite fast and we can hope to see these features come to action pretty soon.

PWA的发展非常Swift，我们希望看到这些功能很快就会付诸实践。

PWA的两个主要组成部分 (Two Major Components of a PWA)

App ManifestIt’s a JSON file that defines an app icon, how to launch the app (standalone, full-screen, in the browser etc), and any such related information. It’s located in the root of your app. A link to this file is required on each page that has to be rendered.

应用清单是一个JSON文件，其中定义了应用图标，如何启动应用(独立，全屏，在浏览器中等)以及任何此类相关信息。 它位于您应用程序的根目录中。 在必须呈现的每个页面上都需要此文件的链接。

It is added in the head section of the HTML page:<link rel=”manifest" href="/manifest.json">

它被添加到HTML页面的头部： <link rel=”manifest" href="/manifest.jso n”>

Service WorkerService worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.

服务人员服务人员是大多数魔术发生的地方。 它只不过是充当可编程代理JavaScript代码，它仅负责拦截和响应网络请求。 由于它充当代理并且可以轻松编程，因此必须通过HTTPS为应用程序提供服务，以确保数据安全。

Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

值得注意的是，服务工作者会缓存实际的响应，包括所有HTTP标头，而不只是响应数据。 这意味着您的应用程序可以简单地发出网络请求并处理响应，而无需任何特定代码来处理缓存。

我该如何开始？ (How do I get started?)

The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.

关于入门的最好的事情是，它比看起来容易得多。 实际上，很可能会将现有站点转换为PWA。 如果您打算开发PWA，我强烈建议您注意这一点。

谢谢阅读！ 如果您喜欢它，请鼓掌并分享信息以提供支持。 (Thanks for reading! If you liked it, please support by clapping and sharing the post.)

翻译自: https://www.freecodecamp.org/news/why-progressive-web-apps-are-the-future-of-web-development-13db7dd5f640/

渐进式web应用程序