by Ajay NS
由Ajay NS
渐进式Web应用程序：弥合Web和移动应用程序之间的鸿沟 (Progressive Web Apps: Bridging the gap between web and mobile apps)
Unless you’ve been living under a rock, you’ve probably heard of PWAs or Progressive Web Apps. It’s a hot topic right now because its support is increasing in multiple platforms, and major companies are deciding to work on PWA versions of their web apps including Twitter, Lyft, Starbucks, NASA, and more.
除非您生活在一块石头上，否则您可能听说过PWA或Progressive Web Apps。 当前，它是一个热门话题，因为它在多个平台上的支持正在增加，并且主要公司都在决定开发其Web应用程序的PWA版本，包括Twitter，Lyft，Starbucks，NASA等。
Recently it gained more attention, when Apple announced Service Worker and Web Manifest support for Safari. Microsoft brought PWAs to the Windows store, and Chrome has experimental PWA support for all the platforms.
最近，当苹果宣布对Safari的Service Worker和Web Manifest支持时，它引起了更多关注。 微软将PWA引入了Windows商店，Chrome对所有平台都提供了实验性PWA支持。
Okay that should be enough to convince you that they’re worth going through.
好的，这足以说服您他们值得一试。
So this article is a summary of the concepts and approaches that Progressive Web Apps follow. I’ve written this from my experience building them, and I outlined this article after going through the Google Progressive Web Apps Training.
因此，本文总结了Progressive Web Apps遵循的概念和方法。 我是根据构建它们的经验写的，并在经历了Google Progressive Web Apps Training之后概述了这篇文章。
The training does a good job of explaining how everything works together, and also takes you straight into the code. Udacity’s Mobile Web Specialist course also could be of help here.
该培训很好地解释了一切如何协同工作，并且直接带您进入了代码。 Udacity的Mobile Web Specialist课程在这里也可能会有所帮助。
为什么选择PWA？ (Why PWA?)
The web is Operating System independent, is widely reachable, and is the biggest platform on the internet. Yet we see that users spend a lot more time on native apps than on the web.
Web独立于操作系统，可以访问，并且是Internet上最大的平台。 但是，我们发现用户在本机应用程序上花费的时间比在网络上花费的时间更多。
Why is this so?
为什么会这样呢？
The main reason is the smooth experience and engagement native apps provide. How about we bring these features to Web Apps? That would mean the combination of the ease of access and reach of the Web (3x as compared to native apps), along with the immersive experience of native apps.
主要原因是本机应用程序提供的流畅体验和参与度。 我们如何将这些功能引入Web Apps？ 这将意味着易于访问和访问Web的组合(与本地应用程序相比是3倍)，以及本地应用程序的沉浸式体验。
According to Alex Russell, who coined the term, PWAs are:
根据创造该术语的Alex Russell所说，PWA是：
Just websites that took all the right vitamins
只是服用了所有正确维生素的网站
These vitamins are just features of native apps that we add on to Web Apps to get the best of both worlds. Apps that you can access directly from the Web, yet work smoothly and faster, are installable, and may even have notifications.
这些维生素只是本机应用程序的功能，我们将其添加到Web Apps中以充分利用两者。 您可以直接从Web访问的应用程序，但运行平稳且速度更快，可安装，甚至可能会收到通知。
是什么让PWA变成了自己 (What makes PWAs what they are)
The key features according to Google:
根据Google的主要功能：
Reliable: Offline-first, meaning it should provide interfaces even in poor or no internet connection. But this also doesn’t mean that the app should just be able to work when offline, but rather provides undisrupted service in all network conditions.
可靠：脱机优先，这意味着即使在互联网连接不畅或没有互联网连接的情况下，它也应提供接口。 但这也不意味着该应用程序应该仅能在离线状态下工作，而可以在所有网络条件下提供不间断的服务。
Fast: Instant-loading, and smooth experiences even on loading content.
快速：即时加载，即使在加载内容时也能获得流畅的体验。
Engaging: Should provide an immersive experience, equivalent to that of a native app. Can have Push notifications, Web Payments, or Credential management and so on. Being installable is also a key feature here.
参与度：应提供与本地应用程序相同的沉浸式体验。 可以具有推送通知，Web Payments或凭据管理等。 可安装也是这里的关键功能。
But these are just concepts — how do we think about implementation from a technical point of view? Samsung Internet’s Peter O’Shaughnessy has a good approach for this:
但这只是概念-我们如何从技术角度考虑实施？ 三星互联网的Peter O'Shaughnessy为此提供了一个很好的方法：
So let’s get into these one by one:
因此，让我们一一介绍这些：
服务人员 (Service Worker)
It’s a JavaScript file that runs separately from the main browser thread in the background, intercepting network requests, caching resources, and providing a base for multiple APIs including push notifications, background sync, and caching.
它是一个JavaScript文件，与后台的主浏览器线程分开运行，拦截网络请求，缓存资源，并为包括推送通知，后台同步和缓存在内的多个API提供基础。
The ability of service workers to run separately in the background helps give a lot of functionality to the app even when closed, providing a more native app-like and engaging experience.
服务人员在后台独立运行的能力即使在关闭时也可以为应用程序提供很多功能，从而提供更原生的应用程序般的吸引人的体验。
It also helps in making the app offline-first as it acts a proxy between the server and application.
它还有助于使应用程序首先脱机，因为它充当服务器和应用程序之间的代理。
An introduction to service workers can be found here, and Google has a few helpers open sourced in their Service Worker Toolbox.
在这里可以找到服务工作者的简介，并且Google在其服务工作者工具箱中开放了一些帮助程序。
HTTPS (HTTPS)
Hypertext Transfer Protocol Secure is an adaptation for secure HTTP communications using SSL or TLS encryption. But let’s not get into that — rather, we’ll go into the reason why it’s important.
超文本传输协议安全是对使用SSL或TLS加密的安全HTTP通信的一种改进。 但是，我们不要深入探讨它，而是要探讨其重要性的原因。
Other than the fact that PWAs are expected to be highly secure, service workers that they use can intercept network requests and modify responses. This can be exploited easily to cause serious attacks. There are many services which help you get your site an SSL certificate like LetsEncrypt and SSLforfree.
除了期望PWA具有高度的安全性，他们使用的服务工作者还可以拦截网络请求并修改响应。 这很容易被利用来引起严重的攻击。 有许多服务可帮助您为站点获取SSL证书，例如LetsEncrypt和SSLforfree 。
Web App清单 (Web App Manifest)
Basically, a JSON file that gives information about how the app should look in the home screen, on the web, and so on. It can be used to add a theme color, icons for the home screen, and a splash screen to name a few.
基本上，这是一个JSON文件，提供有关应用程序在主屏幕，网络等上的外观的信息。 它可以用来添加主题颜色，主屏幕图标和启动屏幕等。
A simple manifest would look like this:
一个简单的清单如下所示：
{ "name": "HackerWeb", "short_name": "HackerWeb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "A simply readable Hacker News app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }]}It makes the app look more native-friendly with all the icons, themes, and splash screens. It’s installable with just a JSON file.
通过所有图标，主题和启动屏幕，它使该应用程序看起来更加本机友好。 只需JSON文件即可安装。
Read more about them in Mozilla’s Web Docs and generate one here.
在Mozilla的网络文档中阅读有关它们的更多信息，并在此处生成一个。
For favicons of different sizes, you can generate them from a single high quality image by using Favicon-Generator and the theme. Background colors can be picked from the app’s palette.
对于不同大小的图标，可以使用Favicon-Generator和主题从单个高质量图像生成它们。 可以从应用的调色板中选择背景颜色。
推送通知和后台同步 (Push Notifications and Background Sync)
The server delivers push messages to the service workers, which intercept and update the local state or display a notification to the user. Since they run independently as a background process, this is possible even with the app closed. Push API could help you implement this functionality.
服务器将推送消息传递给服务人员，服务人员拦截并更新本地状态或向用户显示通知。 由于它们作为后台进程独立运行，因此即使关闭应用程序也可以实现。 推送API可以帮助您实现此功能。
Background Sync API pushes periodic updates to the server so that the app can update when it’s online. Basically it makes sure all the messages are sent when there’s a good connection.
Background Sync API将定期更新推送到服务器，以便该应用程序可以在在线时进行更新。 基本上，它可以确保在连接良好时发送所有消息。
附加概念 (Additional Concepts)
Below are few approaches and standards to follow while working on building Progressive Web Apps.
以下是构建渐进式Web应用程序时应遵循的几种方法和标准。
灯塔和PWA清单 (Lighthouse and PWA Checklist)
Lighthouse is an automated tool for checking the quality of web pages by taking audits in performance, best practices, accessibility, SEO, and progressive web app standards. This is a good way to check if your app meets the standards and to see how good of a PWA it is.
Lighthouse是通过对性能，最佳实践，可访问性，SEO和渐进式Web应用程序标准进行审核来检查网页质量的自动化工具。 这是检查您的应用程序是否符合标准并查看PWA的好方法的好方法。
You can figure out what your web app lacks and how it can be improved by using the suggestions from Lighthouse audits and also this PWA Checklist by Google which lays down all the general guidelines to follow, and how to fix issues. And the best part is, right now, Lighthouse comes built into Chrome DevTools!
您可以使用Lighthouse审计的建议以及Google的PWA Checklist找出您的Web应用缺少的内容以及如何对其进行改进，该清单列出了要遵循的所有一般准则以及如何解决问题。 最棒的是，现在，Lighthouse内置在Chrome DevTools中！
存储 (Storage)
According to Addy Osmani (on the Google Chrome team), the best practice for storage to be followed in PWAs is:
根据Google Chrome小组的Addy Osmani的说法，在PWA中遵循存储的最佳做法是：
Use the Cache API for URL addressable resources (part of Service Worker). For all other data, use IndexedDB (with a Promises wrapper).
使用缓存API 用于URL可寻址资源 ( Service Worker的一部分)。 对于所有其他数据，请使用IndexedDB (带有Promises包装器)。
Both of these are asynchronous APIs which work with web/service workers. This makes them suitable for use with PWAs, unlike other methods such as localStorage.
这两个都是异步API，可与Web /服务工作者一起使用。 这使得它们适合与PWA一起使用，这与其他方法(例如localStorage)不同。
For a quick idea of what IndexedDB is, you can refer to this resource.
要快速了解什么是IndexedDB，可以参考此资源。
Put simply, it’s a large scale noSQL storage system which can store about anything from the browser. It also works as a high-performance API.
简而言之，这是一个大型的noSQL存储系统，可以存储来自浏览器的任何内容。 它也可以用作高性能API。
快取 (Caching)
The Cache API which can be used in the Service Worker allows you store responses keyed by request. This allows content to be directly loaded from Cache in the event of a poor network and it can also be further configured to load only the necessary data while relying on the cache for everything else.
可以在Service Worker中使用的缓存API允许您存储由请求键入的响应。 这样可以在网络状况不佳的情况下直接从缓存中加载内容，还可以将其进一步配置为仅加载必要的数据，而其他所有内容都依赖于缓存。
One of the popular patterns for approaches for offline-first and native-app-like experience is caching the application shell. This includes all the basic HTML, CSS, and JavaScript that make up the navigation/toolbars or whatever is common throughout the layout. So the app shell loads instantly and shows a loading screen as content is fetched, giving a streamlined experience.
脱机优先和类似本机应用程序的体验的一种流行模式是对应用程序外壳进行缓存。 这包括构成导航/工具栏的所有基本HTML，CSS和JavaScript或整个布局中常见的任何东西。 因此，应用程序外壳程序会立即加载，并在提取内容时显示加载屏幕，从而提供流畅的体验。
提取和承诺 (Fetch and Promises)
For fetching resources, the latest and recommended way is to use the Fetch API with Promises.
对于获取资源，最新的推荐方法是将Fetch API与Promises一起使用。
// A basic fetch example with promisesfetch(‘examples/example.json’).then(function(response) { // Do stuff with the response}).catch(function(error) { console.log(‘Looks like there was a problem: \n’, error);});XMLHttpRequest (XHR) requests are unnecessarily verbose and so are callbacks, which fragments code and causes confusion when long callback chains are used.
XMLHttpRequest(XHR)请求不必要地冗长，因此回调也是如此，当使用长的回调链时，这会使代码分段并引起混乱。
Promises are a better way of handling asynchronous code.
承诺是处理异步代码的更好方法。
Service Workers, Cache API, and Network requests extensively use these for performing a variety of tasks and are required at base level, hence it’s very important have a proper idea about these.
服务工作者，缓存API和网络请求将它们广泛地用于执行各种任务，并且在基础级别是必需的，因此，对它们有一个正确的认识非常重要。
响应式设计 (Responsive Design)
This not only means using responsive units of width. Content blocks should be manipulated for the needs of the layout. The app needs to look perfectly made for mobile, and overall it should look like a well-designed native app.
这不仅意味着使用宽度的响应单位。 内容块应根据布局的需要进行操作。 该应用程序需要看起来非常适合移动应用，总体而言，它应该看起来像是一款精心设计的本机应用程序。
Modern CSS layout systems such as CSS Grid (Learn with this free course by Wes Bos) or Flexbox can be of great help for managing different layouts and arrangements of different screen sizes.
诸如CSS Grid (由Wes Bos 免费学习此课程 )或Flexbox之类的现代CSS布局系统对于管理不同屏幕尺寸的不同布局和布置可能有很大的帮助。
图像优化 (Image Optimization)
One of the key features of PWAs is that they should be blazing fast, and you can see that images aren’t helping. They need to be replaced with SVGs or removed wherever possible. Web optimized formats should only be used with the lowest size possible.
PWA的主要功能之一是它们应该快速运行，并且您会发现图像无济于事。 需要用SVG替换它们，或者尽可能将其删除。 网络优化格式只能使用尽可能小的尺寸。
But it’s also important that these images be fluid and still go well with different screen sizes, as another import feature of PWAs is their native app-like experience.
但同样重要的是，这些图像必须流畅且在不同的屏幕尺寸下仍能正常显示，因为PWA的另一个导入功能是其类似于本机的应用程序体验。
故事与范例 (Stories and Examples)
结论 (Conclusion)
With every service launching an app, people often find it inconvenient to actually go to the store and download it. They hate spending that much time, mobile data, and space on the device. This often leads them to the web, which requires way less effort. But then, we see high bounce rates, because the web experience is not as smooth and optimal as the native app.
随着每项服务启动一个应用程序，人们通常会发现不方便实际去商店下载它。 他们讨厌在设备上花费那么多时间，移动数据和空间。 这通常会导致他们访问网络，而这需要更少的精力。 但是随后，我们看到了较高的跳出率，因为网络体验不如本地应用程序那么流畅和最佳。
The solution for both of these problems is Progressive Web Apps, which combine the best of the two worlds, giving the optimal user experience.
解决这两个问题的方法是Progressive Web Apps，它结合了两个方面的优点，可提供最佳的用户体验。
As mentioned, with the support for PWAs increasing greatly in all platforms, now would be the best time to get started.
如上所述，随着在所有平台上对PWA的支持大大增加，现在是开始的最佳时机。
BookMyShow’s Progressive Web App drives an 80% increase in conversions
BookMyShow的渐进式Web应用程序将转化率提高了80％
Building Flipkart Lite: A Progressive Web App
Great examples of progressive web apps in one room
进一步阅读 (Further Reading)
6 myths of Progressive Web AppsTerms like “Progressive Web Apps” (PWAs) are useful to help spread concepts, but they come with a risk of misuse and…medium.comA Tinder Progressive Web App Performance Case StudyTinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to…medium.com
渐进式Web应用程序的6个神话 诸如“渐进式Web应用程序”(PWA)之类的术语对帮助传播概念很有用，但存在误用和误用的风险 。medium.com Tinder渐进式Web应用程序性能案例研究 Tinder最近在网络。 他们的新的响应式渐进式Web应用程序 -Tinder Online- 可用于… medium.com
Converting React apps to PWAs:
将React应用程序转换为PWA：
React Progressive Web Apps — Part 1Progressive Web Apps(PWA) are gaining a lot of popularity these day, and with one of the updates this year (2017), the…medium.com
React渐进式Web应用程序—第1部分 渐进式Web应用程序(PWA)如今正变得越来越流行，而今年(2017年)的一项更新中，…
Converting Angular apps to PWAs:
将Angular应用转换为PWA：
A new Angular Service Worker — creating automatic progressive web apps. Part 1: theoryAnnouncement: There is “Part 2: practice” of this article is available.medium.com
新的Angular Service Worker —创建自动渐进式Web应用程序。 第1部分：理论 声明：本文提供“第2部分：实践”。 medium.com
Hope you enjoyed this article and found it to be a good read! You can check out all my projects on Github and don’t hesitate to reach out to me on Twitter!
希望您喜欢这篇文章，并希望它能对您有所帮助！ 您可以在Github上查看我所有的项目，并随时在Twitte r上与我联系 ！
扫一扫
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
