渐进式web应用程序
Interested in learning JavaScript? Get my ebook at jshandbook.com
有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书
Progressive Web Apps (PWA) are the latest trend in mobile application development using web technologies. At the time of writing (early 2018), they’re only applicable to Android devices.
渐进式Web应用程序(PWA)是使用Web技术开发移动应用程序的最新趋势。 在撰写本文时(2018年初)，它们仅适用于Android设备 。
PWAs are coming to iOS 11.3 and macOS 10.13.4, very soon.
PWA即将推出iOS 11.3和macOS 10.13.4。
WebKit, the tech underlying Safari and Mobile Safari, has recently (Aug 2017) declared that they’ve started working on introducing Service Workers into the browser. This means that soon they will land in iOS devices as well. So the Progressive Web Apps concept will likely be applicable to iPhones and iPads, if Apple decides to encourage this approach.
WebKit是Safari和Mobile Safari的基础技术，最近(2017年8月)宣布他们已开始着手将Service Workers引入浏览器。 这意味着它们很快也会登陆iOS设备。 因此，如果苹果公司决定鼓励这种方法，那么渐进式Web应用程序概念很可能适用于iPhone和iPad。
It’s not a groundbreaking new technology, but rather a new term that identifies a bundle of techniques that have the goal of creating a better experience for web-based apps.
这不是开创性的新技术，而是一个新名词，它标识了旨在为基于Web的应用程序创造更好体验的一系列技术。
什么是渐进式Web应用程序 (What is a Progressive Web App)
A Progressive Web App is an app that can provide additional features based on what the device supports, providing offline capability, push notifications, an almost native app look and speed, and local caching of resources.
渐进式Web应用程序是可以根据设备支持的功能提供其他功能 ，提供脱机功能，推送通知，几乎本机的应用程序外观和速度以及本地资源缓存的应用程序。
This technique was originally introduced by Google in 2015, and proves to bring many advantages to both the developer and the users.
这项技术最初由Google于2015年推出，并被证明为开发人员和用户带来了很多优势。
Developers have access to building almost-first-class applications using a web stack. This is always considerably easier and cheaper than building native applications, especially when considering the implications of building and maintaining cross-platform apps.
开发人员可以使用Web堆栈来构建几乎一流的应用程序。 这总是比构建本机应用程序容易得多，而且便宜，尤其是考虑到构建和维护跨平台应用程序的含义时。
Devs can benefit from a reduced installation friction, and at a time when having an app in the store does not actually bring anything in terms of discoverability for 99,99% of the apps, Google search can provide the same benefits if not more.
开发人员可以从减少的安装摩擦中受益，并且当商店中拥有某个应用程序实际上对于99.99％的应用程序的可发现性没有带来任何好处时，Google搜索可以提供相同的好处，甚至更多。
A Progressive Web App is a website which is developed with certain technologies that make the mobile experience much more pleasant than a normal mobile-optimized website. It almost feels like working on a native app, as it offers the following features:
渐进式Web应用程序是使用某些技术开发的网站，这些技术使移动体验比普通的针对移动设备优化的网站更加愉悦。 它具有以下功能，几乎就像在使用本机应用程序一样：
- Offline support 离线支持
- Loads fast 快速加载
- Is secure 是安全的
- Is capable of emitting push notifications 能够发出推送通知
- Has an immersive, full-screen user experience without the URL bar 无需网址栏，即可获得身临其境的全屏用户体验
Mobile platforms (Android at the time of writing, but it’s not technically limited to that) offer increasing support for Progressive Web Apps. They even ask the user to add the app to the home screen when that user visits such a site.
移动平台(在撰写本文时为Android，但在技术上不限于此)为渐进式Web应用程序提供了越来越多的支持。 他们甚至要求用户在访问此类网站时将该应用添加到主屏幕 。
But first, a little clarification on the name. Progressive Web App can be a confusing term, and a good definition is: web apps that take advantage of modern browsers features (like web workers and the web app manifest) to let their mobile devices “upgrade” the app to the role of a first-class citizen app.
但是首先，对名称进行一些澄清。 渐进式Web App可能是一个令人困惑的术语 ，一个好的定义是：利用现代浏览器功能(如Web Worker和Web App manifest)的Web应用程序让其移动设备将其“升级”到第一个角色。级公民应用程序。
渐进式Web应用程序替代品 (Progressive Web Apps alternatives)
How does a PWA stand compared to the alternatives when it comes to building a mobile experience?
与建立替代移动体验相比，PWA与其他选择相比如何？
Let’s focus on the pros and cons of each, and let’s see where PWAs are a good fit.
让我们专注于每种方法的利弊，让我们看看PWA在哪里很合适。
原生移动应用 (Native Mobile Apps)
Native mobile apps are the most obvious way to build a mobile app. Objective-C or Swift on iOS, Java /Kotlin on Android and C# on Windows Phone.
本机移动应用程序是构建移动应用程序的最明显方式。 iOS上为Objective-C或Swift，Android上为Java / Kotlin，Windows Phone上为C＃。
Each platform has its own UI and UX conventions, and the native widgets provide the experience that the user expects. They can be deployed and distributed through the platform App Store.
每个平台都有其自己的UI和UX约定，并且本机小部件提供用户期望的体验。 它们可以通过平台App Store进行部署和分发。
The main pain point with native apps is that cross-platform development requires learning, mastering and keeping up to date with many different methodologies and best practices. If, for example, you have a small team or you’re a solo developer building an app on 3 platforms, you need to spend a lot of time learning the technology and environment. You’ll also spend a lot of time managing different libraries and using different workflows (for example, iCloud only works on iOS devices — there’s no Android version).
本地应用程序的主要痛点是跨平台开发需要学习，掌握和掌握许多不同的方法论和最佳实践。 例如，如果您的团队很小或您是在3个平台上构建应用程序的单独开发人员，则需要花费大量时间来学习技术和环境。 您还将花费大量时间来管理不同的库并使用不同的工作流(例如，iCloud仅可在iOS设备上使用-没有Android版本)。
混合应用 (Hybrid Apps)
Hybrid applications are built using Web Technologies, but are deployed to the App Store. In the middle sits a framework or some way to package the application so it’s possible to send it for review to the traditional App Store.
混合应用程序是使用Web技术构建的，但已部署到App Store。 中间有一个框架或某种方式打包应用程序，以便可以将其发送给传统的App Store进行审查。
Some of the most common platforms are Phonegap and Ionic Framework, among many others, and usually what you see on the page is a WebView that essentially loads a local website.
一些最常见的平台是Phonegap和Ionic Framework，以及许多其他平台，通常您在页面上看到的是实质上加载本地网站的WebView。
I initially included Xamarin in the list, but Carlos Eduardo Pérez correctly pointed out that Xamaring generates native code.
我最初将Xamarin包括在列表中，但是Carlos EduardoPérez正确地指出Xamaring会生成本机代码。
The key aspect of Hybrid Apps is the write once, run anywhere concept. The different platform code is generated at build time, and you’re building apps using JavaScript, HTML and CSS, which is amazing. The device capabilities (microphone, camera, network, gps…) are exposed through JavaScript APIs.
Hybrid Apps的关键方面是一次写入，随处运行的概念。 在构建时会生成不同的平台代码，而您正在使用JavaScript，HTML和CSS来构建应用程序，这非常了不起。 设备功能(麦克风，摄像机，网络，gps等)通过JavaScript API公开。
The bad part of building hybrid apps is that, unless you do a great job, you might settle on providing a common denominator. This effectively creates an app that’s sub-optimal on all platforms because the app is ignoring the platform-specific human-computer interaction guidelines.
构建混合应用程序的坏处在于，除非您做得出色，否则您可能会选择提供共同点。 这有效地创建了一个在所有平台上都不理想的应用程序，因为该应用程序忽略了特定于平台的人机交互准则。
Also, performance for complex views might suffer.
此外，复杂视图的性能可能会受到影响。
使用React Native构建的应用 (Apps built with React Native)
React Native exposes the native controls of the mobile device through a JavaScript API, but you’re effectively creating a native application, not embedding a website inside a WebView.
React Native通过JavaScript API公开了移动设备的本机控件，但是您实际上是在创建本机应用程序，而不是在WebView中嵌入网站。
Their motto, to distinguish this approach from hybrid apps, is learn once, write anywhere. This means that the approach is the same across platforms, but you’re going to create completely separate apps in order to provide a great experience on each platform.
他们的座右铭是学习一次，随处编写 ，以区别于混合应用程序。 这意味着跨平台的方法相同，但是您将创建完全独立的应用程序，以便在每个平台上提供出色的体验。
Performance is comparable to native apps, since what you build is essentially a native app which is distributed through the App Store.
性能是可以与本地应用程序相媲美的，因为您构建的内容本质上是通过App Store分发的本地应用程序。
渐进式Web应用程序功能 (Progressive Web Apps features)
In the last section, you saw the main competitors of Progressive Web Apps. So how do PWAs stand compared to them, and what are their main features?
在上一节中，您看到了渐进式Web应用程序的主要竞争对手 。 那么与它们相比，PWA的地位如何？它们的主要特征是什么？
Remember — currently, Progressive Web Apps are for Android devices only.
请记住-渐进式Web应用程序仅适用于Android设备。
特征 (Features)
Progressive Web Apps have one thing that separates them completely from the above approaches: they are not deployed to the app store.
渐进式Web应用程序具有将它们与上述方法完全区分开的一件事： 它们没有部署到应用程序商店。
This is a key advantage. The app store is beneficial if you have the reach and luck to be featured, which can make your app go viral. But unless you’re in the top 0.001% you’re not going to get much benefit from having your little place on the App Store.
这是一个关键优势。 如果您具有突出的影响力和运气，这可以使您的应用程序具有病毒性，那么应用程序商店将是有益的。 但是，除非您排在前0.001％，否则您在App Store中占有一席之地将不会获得太多收益。
Progressive Web Apps are discoverable using Search Engines, and when a user gets to your site that has PWAs capabilities, the browser in combination with the device asks the user if they want to install the app to the home screen. This is huge, because regular SEO can apply to your PWA, leading to much less reliance on paid acquisition.
可以使用搜索引擎发现渐进式Web应用程序，并且当用户进入具有PWA功能的站点时， 浏览器与设备结合会询问用户是否要将应用程序安装到主屏幕 。 这是巨大的，因为常规SEO可以应用于您的PWA，从而大大减少了对付费购买的依赖。
Not being in the App Store means you don’t need Apple’s or Google’s approval to be in the users pockets. You can release updates when you want, without having to go through the standard approval process which is typical of iOS apps.
不在App Store中意味着您无需获得Apple或Google的批准 。 您可以根据需要发布更新，而无需执行典型的iOS应用程序标准批准流程。
PWAs are basically HTML5 applications/responsive websites on steroids, with some key technologies that were recently introduced to make some of the key features possible. If you remember, the original iPhone came without the option to develop native apps. Developers were told to develop HTML5 mobile apps that could be installed to the home screen, but the tech back then was not ready for this.
PWA基本上是类固醇上HTML5应用程序/响应式网站，最近引入了一些关键技术以使某些关键功能成为可能。 如果您还记得的话，最初的iPhone不能选择开发本机应用程序。 开发人员被告知要开发可以安装到主屏幕HTML5移动应用程序，但是当时的技术还没有为此做好准备。
Progressive Web Apps run offline.
渐进式Web应用程序脱机运行 。
The use of service workers allow the app to always have fresh content, which can be downloaded in the background, and to provide support for push notifications, which offer greater re-engagement opportunities.
服务人员的使用使应用程序始终具有可以在后台下载的新鲜内容，并为推送通知提供支持，从而提供了更大的重新参与机会。
Also, sharability makes for a much nicer experience for users that want to share your app, as they just need a URL.
此外，可共享性为希望共享您的应用程序的用户提供了更好的体验，因为他们只需要一个URL。
好处 (Benefits)
So why should users and developers care about Progressive Web Apps?
那么，为什么用户和开发人员应该关心渐进式Web应用程序？
- PWA are lighter. Native Apps can weigh 200MB or more, while a PWA could be in the range of the KBs. PWA更轻。 本机应用程序可能重200MB或更多，而PWA可能在KB范围内。
- There’s no native platform code 没有本机平台代码
- The cost of acquisition is lower (it’s much more difficult to convince a user to install an app than to visit a website to get the first-time experience) 购置成本较低(说服用户安装应用程序比访问网站来获得首次体验要困难得多)
- Significantly less effort is needed to build and release updates 构建和发布更新所需的精力大大减少
- They have much more support for deep links than regular app-store apps 与常规的应用商店应用相比，他们对深层链接的支持更多
核心概念 (Core concepts)
Responsive: the UI adapts to the device screen size
响应式 ：UI适应设备屏幕尺寸
App-like feel: it doesn’t feel like a website but rather like an app (as much as possible)
类似于应用程序的感觉 ：感觉不像是一个网站，而是一个应用程序(尽可能多)
Offline support: it will use the device storage to provide an offline experience
离线支持 ：它将使用设备存储提供离线体验
Installable: the device browser prompts the user to install your app
可安装 ：设备浏览器提示用户安装您的应用
Re-engaging: push notifications help users re-discover your app once installed
重新参与 ：推送通知可帮助用户在安装后重新发现您的应用
Discoverable: search engines and SEO optimization can provide a lot more users than the app store
可发现的 ：搜索引擎和SEO优化可以提供比应用商店更多的用户
Fresh: the app updates itself and the content once it’s online
新鲜 ：应用程序在线后即可更新自身和内容
Safe: it uses HTTPS
安全 ：它使用HTTPS
Progressive: it will work on any device, even older one, even if it has fewer features (e.g. just as a website, not installable)
渐进式 ：即使功能较少(即使只是作为网站，也无法安装)，它也可以在任何设备上使用，甚至可以在较旧的设备上使用
Linkable: it’s easy to point to it using URLs
可链接 ：使用URL指向它很容易
服务人员 (Service Workers)
Part of the Progressive Web App definition is that it must work offline.
渐进式Web应用程序定义的一部分是必须脱机工作。
Since the thing that allows the web app to work offline is the Service Worker, this implies that Service Workers are a mandatory part of a Progressive Web App.
由于允许Web应用程序脱机工作的是Service Worker，因此这意味着Service Workers是Progressive Web App的必需部分 。
WARNING: Service Workers are currently only supported by Chrome (Desktop and Android), Firefox, and Opera. See http://caniuse.com/#feat=serviceworkers for updated data on the support.
警告：目前仅Chrome(桌面和Android)，Firefox和Opera支持Service Worker。 有关支持的更新数据，请参见http://caniuse.com/#feat=serviceworkers 。
TIP: Don’t confuse Service Workers with Web Workers. They are a completely different thing.
提示：不要将Service Worker与Web Worker混淆。 他们是完全不同的事情。
A Service Worker is a JavaScript file that acts as a middleman between the web app and the network. Because of this it can provide cache services, speed the app rendering, and improve the user experience.
Service Worker是一个JavaScript文件，充当Web应用程序和网络之间的中间人。 因此，它可以提供缓存服务，加快应用渲染速度，并改善用户体验。
For security reasons, only HTTPS sites can make use of Service Workers, and this is part of the reason why a Progressive Web App must be served through HTTPS.
出于安全原因，仅HTTPS站点可以使用Service Worker，这是必须通过HTTPS进行渐进式Web应用程序服务的部分原因。
Service Workers are not available on the device the first time the user visits the app. On the first visit the service worker is installed, and then on subsequent visits to separate pages of the site, this Service Worker will be called.
用户首次访问应用程序时，服务工作者在设备上不可用。 首次访问时，将安装Service Worker，然后在后续访问站点的单独页面时，将调用此Service Worker。
Check out the complete guide to Service Workers
应用清单 (The App Manifest)
The App Manifest is a JSON file that you can use to provide the device information about your Progressive Web App.
App Manifest是一个JSON文件，可用于提供有关Progressive Web App的设备信息。
You add a link to the manifest in every header on each page of your web site:
你加在您的网站的每个页面上的每个标题的链接清单：
<link rel="manifest" href="/manifest.webmanifest">This file will tell the device how to set:
该文件将告诉设备如何设置：
- The name and short name of the app 应用程序的名称和简称
- The icons’ locations, in various sizes 图标的位置，各种大小
- The starting URL, relative to the domain 相对于域的起始URL
- The default orientation 默认方向
- The splash screen 启动画面
例 (Example)
{ "name": "The Weather App", "short_name": "Weather", "description": "Progressive Web App Example", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }], "start_url": "/index.html?utm_source=app_manifest", "orientation": "portrait", "display": "standalone", "background_color": "#3E4EB8", "theme_color": "#2F3BA2" }The App Manifest is a W3C Working Draft, reachable at https://www.w3.org/TR/appmanifest/
App Manifest是W3C工作草案，可在https://www.w3.org/TR/appmanifest/访问。
App Shell (The App Shell)
The App Shell is not a technology but rather a design concept. It’s aimed at loading and rendering the web app container first, and the actual content shortly after, to give the user a nice app-like impression.
App Shell不是技术，而是设计概念。 它旨在首先加载和呈现Web应用程序容器，然后不久之后加载实际内容，以使用户获得与应用程序类似的良好印象。
Take, for example, Apple’s Human Interface Guidelines’ suggestion to use a splash screen that resembles the user interface. This provides a psychological hint that was found to lower the perception that the app was taking a long time to load.
例如，苹果公司的《人机界面指南》建议使用类似于用户界面的启动画面。 这提供了一种心理暗示，从而降低了人们认为该应用需要很长时间才能加载的感觉。
快取 (Caching)
The App Shell is cached separately from the contents, and it’s setup so that retrieving the shell building blocks from the cache takes very little time.
App Shell是与内容分开缓存的，它的设置使得从缓存中检索Shell构建块只需很少的时间。
Interested in learning JavaScript? Get my ebook at jshandbook.com
有兴趣学习JavaScript吗？ 在jshandbook.com上获取我的电子书
翻译自: https://www.freecodecamp.org/news/an-introduction-to-progressive-web-apps-6aa75f32816f/
渐进式web应用程序
6891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
