From 2336a51eff4de25c2505ef5d6168f1bd804a226e Mon Sep 17 00:00:00 2001 From: Outvi V Date: Thu, 18 Mar 2021 20:01:33 +0800 Subject: feat: refresh web/progressive_web_apps/introduction --- .../progressive_web_apps/introduction/index.html | 50 +++++++++++----------- 1 file changed, 25 insertions(+), 25 deletions(-) (limited to 'files/zh-cn/web') diff --git a/files/zh-cn/web/progressive_web_apps/introduction/index.html b/files/zh-cn/web/progressive_web_apps/introduction/index.html index f455dddb09..6acaf16546 100644 --- a/files/zh-cn/web/progressive_web_apps/introduction/index.html +++ b/files/zh-cn/web/progressive_web_apps/introduction/index.html @@ -9,35 +9,35 @@ translation_of: Web/Progressive_web_apps/Introduction

什么是渐进式web应用？

-

PWA应用是指那些使用指定技术和标准模式来开发的web应用，这将同时赋予它们web应用和原生应用的特性。

+

PWA应用是指那些使用指定技术和标准模式来开发的web应用，这同时赋予它们web应用和原生应用的特性。

-

例如，web应用更加易于发现——相比于安装应用，访问一个网站显然更加容易和迅速，并且你可以通过一个链接来分享web应用。

+

例如，web应用更加易于发现：相比于安装应用，访问一个网站显然更加容易和迅速。你还可以通过一个链接来分享web应用。

-

在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行，并且相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

+

在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行；相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。

PWA赋予了我们创建同时拥有以上两种优势的应用的能力。

-

这并不是一个新概念——这样的想法在过去已经在web平台上通过许多方法出现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的Firefox OS的生态系统中离线运行和安装web应用已经成为了可能。

+

这并不是一个新概念；类似的想法已经在过去的web平台上通过各种方法实现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的Firefox OS的生态系统中，离线运行和安装web应用就已经成为了可能。

-

PWAs, 不但如此，更是提供了所有的甚至是更多的特性，来让web更加优秀。

+

除此之外，PWA还提供了更多的特性，并且无需在web已有的那些优秀特点上妥协。

什么使应用成为PWA?

-

正如前文所述，PWA不是使用一种技术创建的。它们代表了构建Web应用程序的新理念，涉及一些特定的模式，API和其他功能。如果一个Web App从一开始就是PWA，那就不那么明显了。当应用程序满足某些要求时，可以将其视为PWA，或者实现一组给定的功能：离线工作，可安装，易于同步，可以发送推送通知等。

+

正如前文所述，PWA不是只使用一种技术创建的。它代表了构建Web应用程序的新理念，涉及一些特定的模式，API和其他功能。一眼是看不出来一个 Web App 是不是 PWA 的。如果应用程序满足某些要求，或者实现了一组特定的功能，例如离线工作、可安装、易于同步、可以发送推送通知等，我们就可以将其视为PWA。

此外，还有一些工具可以按百分比衡量应用的完整性。（Lighthouse目前是最受欢迎的工具）通过实施各种技术优势，我们可以使应用程序更加渐进式，从而最终获得更高的Lighthouse 得分。但这只是一个粗略的指标。

这里有一些关键的原则来辨别一个web应用是否是一个PWA应用。它应该具有以下特点:

这么做值得吗？

@@ -45,41 +45,41 @@ translation_of: Web/Progressive_web_apps/Introduction

当然值得！只需要相对较小的代价就可以实现PWA的核心特性，这样的优势是巨大的。例如：

-

有许多知名的成功企业正在尝试PWA的方式，选择一个增强的网站体验而不是一个原生应用。事实上它们也确实从中获得了显而易见的益处。  PWA Stats 这个网站上分享了许多案例研究，这都证明了以上这些优势。

+

有许多知名的成功企业正在尝试PWA方案，选择增强的网站体验而不是原生应用。事实上它们也确实从中获得了显而易见的益处。  PWA Stats 这个网站上分享了许多案例研究，可以证明以上提及的这些优势。

-

最著名的案例可能是Flipkart Lite--印度最大的电子商务网站，在2015年重建为渐进式网络应用程序，转化率提高了70％。AliExpress PWA也看到了比web app或native app更好的结果，新用户的转换率提高了104％。鉴于其利润增长以及转换为PWA所需的工作量相对较少，优势显而易见。

+

最著名的案例可能是Flipkart Lite——印度最大的电子商务网站，在2015年重建为PWA，转化率提高了70％。AliExpress PWA也得到了比web app或native app更好的效果，新用户的转换率提高了104％。对比其利润增长率以及转换为PWA所需相对较少的工作量，PWA的优势显而易见。

-

像 couponmoto 这样的早期新兴创业公司也开始使用渐进式网络应用来推动更多的消费者参与，这表明渐进式网络应用可以帮助小公司和大公司更有效地（重新）吸引用户。

+

像couponmoto 这样的早期新兴创业公司也开始使用PWA来推动更多的消费者参与，这表明PWA可以帮助小公司和大公司更有效地（重新）吸引用户。

您可以查看 pwa.rocks 上的列表以获取更多示例。 特别值得一提的是hnpwa.com，它列出了 Hacker News 网站的示例实现（而不是通常的 TodoMVC 应用程序），您可以在其中看到各种前端框架的使用。

您甚至可以使用 PWABuilder 网站在线生成 PWA。

-

对于 service worker 和推送特定信息，请务必查看 Service Worker 手册，一个在现代站点中使用 service worker 的方法集合。

+

对于 service worker 和消息推送，请务必查看 Service Worker 手册。这是一个在现代站点中使用 service worker 的方法集合。

-

PWA是非常值得尝试的，您可以自己查看它是否适用于您的应用程序。

+

PWA非常值得一试，您可以自己查看它是否适用于您的应用程序。

浏览器支持

-

如前所述，PWA 不依赖于单个 API ，而是使用各种技术来实现提供最佳 Web 体验的目标。

+

如前所述，PWA 不依赖于单个 API ，而是使用多种技术来实现提供最佳 Web 体验的目标。

PWA 所需的关键要素是 service worker 支持。 值得庆幸的是，桌面和移动设备上的所有主流浏览器都支持 service worker。

其他功能，如 Web App Manifest，Push，Notifications和 Add to Home Screen 功能也得到了广泛的支持。 目前，Safari 对 Web App Manifest 和 Add to Home Screen 的支持有限，并且不支持 Web 推送通知。 但是，其他主流浏览器支持所有这些功能。

-

其中一些 API 是实验性的，文档仍在草稿中，但是看到像 Flipkart 和 AliExpress 这样的成功案例应该说服您尝试在 Web 应用程序中实现一些 PWA 功能。

+

其中一些 API 是实验性的，文档仍在草稿中，但是 Flipkart 和 AliExpress 这样的成功案例应该也能说服您尝试在 Web 应用程序中实现一些 PWA 功能。

-

最重要的是，您应该遵循渐进增强规则 - 仅在支持它们的情况下使用提供此类增强功能的技术，但如果不支持，则仍然提供应用程序的基本功能。 这样每个人都可以使用它，但那些使用现代浏览器的人将更多地受益于 PWA 功能。

+

最重要的是，您应该遵循渐进增强规则：在客户端支持它们的情况下使用提供此类增强功能的技术，但如果客户端不支持，则仍然提供应用程序的基本功能。 这样它对每个人都可用，但使用现代浏览器的人将更多地从 PWA 功能中受益。

一个示例应用程序

-

在本系列文章中，我们将研究一个超级简单网站的源代码，该网站列出了  js13kGames 2017 竞赛中提交给 A-Frame category 的游戏的相关信息。 您不必考虑网站上的实际内容 - 主要是学习如何在您自己的项目中使用PWA功能。

+

在本系列文章中，我们将研究一个超级简单网站的源代码，该网站列出了  js13kGames 2017 竞赛中提交给 A-Frame category 的游戏的相关信息。 您不必考虑网站上的实际内容，这主要是学习如何在您自己的项目中使用PWA功能。

您可以在 mdn.github.io/pwa-examples/js13kpwa 找到在线版本（另请参阅源代码），我们将在接下来的几篇文章中对其进行详细解释。

-- cgit v1.2.3-54-g00ecf