渐进式web应用程序
介绍 (Introduction)
Progressive Web Apps (PWA) are the latest trend of mobile application development using web technologies, at the time of writing (march 2018) work on Android and iOS devices with iOS 11.3 or higher, and macOS 10.13.4 or higher.
渐进式Web应用程序(PWA)是使用Web技术开发移动应用程序的最新趋势，在撰写本文时(2018年3月)，可在具有iOS 11.3或更高版本以及macOS 10.13.4或更高版本的Android和iOS设备上工作。
PWA is a term that identifies a bundle of techniques that have the goal of creating a better experience for web-based apps.
PWA是一个术语，用于标识一系列旨在为基于Web的应用程序创造更好体验的技术。
什么是渐进式Web应用程序 (What is a Progressive Web App)
A Progressive Web App is an app that can provide additional features based on the device support, providing offline capability, push notifications and 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, which 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, 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, and 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, to a point that it’s almost working like 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 an increasing support for Progressive Web Apps to the point of asking the user to add the app to the home screen when they detect a site a user is visiting is a PWA.
移动平台(在撰写本文时为Android，但不限于此)对渐进式Web应用程序提供了越来越多的支持，以至于要求用户在检测到用户正在访问的网站时将其添加到主屏幕中是PWA。
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应用程序可能是一个令人困惑的术语 ，一个好的定义是利用现代浏览器功能(如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, so if for example you have a small team or even you’re a solo developer building an app on 3 platforms, you need to spend a lot of time learning the technology but also the environment, manage different libraries, and use 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 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进行审查。
Most common platforms are Phonegap, Xamarin, Ionic Framework, and many others, and usually what you see on the page is a WebView that essentially loads a local website.
最常见的平台是Phonegap，Xamarin，Ionic Framework以及许多其他平台，通常您在页面上看到的是本质上加载本地网站的WebView。
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, and 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, effectively creating 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, meaning 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 Android-only IOS support was added in March 2019
请记住，当前Progressive Web Apps仅适用于Android IOS支持已于2019年3月添加
特征 (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, since 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 0,001% you’re not going to get much benefits 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 which 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 the Apple or Google approval to be in the users pockets, and 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 that make some of the key features possible. If you remember the original iPhone came without the option to develop native apps, and 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, and download it in the background, and provide support for push notifications to provide greater re-engagement opportunities.
服务人员的使用使应用程序始终可以拥有新鲜的内容，并在后台下载它，并为推送通知提供支持，以提供更大的重新参与机会。
Also, shareability 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?
那么，为什么用户和开发人员应该关心Progressive Web Apps？
- PWA are lighter. Native Apps can weight 200MB or more, while a PWA could be in the range of the KBs. PWA更轻。 本机应用程序的权重为200MB或更多，而PWA可能在KB范围内。
- No native platform code 没有本机平台代码
- Lower the cost of acquisition (it’s much more hard to convince a user to install an app than to visit a website to get the first-time experience) 降低获取成本(说服用户安装应用程序比访问网站来获得首次体验要困难得多)
- Significant less effort is needed to build and release updates 构建和发布更新所需的工作量大大减少
- 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 as an app as much as possible
类似于应用程序的感觉 ：感觉不像是一个网站，而是尽可能地像一个应用程序
Offline support: it will use the device storage to provide 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 online
新鲜 ：应用程序一旦在线即可更新自身和内容
Safe: uses HTTPS
安全 ：使用HTTPS
Progressive: it will work on any device, even older one, even if with less features (e.g. just as a website, not installable)
渐进式 ：即使功能较少，它也可以在任何设备上使用，即使是较旧的设备(例如，仅作为网站，无法安装)
Linkable: 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的必需部分 。
See http://caniuse.com/#feat=serviceworkers for updated data on browsers support.
有关浏览器支持的最新数据，请参见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 and speed the app rendering and improve the user experience.
Service Worker是一个JavaScript文件，充当Web应用程序和网络之间的中间人。 因此，它可以提供缓存服务并加快应用渲染速度，并改善用户体验。
Because of security reasons, only HTTPS sites can make use of Service Workers, and this is part of the reasons 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. What happens is that the first visit the web worker is installed, and then on subsequent visits to separate pages of the site will call this Service Worker.
用户首次访问应用程序时，服务工作者在设备上不可用。 发生的情况是，第一次安装了Web 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 all your web site pages header:
您在所有网站页面标题中都添加了指向清单的链接：
<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 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应用程序容器，然后在不久后加载实际内容，以使用户获得类似App的良好印象。
This is the equivalent of the Apple HIG (Human Interface Guidelines) suggestions to use a splash screen that resembles the user interface, to give a psychological hint that was found to lower the perception of the app taking a long time to load.
这等效于Apple HIG(人机界面指南)建议，即使用类似于用户界面的启动画面，以提供心理暗示，从而降低需要花费较长时间加载的应用程序的感知。
快取 (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构建块只需很少的时间。
Find out more on the App Shell at https://developers.google.com/web/updates/2015/11/app-shell
前往https://developers.google.com/web/updates/2015/11/app-shell进一步了解App Shell。
渐进式web应用程序
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
