渐进式web应用程序_渐进式Web应用程序与加速的移动页面：有什么区别，哪种最适合您？...

渐进式web应用程序

Do you understand what PWAs and AMPs are, and which might be better for you? Let's have a look and find out.

您了解什么是PWA和AMP，哪一种可能更适合您？ 让我们看看并找出答案。

So many people own smartphones these days. This opens up endless opportunities for a business - opportunities which, however, are immediately challenged by the immense number of competitors in the mobile software market.

这些天有很多人拥有智能手机。 这为企业开辟了无尽的机会-但是，移动软件市场上众多竞争对手立即挑战了这些机会。

Mobile apps are surely more convenient than web or desktop platforms. Yet, they are not the most comfortable option that the industry offers.

移动应用肯定比Web或桌面平台更方便。 但是，它们并不是业界提供的最舒适的选择。

To hit the highest level of user satisfaction and to outrun competitors, inventive people opt in favor of progressive web apps (PWAs) or accelerated mobile pages (AMPs).

为了达到最高的用户满意度并超越竞争对手，富有创造力的人们选择了渐进式Web应用程序(PWA)或加速移动页面(AMP)。

What are these things, and how should you choose the best option? Let’s consider each one-by-one by going through these simple questions:

这些是什么东西，您应该如何选择最佳选择？ 让我们通过以下简单的问题逐一考虑：

1. What is a PWA?
   什么是PWA？
2. What is an AMP?
   什么是AMP？
3. How are they similar?
   它们有何相似之处？
4. How are they different?
   它们有何不同？
5. Why PWAs are better than web pages
   为什么PWA比网页更好
6. Why PWAs are better than native mobile
   为什么PWA比本机移动更好
7. Why AMPs are better than web pages
   为什么AMP比网页更好
8. Why AMPs are NOT better than native mobile
   为什么AMP并不比本地移动电话好

1.什么是PWA？ (1. What Is a PWA?)

A progressive web application, or PWA, unites the advantages of both web and mobile apps into a single software product. As Google declares, PWAs are “user experiences that have the reach of the web and are reliable, fast, and engaging”. It is a technology that lets you use a website as if it was a native app.

渐进式Web应用程序(即PWA)将Web和移动应用程序的优点结合到一个软件产品中。 正如Google所宣称的那样，PWA是“具有网络影响力，可靠，快速且引人入胜的用户体验”。 它是一项技术，可让您像使用本地应用程序一样使用网站。

Twitter is one of the major companies using PWAs. To install the app, you open the web version on your phone and add it to your home screen. When you open Twitter from the home screen icon, you will be opening it as a progressive web app.

Twitter是使用PWA的主要公司之一。 要安装该应用，请在手机上打开网络版本并将其添加到主屏幕。 从主屏幕图标打开Twitter时，您将其作为渐进式Web应用程序打开。

基本原理 (Fundamentals)

PWAs are a highly responsive and easily shareable solution, which can work offline. They store HTML and CSS files in the browser cache and archive them with service workers. This makes it possible to use the web page offline. Service workers are one of the three essential components of a PWA, along with the manifest file and a secure protocol HTTPS.

PWA是一种响应Swift且易于共享的解决方案，可以脱机工作。 他们将HTML和CSS文件存储在浏览器缓存中，并与服务工作者一起将其存档。 这样就可以离线使用网页。 服务人员以及清单文件和安全协议HTTPS是PWA的三个基本组件之一。

Service workers are JavaScript code components which play the role of a proxy between the network and the browser.

服务工作者是JavaScript代码组件，它们充当网络和浏览器之间的代理角色。

When you open a web page for the first time, service workers store the necessary data in the browser cache. When you open it for the second time, service workers retrieve this data from the cache even before the app checked network availability.

首次打开网页时，服务人员将必要的数据存储在浏览器缓存中。 当您第二次打开它时，服务人员甚至在应用检查网络可用性之前就从缓存中检索此数据。

Not only do they provide the ability to work offline but also they greatly boost the response time. Service workers also manage push notifications.

它们不仅提供脱机工作能力，而且还大大提高了响应时间。 服务人员还管理推送通知。

The manifest file is a JSON file containing all the information about your app. For instance, it contains data about the home screen icon of your PWA, its short name, color palette, or theme.

清单文件是一个JSON文件，其中包含有关您的应用程序的所有信息。 例如，它包含有关PWA的主屏幕图标，其短名称，调色板或主题的数据。

If you are using the Chrome browser on an Android phone, the manifest file will trigger the automatic installation of the PWA onto your phone.

如果您在Android手机上使用Chrome浏览器，则清单文件将触发将PWA自动安装到手机上。

The secure HTTPS protocol is an absolute must if you develop a progressive web app. While service workers make the very concept of a PWA possible, they are vulnerable to network errors or breaches. Service workers can intercept network requests and modify responses. To ensure data security and network security, the secure protocol needs to be used.

如果您开发渐进式Web应用程序，则绝对必须使用安全的HTTPS协议 。 尽管服务人员使PWA的概念成为可能，但他们容易受到网络错误或破坏的影响。 服务人员可以拦截网络请求并修改响应。 为了确保数据安全和网络安全，需要使用安全协议。

成功的故事 (Success stories)

Twitter is not the only company that has benefited from PWAs. Check out these case studies published by Google to see how this technology helped popular businesses succeed. Among these companies are Pinterest, Alibaba, The Weather Channel, Lancome, and The Home Depot.

Twitter不是唯一从PWA中受益的公司。 查看由Google发布的这些案例研究 ，以了解这项技术如何帮助热门企业取得成功。 在这些公司中，有Pinterest ， 阿里巴巴 ， 天气频道 ， 兰蔻和家得宝。

2.什么是AMP？ (2. What Is an AMP?)

AMP stands for accelerated mobile page. It's a mobile-friendly web page, which is designed to be loaded instantly. It is a fast and smoothly loading solution which is developed with the user experience in mind. Introduced as an open-source project, the AMP technology was integrated by Google in February 2016.

AMP代表加速的移动页面。 这是一个适合移动设备的网页，旨在立即加载。 这是一种快速且流畅的加载解决方案，是根据用户体验开发的。 AMP技术作为一个开源项目引入，于2016年2月由Google集成。

In 2016, The Guardian announced that their platform was now available as an AMP. To help readers see how it worked, they displayed the same article both as a web version and an AMP version.

2016年， 《卫报》宣布他们的平台现已可作为AMP使用。 为了帮助读者了解它是如何工作的，他们展示了与Web版本和AMP版本相同的文章。

There were some differences, but they were insignificant. But what you'd notice right away was how much faster the AMP article loaded compared to the regular web article.

虽然存在一些差异，但是它们并不重要。 但是，您会立即注意到，与常规Web文章相比，AMP文章的加载速度更快。

基本原理 (Fundamentals)

The idea of AMPs is to reduce the amount of unnecessary content and functionality so that the app displays essential content immediately. The data can be reduced up to ten times. The three essential components of AMPs are AMP HTML, AMP Components, and the AMP Cache.

AMP的想法是减少不必要的内容和功能，以便该应用程序立即显示基本内容。 数据最多可减少十倍。 AMP的三个基本组件是AMP HTML，AMP组件和AMP缓存。

AMP HTML is a simplified version of regular HTML. AMP HTML does not allow some tags and elements of HTML (for example, forms). To understand better what AMP HTML should look like, check out the required mark-up.

AMP HTML是常规HTML的简化版本。 AMP HTML不允许HTML的某些标签和元素(例如，表单)。 为了更好地了解AMP HTML的外观，请查看所需的标记 。

AMP Components are the scripts that enable you to do without JavaScript. The idea of AMP is to get rid of all JavaScript scripts as make pages load more slowly.

AMP组件是使您无需JavaScript即可执行的脚本。 AMP的想法是摆脱所有JavaScript脚本，因为这会使页面加载更加缓慢。

But this does not mean that your page should do without animations, modified layouts, analytics data, autocomplete suggestions, or ads. There is an extensive library of components that enable you to implement these and a lot of other features.

但这并不意味着您的页面应该没有动画，修改的布局，分析数据，自动完成建议或广告。 有大量的组件库 ，使您能够实现这些功能以及许多其他功能。

The AMP Cache is a proxy-based content delivery network which fetches and caches page content. AMP Cache enables you as an app owner to easily introduce page updates. It optimizes and, if needed, modifies the AMP.

AMP缓存是基于代理的内容交付网络，可获取和缓存页面内容。 AMP Cache使您作为应用程序所有者可以轻松介绍页面更新。 它可以优化并在需要时修改AMP。

成功的故事 (Success stories)

The same as with PWAs, companies are often very proud of the business advantages that AMPs offer. Here is a collection of success stories and case studies of companies that used AMPs and benefited from them. Musement, RCS MediaGroup, CNBC, The Washington Post are all companies that have implemented or plan to implement AMPs.

与PWA一样，公司通常为AMP提供的业务优势感到自豪。 这里是使用AMP并从中受益的公司的成功案例和案例研究的集合。 Musement ， RCS MediaGroup ， CNBC ， 《华盛顿邮报》都是已经实施或计划实施AMP的公司。

3. PWA和AMP有何相似之处？ (3. How Are PWAs and AMPs similar?)

Both PWAs and AMPs are methods of displaying web pages on mobile devices. Both of them are created to enhance the user experience.

PWA和AMP都是在移动设备上显示网页的方法。 两者都是为了增强用户体验而创建的。

AMPs and PWAs both help reduce page load time. While AMPs may be slightly more effective in terms of loading speed than PWAs, the difference between AMP and PWA loading times is barely noticeable.

AMP和PWA都有助于减少页面加载时间。 虽然AMP在加载速度方面可能比PWA稍微有效，但是AMP与PWA加载时间之间的差异几乎没有引起注意。

Both technologies are actively supported by Google. There is a PWA page on Google Developers and an AMP page on Google Developers as well.

谷歌积极支持这两种技术。 Google Developers上有一个PWA页面，Google Developers上也有一个AMP页面 。

There are not a lot of other similarities, but this primary similarity is essential.

其他相似之处并不多，但是主要相似之处至关重要。

Now let’s see what the differences are.

现在，让我们看看有什么区别。

4. PWA和AMP有何不同？ (4. How Are PWAs and AMPs Different?)

出现 (Appearance)

By using a PWA you do not feel like you are using a web page. PWAs look and feel like a mobile app.

通过使用PWA，您不会觉得自己在使用网页。 PWA的外观和感觉就像一个移动应用程序。

By using AMPs, you are well aware that you are using a web page because it looks the same.

通过使用AMP，您会清楚地知道您正在使用网页，因为它看起来一样。

发展历程 (Development)

In the case of PWAs, the application code is written either from scratch or with some parts of the existing code.

对于PWA，应用程序代码是从头开始编写的，或者是与现有代码的某些部分一起编写的。

In the case of AMPs, the existing code of a web page is stripped of unnecessary CSS and JS so that the web page loads faster.

在使用AMP的情况下，去除了网页现有代码中不必要CSS和JS，从而使网页加载速度更快。

用户体验 (User experience)

PWAs offer a much better user experience. They have push-notifications, a home screen icon, and no browser tabs. Also, they are much easier to download and lighter in size than a regular mobile app. PWAs load faster than a regular web version because they are embedded with App Shell. And PWAs can be used when the network connection is down.

PWA提供了更好的用户体验。 它们具有推送通知，主屏幕图标，并且没有浏览器选项卡。 而且，与常规的移动应用程序相比，它们更容易下载且尺寸更小。 由于PWA嵌入在App Shell中，因此其加载速度比常规Web版本要快。 当网络连接断开时，可以使用PWA。

AMPs offer a slightly improved user experience since the page loads faster than a regular page. Still, this is the only UX advantage that they offer. Unlike PWAs, AMPs cannot work offline.

由于页面加载速度比常规页面快，因此AMP可以提供稍微改善的用户体验。 尽管如此，这是它们提供的唯一UX优势。 与PWA不同，AMP无法离线工作。

性能 (Performance)

From an SEO standpoint, AMP wins the competition. Google favors these pages and lists them in the carousel of top stories, which can increase your click-through rate.

从SEO的角度来看，AMP赢得了竞争。 Google偏爱这些页面，并在热门新闻轮播中列出它们，这可以提高您的点击率。

PWAs, in turn, do not have a direct advantage for SEO. However, better user experience translates into higher retention rates, which helps you win with SEO.

反过来，PWA对于SEO没有直接优势。 但是，更好的用户体验可以转化为更高的保留率，从而帮助您赢得SEO。

支持 (Support)

PWAs are not supported equally on all devices, so you may find slight inconveniences when they're displayed on iOS. Also, they do not support all the hardware functionalities, such as Bluetooth, NFC, GPS, or accelerometers.

并非所有设备均同样支持PWA，因此在iOS上显示它们时可能会带来一些不便。 而且，它们不支持所有硬件功能，例如蓝牙，NFC，GPS或加速度计。

AMPs are supported by all major browsers on all devices.

所有设备上的所有主要浏览器均支持AMP。

他们最适合的应用 (Apps they're best suited for)

PWAs work perfectly for apps that require user interactions. E-commerce websites, social media, or online learning platforms where the app needs to be responsive and constantly updated can make use of this technology. This is why Twitter uses a PWA, for example.

PWA非常适合需要用户交互的应用程序。 需要对应用程序进行响应并不断更新的电子商务网站，社交媒体或在线学习平台可以利用此技术。 例如，这就是Twitter使用PWA的原因。

AMPs are more suitable for platforms with a wall of content, such as online magazines or newspapers. AMPs load content instantly, but the interaction opportunities are limited. This is why The Guardian decided to employ AMPs.

AMP更适用于内容丰富的平台，例如在线杂志或报纸。 AMP会立即加载内容，但互动机会有限。 这就是《卫报》决定聘用AMP的原因。

5.为什么PWA比网页更好 (5. Why PWAs Are Better Than Web Pages)

If you access a web page on mobile, you will have to deal with browser tabs, slow loading times, and annoying pop-ups. If your device has a relatively small screen or a slow network connection, surfing the web on it becomes unbearable.

如果您在移动设备*问网页，则必须处理浏览器选项卡，加载时间慢和烦人的弹出窗口。 如果您的设备屏幕较小或网络连接较慢，则无法在其上浏览网络。

This problem is solved by progressive web apps. In a few clicks, you install the app on your phone and get down to using it. No need to type a link, no browser tabs, and no pop-up screens. The app works fast, and it does work if the network connection is down.

通过渐进式Web应用程序可以解决此问题。 只需单击几下，即可在手机上安装该应用程序并开始使用它。 无需键入链接，无需浏览器选项卡，也无需弹出屏幕。 该应用程序运行速度很快，并且在网络连接断开的情况下也可以运行。

Alright, the benefits of this solution are evident, but it seems like native mobile apps could work perfectly instead. No, they would not. Let’s see why PWAs are better than native mobile apps.

好的，这种解决方案的好处显而易见，但似乎本机移动应用程序可以完美地运行。 不，他们不会。 让我们看看为什么PWA比本地移动应用更好。

6.为什么PWA比本地移动应用更好 (6. Why PWAs Are Better Than Native Mobile Apps)

To use a native mobile application, you have to find it in the App Store or Google Play catalogs. Then, you have to wait for some time to download it. You might not have enough free space on your device, so you'll need to find some room.

要使用本机移动应用程序，您必须在App Store或Google Play目录中找到它。 然后，您必须等待一段时间才能下载它。 您的设备上可能没有足够的可用空间，因此您需要找到一些空间。

In turn, PWAs are installed and ready to use in seconds. The file size is small (although it's bound to increase while you are using the app and it is caching). Still, the size of the cached data depends on the amount of free storage you have on your device.

反过来，将安装PWA，并在几秒钟内即可使用。 文件的大小很小(尽管在使用应用程序并缓存时一定会增加)。 尽管如此，缓存数据的大小仍取决于设备上的可用存储量。

As you can see, PWAs seem better than a web or native mobile app. But you should understand that this solution is not universal. Check out my recent article on PWA vs Native to learn when a native app is a better choice than a PWA.

如您所见，PWA似乎比Web或本地移动应用程序更好。 但是您应该了解这种解决方案不是通用的。 查看我最近关于PWA vs Native的文章，以了解何时使用本机应用程序比使用PWA更好。

7.为什么AMP优于网页 (7. Why AMPs Are Better Than Web Pages)

As mentioned above, web apps are slow and inconvenient, especially when accessed on mobile devices with small screen size or underpowered hardware.

如上所述，网络应用程序运行缓慢且不便，尤其是在屏幕尺寸较小或硬件功能不足的移动设备*问时。

By getting rid of all the web components that are unnecessary for a good user experience, accelerated mobile pages solve this problem. AMPs perform 4 times faster and use 10 times less data than regular web pages.

通过摆脱对良好用户体验而言不必要的所有Web组件，加速的移动页面可以解决此问题。 AMP的执行速度是普通网页的4倍，使用的数据则少10倍。

8.为什么AMP不比本地移动更好 (8. Why AMPs Are NOT Better Than Native Mobile)

Unfortunately, AMPs cannot be a complete substitute for native mobile apps. They cannot be installed on the home screen, they still include browser tabs, and their functionality is limited to some basic stuff.

不幸的是，AMP不能完全替代本地移动应用。 它们无法安装在主屏幕上，它们仍包含浏览器选项卡，并且其功能仅限于某些基本内容。

But for an online newspaper or for an informational website, such as WebMD, it is better to use AMPs rather than a native mobile app. These do not require any additional functionality for displaying page content.

但是对于在线报纸或信息网站(例如WebMD) ，最好使用AMP而不是本地移动应用程序。 这些不需要任何其他功能即可显示页面内容。

总结 (To Wrap Up)

Both AMPs and PWAs are powerful technologies. To sum up the results of our initial question - PWAs vs AMPs:

AMP和PWA都是强大的技术。 总结我们第一个问题的结果-PWA与AMP：

• AMPs will be easier, faster, and cheaper for you to develop
  AMP将使您开发起来更容易，更快和更便宜
• PWA will offer more benefits.
  PWA将提供更多好处。

Just remember - neither of them is a universal solution, and neither is a panacea. Even using AMPs and PWAs together may not meet all your demands. Sometimes you may need to choose more conventional types of software.

请记住-它们都不是通用解决方案，也不是万能药。 即使同时使用AMP和PWA也可能无法满足您的所有需求。 有时您可能需要选择更多常规类型的软件。

If you are still not sure what to choose, our specialists share four questions to understand if you need PWA. In short: We believe that progressive web apps are the future. Accelerated mobile pages are just too simple and limited in functionality to compete.

如果您仍然不确定要选择什么，我们的专家会分享四个问题，以了解您是否需要PWA 。 简而言之： 我们相信渐进式Web应用程序是未来。 加速的移动页面过于简单且功能有限，无法竞争。

你有一个项目的主意吗？ (Do you have an idea for a project?)

My company KeenEthics is experienced in both AMP and progressive web app development. If you are ready to change the game and start your project, feel free to get in touch.

我的公司KeenEthics在AMP和渐进式Web应用程序开发方面都有丰富的经验。 如果您准备改变游戏规则并开始您的项目，请随时与我们联系 。

聚苯乙烯 (P.S.)

The original article posted on KeenEthics blog can be found here: PWA vs AMP:  What Is the Difference and How Do You Choose?

可以在以下网址找到发布在KeenEthics博客上的原始文章： PWA与AMP：有何区别以及如何选择？

翻译自: https://www.freecodecamp.org/news/pwa-vs-amp-what-is-the-difference-and-how-do-you-choose/

渐进式web应用程序