diff options
| -rw-r--r-- | files/zh-cn/web/progressive_web_apps/introduction/index.html | 70 |
1 files changed, 35 insertions, 35 deletions
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 6acaf16546..476f8b4a21 100644 --- a/files/zh-cn/web/progressive_web_apps/introduction/index.html +++ b/files/zh-cn/web/progressive_web_apps/introduction/index.html @@ -1,89 +1,89 @@ --- -title: 渐进式 web 应用介绍 +title: 渐进式 Web 应用介绍 slug: Web/Progressive_web_apps/Introduction translation_of: Web/Progressive_web_apps/Introduction --- <div>{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}</div> -<p class="summary">这篇文章将会为你介绍渐进式web应用（PWA），讨论一下它们到底是什么，相比于常规的web应用，它又带来了哪些优势。</p> +<p class="summary">这篇文章将会为你介绍渐进式 Web 应用（PWA），讨论一下它们到底是什么；相比于常规的 Web 应用，它又带来了哪些优势。</p> + +<h2 id="什么是渐进式web应用？">什么是渐进式 Web 应用？</h2> -<h2 id="什么是渐进式web应用？">什么是渐进式web应用？</h2> +<p>PWA 指的是使用指定技术和标准模式来开发的 Web 应用，这同时赋予它们 Web 应用和原生应用的特性。</p> -<p>PWA应用是指那些使用指定技术和标准模式来开发的web应用，这同时赋予它们web应用和原生应用的特性。</p> +<p>例如一方面，Web 应用更加易于发现：相比于安装应用，访问一个网站显然更加容易和迅速。你还可以通过链接来分享 Web 应用。</p> -<p>例如，web应用更加易于发现：相比于安装应用，访问一个网站显然更加容易和迅速。你还可以通过一个链接来分享web应用。</p> +<p>另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行；相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。</p> -<p>在另一方面，原生应用与操作系统可以更加完美的整合，也因此为用户提供了无缝的用户体验。你可以通过安装应用使得它在离线的状态下也可以运行；相较于使用浏览器访问，用户也更喜欢通过点击主页上的图标来访问它们喜爱的应用。</p> +<p>PWA 赋予了我们创建同时拥有以上两种优势的应用的能力。</p> -<p>PWA赋予了我们创建同时拥有以上两种优势的应用的能力。</p> +<p>这并不是一个新概念；类似的想法已经在过去的 Web 平台上通过各种方法实现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的 Firefox OS 的生态系统中，离线运行和安装 Web 应用就已经成为了可能。</p> -<p>这并不是一个新概念；类似的想法已经在过去的web平台上通过各种方法实现了多次。渐进式增强和响应式设计已经可以让我们构建对移动端友好的网站。在多年以前的Firefox OS的生态系统中，离线运行和安装web应用就已经成为了可能。</p> +<p>除此之外，PWA 还提供了更多的特性，并且无需在 Web 已有的那些优秀特点上妥协。</p> -<p>除此之外，PWA还提供了更多的特性，并且无需在web已有的那些优秀特点上妥协。</p> +<h2 id="什么使应用成为_PWA">什么使应用成为 PWA?</h2> -<h2 id="什么使应用成为PWA">什么使应用成为PWA?</h2> - -<p>正如前文所述，PWA不是只使用一种技术创建的。它代表了构建Web应用程序的新理念，涉及一些特定的模式，API和其他功能。一眼是看不出来一个 Web App 是不是 PWA 的。如果应用程序满足某些要求，或者实现了一组特定的功能，例如离线工作、可安装、易于同步、可以发送推送通知等，我们就可以将其视为PWA。</p> +<p>正如前文所述，PWA 不是只使用一种技术创建的。它代表了构建 Web 应用程序的新理念，涉及一些特定的模式，API 和其他功能。一眼是看不出来一个 Web App 是不是 PWA 的。如果应用程序满足某些要求，或者实现了一组特定的功能，例如离线工作、可安装、易于同步、可以发送推送通知等，我们就可以将其视为 PWA。</p> <p>此外，还有一些工具可以按百分比衡量应用的完整性。（<a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a>目前是最受欢迎的工具）通过实施各种技术优势，我们可以使应用程序更加渐进式，从而最终获得更高的Lighthouse 得分。但这只是一个粗略的指标。</p> -<p>这里有一些关键的原则来辨别一个web应用是否是一个PWA应用。它应该具有以下特点:</p> +<p>辨别一个 Web 应用是否是 PWA 有一些关键原则。一个 PWA 应该具有以下特点：</p> <ul> - <li><a href="/en-US/Apps/Progressive/Advantages#Discoverable">Discoverable</a>, 可以通过搜索引擎发现。</li> - <li><a href="/en-US/Apps/Progressive/Advantages#Installable">Installable</a>, 可以出现在设备的主屏幕。</li> - <li><a href="/Apps/Progressive/Advantages#Linkable">Linkable</a>, 可以简单地通过URL分享。 </li> - <li><a href="/en-US/Apps/Progressive/Advantages#Network_independent">Network independent</a>, 可以在离线状态或者是在网速很差的情况下运行。</li> - <li><a href="/en-US/Apps/Progressive/Advantages#Progressive">Progressive</a>, 在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。</li> - <li><a href="/en-US/Apps/Progressive/Advantages#Re-engageable">Re-engageable</a>, 无论何时有新的内容，都可以发送通知。</li> - <li><a href="/en-US/Apps/Progressive/Advantages#Responsive">Responsive</a>, 在任何具有屏幕和浏览器的设备上可以正常使用——包括手机、平板电脑、笔记本、电视、冰箱等。</li> - <li><a href="/en-US/Apps/Progressive/Advantages#Safe">Safe</a>, 在用户、应用和服务器之间的连接是安全的，第三方无法访问你的敏感数据。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Discoverable">可发现（Discoverable）</a>, 可以通过搜索引擎发现。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Installable">可安装（Installable）</a>, 可以出现在设备的主屏幕。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Linkable">可链接（Linkable）</a>, 可以简单地通过 URL 分享。 </li> + <li><a href="/en-US/Apps/Progressive/Advantages#Network_independent">独立于网络（Network independent）</a>, 可以在离线状态或者是在网速很差的情况下运行。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Progressive">渐进式（Progressive）</a>, 在老版本的浏览器仍旧可以使用，在新版本的浏览器上可以使用全部功能。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Re-engageable">可重入（Re-engageable）</a>, 无论何时有新的内容，都可以发送通知。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Responsive">响应式（Responsive）</a>, 在任何具有屏幕和浏览器的设备上可以正常使用——包括手机、平板电脑、笔记本、电视、冰箱等。</li> + <li><a href="/en-US/Apps/Progressive/Advantages#Safe">安全（Safe）</a>, 在用户、应用和服务器之间的连接是安全的，第三方无法访问你的敏感数据。</li> </ul> <h3 id="这么做值得吗？">这么做值得吗？</h3> -<p>当然值得！只需要相对较小的代价就可以实现PWA的核心特性，这样的优势是巨大的。例如：</p> +<p>当然值得！只需要相对较小的代价就可以实现 PWA 的核心特性，而优势却是巨大的。例如：</p> <ul> - <li>减少应用安装后的加载时间, 通过<a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>来进行缓存, 以此来节省带宽和时间。</li> + <li>减少应用安装后的加载时间, 通过 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> 来进行缓存, 以此来节省带宽和时间。</li> <li>当应用有可用的更新时，可以只更新发生改变的那部分内容。相比之下，对于一个原生应用而言，即便是最微小的改动也需要强制用户去再次下载整个应用。</li> <li>外观和使用感受与原生平台更加融为一体——应用图标被放置在主屏幕上，应用可以全屏运行等。</li> <li>凭借系统通知和推送消息与用户保持连接，对用户产生更多的吸引力，并且提高转换效率。</li> </ul> -<p>有许多知名的成功企业正在尝试PWA方案，选择增强的网站体验而不是原生应用。事实上它们也确实从中获得了显而易见的益处。 <a href="https://www.pwastats.com/">PWA Stats</a> 这个网站上分享了许多案例研究，可以证明以上提及的这些优势。</p> +<p>有许多知名的成功企业正在尝试PWA方案，选择增强的网站体验而不是原生应用。事实上它们也确实从中获得了显而易见的益处。<a href="https://www.pwastats.com/">PWA Stats</a> 这个网站上分享了许多案例研究，可以证明以上提及的这些优势。</p> -<p>最著名的案例可能是<a href="https://stories.flipkart.com/flipkart-lite/">Flipkart Lite</a>——印度最大的电子商务网站，在2015年重建为PWA，转化率提高了70％。<a href="https://m.aliexpress.com/">AliExpress</a> PWA也得到了比web app或native app更好的效果，新用户的转换率提高了104％。对比其利润增长率以及转换为PWA所需相对较少的工作量，PWA的优势显而易见。</p> +<p>最著名的案例可能是印度最大的电子商务网站 <a href="https://stories.flipkart.com/flipkart-lite/">Flipkart Lite</a>，它在 2015 年重建为 PWA，转化率提高了70%。<a href="https://m.aliexpress.com/">AliExpress</a> PWA 也得到了比 Web 应用或原生应用更好的效果，新用户的转换率提高了104%。对比一下利润增长率和转换为 PWA 所需相对较少的工作量，PWA 的优势显而易见。</p> -<p>像<a href="https://www.couponmoto.com/">couponmoto</a> 这样的早期新兴创业公司也开始使用PWA来推动更多的消费者参与，这表明PWA可以帮助小公司和大公司更有效地（重新）吸引用户。</p> +<p>像 <a href="https://www.couponmoto.com/">couponmoto</a> 这样的早期新兴创业公司也开始使用 PWA 来推动更多的消费者参与，这表明 PWA 可以帮助小公司和大公司更有效地（重新）吸引用户。</p> -<p>您可以查看 <a href="https://pwa.rocks/">pwa.rocks</a> 上的列表以获取更多示例。 特别值得一提的是<a href="https://hnpwa.com/">hnpwa.com</a>，它列出了 Hacker News 网站的示例实现（而不是通常的 TodoMVC 应用程序），您可以在其中看到各种前端框架的使用。</p> +<p>您可以查看 <a href="https://pwa.rocks/">pwa.rocks</a> 上的列表以获取更多示例。特别值得一提的是 <a href="https://hnpwa.com/">hnpwa.com</a>，它列出了 Hacker News 网站的示例实现（而不是随处可见的 TodoMVC 应用程序），您可以在其中看到各种前端框架的使用。</p> <p>您甚至可以使用<a href="https://www.pwabuilder.com/"> PWABuilder</a> 网站在线生成 PWA。</p> -<p>对于 service worker 和消息推送，请务必查看 <a href="https://serviceworke.rs/">Service Worker 手册</a>。这是一个在现代站点中使用 service worker 的方法集合。</p> +<p>对于 Service Worker 和消息推送，请务必查看 <a href="https://serviceworke.rs/">Service Worker 手册</a>。这是一个在现代站点中使用 Service Worker 的方法集合。</p> -<p>PWA非常值得一试，您可以自己查看它是否适用于您的应用程序。</p> +<p>PWA 非常值得一试，您可以自己查看它是否适用于您的应用程序。</p> <h2 id="浏览器支持">浏览器支持</h2> -<p>如前所述，PWA 不依赖于单个 API ，而是使用多种技术来实现提供最佳 Web 体验的目标。</p> +<p>如前所述，PWA 不依赖于单个 API，而是使用多种技术来实现提供最佳 Web 体验的目标。</p> -<p><span class="tlid-translation translation" lang="zh-CN"><span title="">PWA 所需的关键要素是 </span></span><a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a><span class="tlid-translation translation" lang="zh-CN"><span title=""> 支持。</span> <span title="">值得庆幸的是，桌面和移动设备上的</span></span><a href="https://jakearchibald.github.io/isserviceworkerready/">所有主流浏览器都支持</a> service worker<span class="tlid-translation translation" lang="zh-CN"><span title="">。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">PWA 所需的关键要素是 </span></span><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker</a><span class="tlid-translation translation" lang="zh-CN"><span title=""> 支持。</span> <span title="">值得庆幸的是，桌面和移动设备上的</span></span><a href="https://jakearchibald.github.io/isserviceworkerready/">所有主流浏览器都支持</a> Service Worker<span class="tlid-translation translation" lang="zh-CN"><span title="">。</span></span></p> -<p><span class="tlid-translation translation" lang="zh-CN"><span title="">其他功能，如</span></span> <a href="/en-US/docs/Web/Manifest">Web App Manifest</a><span class="tlid-translation translation" lang="zh-CN"><span title="">，</span></span><a href="/en-US/docs/Web/API/Push_API">Push</a><span class="tlid-translation translation" lang="zh-CN"><span title="">，</span></span><a href="/en-US/docs/Web/API/Notifications_API">Notifications</a><span class="tlid-translation translation" lang="zh-CN"><span title="">和</span></span> <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to Home Screen</a> <span class="tlid-translation translation" lang="zh-CN"><span title="">功能也得到了广泛的支持。</span> <span title="">目前，Safari 对 </span></span><a href="/en-US/docs/Web/Manifest">Web App Manifest</a><span class="tlid-translation translation" lang="zh-CN"><span title=""> </span></span><span class="tlid-translation translation" lang="zh-CN"><span title="">和</span></span> <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Add to Home Screen </a><span class="tlid-translation translation" lang="zh-CN"><span title="">的支持有限，并且不支持 Web 推送通知。</span> <span title="">但是，其他主流浏览器支持所有这些功能。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">至于其他功能，像是</span></span><a href="/Web/API/Push_API">推送通知</a><span class="tlid-translation translation" lang="zh-CN"><span title="">、</span></span><a href="/en-US/docs/Web/API/Notifications_API">通知功能</a><span class="tlid-translation translation" lang="zh-CN"><span title="">和</span></span><a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加至主屏</a><span class="tlid-translation translation" lang="zh-CN"><span title="">功能也得到了广泛的支持。</span> <span title="">目前，Safari 对 </span></span><a href="/en-US/docs/Web/Manifest">Web App Manifest</a><span class="tlid-translation translation" lang="zh-CN"><span title=""> </span></span><span class="tlid-translation translation" lang="zh-CN"><span title="">和</span></span> <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">添加指主屏</a><span class="tlid-translation translation" lang="zh-CN"><span title="">的支持有限，并且不支持 Web 推送通知。</span> <span title="">但是，其他主流浏览器都支持这里的所有功能。</span></span></p> <p><span class="tlid-translation translation" lang="zh-CN"><span title="">其中一些 API 是实验性的，文档仍在草稿中，但是 Flipkart 和 AliExpress 这样的成功案例应该也能说服您尝试在 Web 应用程序中实现一些 PWA 功能。</span></span></p> -<p><span class="tlid-translation translation" lang="zh-CN"><span title="">最重要的是，您应该遵循渐进增强规则：在客户端支持它们的情况下使用提供此类增强功能的技术，但如果客户端不支持，则仍然提供应用程序的基本功能。</span> <span title="">这样它对每个人都可用，但使用现代浏览器的人将更多地从 PWA 功能中受益。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">最重要的是，您应该遵循渐进增强理念：在客户端支持它们的情况下使用提供此类增强功能的技术，但如果客户端不支持，则仍然提供应用程序的基本功能。</span> <span title="">这样，应用对每个人都可用，但使用现代浏览器的人能更多地从 PWA 功能中受益。</span></span></p> <h2 id="一个示例应用程序">一个示例应用程序</h2> -<p><span class="tlid-translation translation" lang="zh-CN"><span title="">在本系列文章中，我们将研究一个超级简单网站的源代码，该网站列出了 </span></span> <a href="http://2017.js13kgames.com/">js13kGames 2017</a> <span class="tlid-translation translation" lang="zh-CN"><span title="">竞赛中提交给 </span></span><a href="http://js13kgames.com/aframe">A-Frame category</a> <span class="tlid-translation translation" lang="zh-CN"><span title="">的游戏的相关信息。</span> <span title="">您不必考虑网站上的实际内容，这主要是学习如何在您自己的项目中使用PWA功能。</span></span></p> +<p><span class="tlid-translation translation" lang="zh-CN"><span title="">在本系列文章中，我们将研究一个超级简单网站的源代码，该网站列出了 </span></span> <a href="http://2017.js13kgames.com/">js13kGames 2017</a> <span class="tlid-translation translation" lang="zh-CN"><span title="">竞赛中提交给 </span></span><a href="http://js13kgames.com/aframe">A-Frame category</a> <span class="tlid-translation translation" lang="zh-CN"><span title="">的游戏的相关信息。</span> <span title="">您不必考虑网站上的实际内容，这里主要是学习如何在您自己的项目中使用 PWA 功能。</span></span></p> <p>您可以在 <a href="https://mdn.github.io/pwa-examples/js13kpwa/">mdn.github.io/pwa-examples/js13kpwa</a> 找到在线版本（另请<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">参阅源代码</a>），我们将在接下来的几篇文章中对其进行详细解释。</p> -<p>现在，让我们转到本系列的第二部分，我们将看看我们的示例应用程序的结构。</p> +<p>现在，让我们转到本系列的第二部分，我们来看看这个示例应用程序的结构。</p> <p>{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}</p> |