本文共 8455 字，大约阅读时间需要 28 分钟。
渐进式web应用程序
Have you ever seen an “Add to Home Screen” banner, like above, while browsing a website? When you click the button, the “application” installs itself in the background. When you open this application that now sits in your app drawer, you can browse the same experience you were doing on your browser, but now right in your mobile phone.
浏览网站时，您是否见过“添加到主屏幕”标语，如上所示？ 当您单击按钮时，“应用程序”将自身安装在后台。 打开现在位于应用程序抽屉中的该应用程序时，您可以浏览与在浏览器中进行的相同的体验，但是现在可以在手机中浏览。
What you have now is a mobile app that was downloaded from a web application. All this, without even have to see the face of an app store.
您现在拥有的是一个从Web应用程序下载的移动应用程序。 所有这些，甚至都无需看到应用程序商店的面Kong。
Getting the app was so easy! But that’s not even the best part. When you open this app, you will be able to browse the content even when you do not have internet. You have offline access to the app! How cool is that?
取得应用程式非常简单！ 但这还不是最好的部分。 当您打开此应用程序时，即使没有互联网也可以浏览内容。 您可以离线访问该应用！ 多么酷啊？
What you’ve come across is a Progressive Web App (PWA). A PWA lets you install the application from the browser window itself, is available on your phone like a native app, and works offline, just like a native app.
您遇到的是渐进式Web应用程序(PWA)。 通过PWA，您可以从浏览器窗口本身安装该应用程序，它可以像本地应用程序一样在手机上使用，并且可以像本地应用程序一样脱机工作。
But what does it really mean for a web app to be progressive? Let’s take a deeper dive into what progressive web apps are, why I think they’re better than native apps, and what makes them different from traditional web apps.
但是，对于一个Web应用来说，渐进式到底意味着什么？ 让我们更深入地研究什么是渐进式Web应用程序，为什么我认为它们比本地应用程序更好，以及使它们与传统Web应用程序不同的原因。
The term Progressive Web App was coined by and Frances Berriman. In Alex’s words:
渐进式Web应用程序一词由和Frances Berriman创造。 用亚历克斯的话来说：
Progressive Web Apps are just websites that took all the right vitamins.
渐进式Web Apps只是摄取所有正确维生素的网站。
It isn’t a new framework or technology. It is a set of best practices to make a web application function similar to a desktop or mobile application. The dream is to have an experience so uniform and seamless that the user is unable to tell the difference between a Progressive Web App and a native mobile app.
它不是新的框架或技术。 使Web应用程序功能类似于桌面或移动应用程序是一组最佳实践。 梦想是拥有如此统一和无缝的体验，以使用户无法分辨Progressive Web App和本机移动应用程序之间的区别。
Progressive web applications deliver user experiences through progressive enhancement. It essentially means that a PWA will perform the same functions on a new iPhone 8 as it would on an older generation iPhone. Sure, some features may not be available, but the app continues to work and perform like it should.
渐进式Web应用程序通过渐进式增强来提供用户体验。 从本质上讲，这意味着PWA在新iPhone 8上将执行与旧版iPhone相同的功能。 当然，某些功能可能不可用，但该应用程序仍可以正常运行并正常运行。
Before we understand why we need a progressive web app, let’s talk about some of the challenges we are facing today with native and web apps.
在理解为什么我们需要一个渐进式Web应用程序之前，让我们先谈一下本机和Web应用程序今天所面临的一些挑战。
Internet speed: you may not realize this depending on where you live, but 60% of the world’s population is still using 2G internet. Even in the US, some people have to use dialup to access internet.
互联网速度 ：您可能无法意识到这一点，具体取决于您的居住地，但是全球60％的人口仍在使用2G互联网。 即使在美国，有些人也必须使用拨号上网。
Slow website load: Do you know how long a user waits to click the “Close X” button if a website is too slow? Three seconds! 53% of users abandon a website if it is too slow.
网站加载速度慢：如果网站速度太慢，您是否知道用户等待多长时间才能单击“关闭X”按钮？ 三秒钟！ 如果网站速度太慢，则有53％的用户会放弃该网站。
High friction: People don’t want to install native apps. An average user installs 0 applications in a month.
高摩擦：人们不想安装本机应用程序。 一个普通用户一个月内安装0个应用程序。
User engagement: Users spend most of their time in native apps, but mobile web reach is almost three times that of native apps. Hence, most of the users are not actively engaged. However, users are spending 80% of their time on only their top three native apps.
用户参与度：用户将大部分时间花在本机应用程序上，但移动网络覆盖率几乎是本机应用程序的三倍。 因此，大多数用户没有积极参与。 但是，用户仅将80％的时间用于前三名本机应用程序。
PWAs help solve these problems. There are multiple reasons for using a progressive web app, but here are some of the top capabilities it provides:
PWA帮助解决这些问题。 使用渐进式Web应用程序的原因有很多，但以下是它提供的一些主要功能：
Fast: PWAs provide experiences that are consistently fast. From the moment a user downloads an app to the moment they start interacting with it, everything happens really fast. Because you can cache the data, it is extremely fast to start the app again even without hitting the network.
˚FAST：个PWA提供一贯快速的体验。 从用户下载应用程序到开始与之交互的那一刻，所有事情的发生都非常快。 因为您可以缓存数据，所以即使不中断网络也可以再次快速启动该应用程序。
Integrated user experience: PWAs feel and behave like native apps. They sit in a user’s home screen, send push notifications like native apps, and have access to a device’s functionalities like native apps. The experience feels seamless and integrated.
综合的用户体验：PWA的感觉和行为类似于本机应用程序。 他们坐在用户的主屏幕上，发送推送通知(如本机应用程序)，并可以访问设备的功能(如本机应用程序)。 体验是无缝的和集成的。
Reliable experience: With the help of service workers, we can reliably paint a picture on a user’s screen even when network has failed.
[R eliable经验：随着服务人员的帮助下，我们能够可靠地描绘出用户的屏幕上的图片，即使网络出现故障。
Engaging: Because we can send notifications to a user, we can really drive the engagement up by keeping the user notified and engaged with the app.
Ëngaging：因为我们可以发送通知给用户，才能真正推动参与了由保持用户通知，并与应用程式互动。
In short, it is FIRE.
简而言之，它是火。
Google has published a for Progressive Web apps. I will go over four minimum requirements for an application to be a PWA:
Google已发布了渐进式Web应用程序 。 对于成为PWA的应用程序，我将讨论四个最低要求：
This is just a json file that gives meta information about the web app. It has information like the icon of the app (which a user sees after installing it in their app drawer), background color of the app, name of the app, short name, and so on. We can write this manifest file ourselves or we can use to generate one for us.
这只是一个提供有关Web应用程序的元信息的json文件。 它具有类似应用程序的图标(用户将其安装在应用程序抽屉中后会看到的图标)，应用程序的背景颜色，应用程序的名称，短名称等信息。 我们可以自己编写此清单文件，也可以使用为我们生成一个清单文件。
Service Workers are event-driven workers that run in the background of an application and act as a proxy between the network and application. They are able to intercept network requests and cache information for us in the background. This can be used to load data for offline use. They are a javascript script that listens to events like fetch and install, and they perform tasks.
服务工作者是事件驱动的工作者，它们在应用程序的后台运行，并充当网络和应用程序之间的代理。 他们能够拦截网络请求并在后台为我们缓存信息。 这可用于加载数据以供脱机使用。 它们是一个javascript脚本，可侦听诸如获取和安装之类的事件，并执行任务。
Here is a sample serviceworker.js
这是一个示例serviceworker.js
self.addEventListener('fetch', event => { //caching for offline viewing const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); }});async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request);} This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.
当用户在其应用程序抽屉中安装PWA时，该图标用于提供应用程序图标。 jpeg图像就可以了。 我在上面突出显示的清单工具有助于生成多种格式的图标，我发现它非常有用。
In order to be a PWA, the web application must be served over a secure network. With services like Cloudfare and LetsEncrypt, it is really easy to get an SSL certificate. Being a secure site is not only a best practice, it also establishes your web application as a trusted site for users demonstrating trust and reliability, and avoiding middle man attacks.
为了成为PWA，必须通过安全网络为Web应用程序提供服务。 借助Cloudfare和LetsEncrypt之类的服务，获取SSL证书确实非常容易。 成为安全站点不仅是最佳实践，而且还将Web应用程序建立为值得信赖的站点，以证明用户的信任和可靠性，并避免中间人攻击。
Note: This is part 1 of 2 part series. In the next part, we will create a Progressive Web App from scratch with a skeleton index.html.
注意：这是2部分系列的第1部分。 在下一部分中，我们将使用框架index.html从头开始创建一个渐进式Web应用程序。
Did you learn something new? Have comments? Know a DevJoke?
你学到新东西了吗？ 有意见吗？ 知道开发笑话吗？
Why do programmers get confused between Halloween and Christmas?Because OCT 31 = DEC 25
— Shruti Kapoor (@shrutikapoor08)为什么程序员会在万圣节和圣诞节之间感到困惑？因为10月31日= DEC 25
-Shruti Kapoor(@ shrutikapoor08)
翻译自:
渐进式web应用程序
转载地址：http://bdwzd.baihongyu.com/