十四、结论和下一步
“…根据谷歌的数据，这就是应用的得分方式。正如你所看到的，它符合渐进式 Web 应用的每一个标准，这将非常符合我们的业务目标，即建立一个全球性的”
“是的，是的，”你的朋友挥手说。“很酷。很好。干得好。但是枢轴呢？”
“什么？”你问。
“你没有收到备忘录吗？一个月前我给贵公司发了一封电子邮件。”
“我不知道我有一封公司电子邮件。”
“哦。”你的朋友皱着眉头。“我以为你对科技很在行。”
“但我不知道——”
“没关系。我可以总结一下。公司已经改变了方向。聊天非常棒，但是如果我们再进一步呢？如果我们把它变成一个社交网络呢？想象一下——Facebook 的可共享性，Netflix 的视频流，Uber 的共享，在区块链上，一应俱全……”
当你走向门口时，你的朋友继续说话。
下一步
我们已经介绍了将 React 应用制作成 PWA 所需的每一步，但一如既往，还有更多需要学习的地方。
本结束章分为四个部分。首先，我们将浏览一系列有用的资源，以继续您的 PWA 之旅。然后，我们将介绍一些重要的库，它们将帮助自动化 PWA 开发的某些方面，或者将您的应用提升到下一个级别。第三，我将列出一些我最喜欢的关于开发渐进式 Web 应用的文章。最后一点，如果您接受挑战，我们将研究一些可能的扩展目标，以便您在 Chatastrophe 上进行扩展和改进。
以下许多资源是通过两个优秀的宝库发现的：awesome pwahttps://github.com/hemanth/awesome-pwa GitHub 用户Hemanth发布的，以及令人敬畏的渐进式网络应用（）https://github.com/TalAter/awesome-progressive-web-apps ）由塔拉特提供。
我们将了解以下内容：
- 学习资源以扩展您的知识
- 成功的 PWAs 案例研究
- 从中获得灵感的示例应用
- 必须阅读有关 PWAs 兴起的文章
- 可用于更轻松地构建未来 PWAs 的工具
- Chatastrophe 的拓展目标
学习资源
学习资源如下：
- 渐进式网络应用文档：谷歌关于渐进式网络应用的官方文档。这应该是你第一次接触概念或阅读最佳实践。它还提供了 PWA 好处的摘要以及到 Lighthouse 等工具的链接。
https://developers.google.com/web/progressive-web-apps/
- 您的第一个渐进式 Web 应用：一个逐步的教程，用于构建您的第一个渐进式 Web 应用，或者您的第二个渐进式 Web 应用。如果您想了解在不使用 React 的情况下构建 PWA 的效果，请查看本教程。这很好，很深入，涵盖了每一个概念。
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp
- 离线网络应用：由谷歌创建并由 Udacity 托管的免费课程，在线第一个网络应用。内容分为三个部分：为什么先脱机、服务工作器和缓存。一些部分，如服务工作器部分，可能会被审查，但本课程也会深入到 IndexedDB 以用于本地存储。
https://www.udacity.com/course/offline-web-applications--ud899
- 服务工作器入门：谷歌对服务工作器的介绍。从本书的“服务工作器”一节中可以看到很多代码，但它仍然是一个方便的资源。马特·冈特在解释基本原理方面做得很好。
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers
- 服务工作器 101：为服务工作器提供更丰富多彩的指南，此可爱的资源包含一系列图表，让您了解服务工作器的生命周期等。如果您对服务工作器不确定，请打印出来并贴在桌子上。
https://github.com/delapuente/service-workers-101
- 开始使用渐进式网络应用：Chrome 开发团队Addy Osmani的一篇博文（我们将在本参考资料部分看到他）。这是对 PWA 好处的一个很好的高级介绍，同时还介绍了一些入门的样板。
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
- 使用推送 API：推送 API 的 Mozilla 开发者网络指南。如果希望在 PWA 中使用推送通知而不依赖 Firebase 云通知，请从这里开始。
https://developer.mozilla.org/en-US/docs/Web/API/Push_API/Using_the_Push_API
- 使用缓存 API：缓存 API 的 Mozilla 开发者网络指南。这里没有太多我们在缓存一章中没有介绍的新内容，但是考虑到缓存 API 的“实验性”状态，最好再回头看看。这项技术可以从目前的状态演变而来，因此请将此作为参考。
https://developer.mozilla.org/en-US/docs/Web/API/Cache
- 增加与应用安装横幅的接触：应用安装横幅的方式和原因。一个完整的常见问题解答可以解答您可能遇到的任何问题。还有一个关于延迟提示的很好的教程，你可以使用它来巩固我们在第 9 章中介绍的概念，使我们的应用可以通过清单安装。
- 网络基础-性能：谷歌关于构建性能化网络应用的资源。应该注意的是，谷歌有一个特定的绩效理念，属于 PWA 模式，但不一定是获得更好绩效的唯一途径。这就是说，对于任何对速度感兴趣的人来说，这是一个很好的（即使有时过于技术化）资源（你应该如此！）。
https://developers.google.com/web/fundamentals/performance/
- 介绍 RAIL：一种以用户为中心的性能模型：本文以“性能建议并不短缺，是吗？”。诚然，尽管保罗·爱尔兰和保罗·刘易斯的建议比大多数人都好。本文介绍了 RAIL，并特别关注了我们为什么要遵循这一指标。答案是什么？用户应该是第一位的。
https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
- 进步网络应用时事通讯：我的免费时事通讯，让您了解 PWAs 世界的最新情况，包括教程、文章、有趣的项目等。如果你想联系，只需点击下一期的“回复”。我很想听到你的消息。
- 网站性能优化：另一个谷歌和 Udacity 课程，这次是关于性能优化的。它介绍了 DevTools，并深入探讨了关键渲染路径等概念。这门课程大概需要一周的时间。
https://www.udacity.com/course/website-performance-optimization--ud884
- 浏览器渲染优化：还有一个！本课程的副标题为“构建 60 FPS 的 Web 应用”，这（正如我们的 RAIL 指标所建议的）是一个值得追求的目标。可以将其视为前一课程的更深入版本。在此之后，您可以称自己为 web 性能专家。
https://www.udacity.com/course/browser-rendering-optimization--ud860
- 带有 React：Addy Osmani的渐进式网络应用再次出现。在这里，他带我们通过 React 构建了一个 PWA。请注意，本教程与其说是一个循序渐进的指南，不如说是一个概述，但它对我写这本书来说是一个非常宝贵的资源。他还提供了许多指向其他文章和资源的链接，以进一步扩展您的知识。
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction-50679aef2b12
- 服务工作器食谱：你想知道的关于服务工作器的一切。说真的，这是一个惊人的资源，会让你在不知不觉中成为专家。如果你对这项新技术感到兴奋，并想深入研究，这是你的机会。
- 将您的网站改造为 PWA：大多数公司不会考虑在短期内从头开始构建 PWA。相反，他们希望将 PWA 功能添加到现有的网站或应用中。这里有一个很好的入门指南，有很多截图。
https://www.sitepoint.com/retrofit-your-website-as-a-progressive-web-app/
案例研究
您是否需要说服上司尝试一个渐进式 Web 应用？请查看以下来自拥抱 PWA 世界的大公司的案例研究（Chatastrophe Inc.破产后从名单中删除）。
构建 Google I/O 2016 渐进式 Web 应用
谷歌 I/O 2016 应用（昵称爱荷华州）由 Firebase 和聚合物制成。他们就是这样做的。一个更具技术性的指南，介绍了几个先进的概念；这是了解下一级 PWA 的好方法。
https://developers.google.com/web/showcase/2016/iowa2016
AliExpress 案例研究
AliExpress 是俄罗斯访问量最大的电子商务网站。通过切换到 PWA，他们将新用户的转化率提高了 104%。他们还将在网站上花费的时间增加了 74%。这些都是巨大的数字，为 PWAs 提供了一个引人注目的商业案例。
https://developers.google.com/web/showcase/2016/aliexpress
额外电子案例研究
这对业务的改善有什么好处？销售额增加 100%。这就是通过网络推送通知到达的用户获得的额外电子产品。事实上，web 推送通知现在是 eXtra 最大的保留渠道，超过了电子邮件。用力推！
https://developers.google.com/web/showcase/2016/extra
Jumia 案例研究
网络推送通知的另一个流行元素。Jumia 的转化率提高了 9 倍。他们过去常常发送电子邮件提醒客户购物车中的物品，但未付款率很低。输入通知。
https://developers.google.com/web/showcase/2016/jumia
Konga 案例研究
您的用户关心他们的数据限制；不要让他们受苦。与他们的 PWA 相比，Konga 将数据使用率降低了 92%。最终，用户完成第一个事务所需的数据减少了 84%。考虑进入壁垒降低。
https://developers.google.com/web/showcase/2016/konga
SUUMO 案例研究
通过增加服务工作器和一些其他调整，SUUMO 团队将加载时间减少了 75%。他们还以 31%的开放率在推送通知炒作列车上获利。决定尝试 PWA 背后的故事可能听起来很熟悉；由于手机体验欠佳，该公司将用户推向了本地应用。然而，让他们下载本机应用是一项艰巨的任务，因此他们尝试了 PWA。好的学习——如果你的问题是保留，那么本地应用可能不是答案。
https://developers.google.com/web/showcase/2016/suumo
示例应用
想看看真实的 PWA 是什么样子吗？检查以下任何一项。一些还包含指向 GitHub 的链接，供您查看源代码。
岩石
以下大部分内容的渐进式 Web 应用和源代码的集合。如果你需要灵感，就让这成为你的第一站。我还鼓励您将任何 PWA 添加到列表中。
翻转板
Flipboard 是 PWA 领域最大的玩家之一，它的 PWA 纤细、快速、美观。Flipboard 有一个功能齐全的本机应用，但也有一个 PWA，以便根据用户偏好对冲他们的赌注。如果内容密集型 Flipboard 能够管理 PWAs 的性能指南，那么天空就是极限。
回应黑客新闻
曾经流行的开发者项目：黑客新闻的克隆，这里使用 React。作为一个开源项目，ReactHN 是研究如何管理具有渐进式 Web 应用基础知识的复杂前端库的一个很好的方法。我们的好朋友艾迪·奥斯马尼又在上班了。因此，ReactHN 是 Chrome 开发人员如何使用大量 JavaScript 库构建 PWA 的一个内部视图。
https://react-hn.appspot.com /
笔记
这是一个很好的渐进式 Web 应用示例，值得初学者参考。你可以直接在网站上找到 GitHub 的链接，然后浏览Simon Evans应用的结构。在桌面上，应用外壳与内容有着明显的区别，这使得这个概念特别直观。最棒的是，该应用在 Lighthouse 上的得分为 94 分。
https://sii.im/playground/notes/
啁啾
也许你听说过这个。
Twitter 是一个真正全球化应用的完美例子。他们的应用需要在任何情况下都能被各大洲的用户访问（看看 Twitter 在组织阿拉伯之春起义中所扮演的角色就知道了）。
为了实现全局可访问性，Twitter 团队设法将其应用缩减到 1MB，并添加了本文讨论的所有 PWA 功能：主屏幕安装、推送通知和脱机访问。
2048 拼图
加布里埃尔·西鲁利对最初由维沃工作室创作的 2048 益智游戏的 PWA 实现。它只适用于移动/触摸屏设备，但它是一个将游戏应用制作成快速、高效且可安装的 PWA 的示例。小心——对于新手来说，这个游戏非常容易上瘾。
GitHub 上提供了开放源代码，因此您可以查看其结构（特别是 JavaScript，它需要 10 个文件才能运行游戏）。然而，这个应用的肮脏秘密是，创造者从未真正击败过游戏。
https://2048-opera-pwa.surge.sh/
文章阅读
下面的文章包括宣言、教程和列表，都是关于 PWA 的兴起以及构建它们的最佳方法。
本地应用注定要失败
JavaScript 大师 Eric Elliott 慷慨激昂地宣布支持渐进式 Web 应用。本文深入探讨了本机应用的成本和 PWA 的好处。这是一个很好的材料，可以说服正在为本地建筑进行辩论的老板和同事。后续文章也很好。 https://medium.com/javascript-scene/native-apps-are-doomed-ac397148a2c0
一大串进步的 Web 应用提示和技巧
迪安·休谟的一袋各式 PWA 贴士。看看它，看看有没有有趣的东西，比如离线谷歌分析和测试服务工作器（我们会继续介绍更多）。 https://deanhume.com/Home/BlogPost/a-big-list-of-progressive-web-app-tips-and-tricks/10160
测试服务工作器
服务工作器是渐进式 Web 应用功能的核心和灵魂。我们想确保他们工作正常。我们如何对它们进行单元测试？ https://medium.com/dev-channel/testing-service-workers-318d7b016b19
Twitter Lite 和高性能 Web 应用以一定的规模进行响应
一位 Twitter Lite 工程师潜入他们的构建过程，挑战，并在开发 PWA 版本的 Twitter 后给出建议。尽可能接近部署大规模 PWA 的指南。 https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3
为什么应用安装横幅仍然是一件事？
这是一篇优秀的总结，总结了当你不是市场领导者时，坚持使用传统应用的成本，以及进步的 Web 应用如何解决这个问题。阅读到最后，了解一些从原生应用转向 PWA 的公司的统计数据。 https://medium.com/dev-channel/why-are-app-install-banners-still-a-thing-18f3952d349a
使用 Vue JS 的渐进式 Web 应用
Charles Bochet结合 VUEJ、Webpack 和材料设计元素构建 PWA。这是在新图书馆尝试 PWA 概念的绝佳机会。
将现有 Angular 应用转换为渐进式 Web 应用
如何将常规的角度应用转换为功能性渐进式 Web 应用？科斯昆·德尼兹带我们一步一步地走过。 https://medium.com/@cdeniz/transforming-an-existing-angular-application-to-a-progressive-web-app-d48869ba391f
推进网络
“任何网站都可以 , 而且应该 , 做一个进步的网络应用。”
杰里米·基思在他的文章中给出了“进步的网络”的主要论点，他是对的。让你的应用（或你的静态网站）进步就是为你的所有用户提供增强的体验。这是一本很好的读物，适合任何试图跳入 PWAs 世界的人。
https://medium.com/@adactio/progressing-the-web-9ab55f63f9fa
设计降级-恶劣环境下的用户体验模式
Chipotle 餐厅如何帮助改进您的网站。这篇文章并不是专门针对 PWAs 的，但正好符合渐进增强的理念，即您的网站应该适合所有人，然后根据他们的条件（网络速度、浏览器现代化等）变得越来越好。
https://uxdesign.cc/designed-degradations-ux-patterns-for-hostile-environments-7f308d819e50
使用应用外壳架构即时加载 Web 应用
对应用外壳模式的深入解释。如果您处于 PWA 的开发阶段，必须阅读。
欺骗用户，让他们认为你的网站比现在快
这是一篇精彩的文章，从用户的角度（感知时间与实际时间）开始，解释了可以用来减少应用感知加载时间的基本技术。
http://www.creativebloq.com/features/trick-users-into-thinking-your-sites-faster-than-it-is
苹果拒绝支持渐进式网络应用，这对网络的未来是一种损害
一个令人耳目一新的诚实的视角，来看看在这个时候开发一个进步的 Web 应用是什么样子，以及随之而来的与 iOS 的斗争。如果您正在考虑生产 PWA，请阅读此内容。 https://m.phillydevshop.com/apples-refusal-to-support-progressive-web-apps-is-a-serious-detriment-to-future-of-the-web-e81b2be29676
工具
希望您将来能够构建（许多）更先进的 Web 应用。以下工具将使该过程更容易、更快。
工作箱
Workbox 是“用于渐进式 Web 应用的 JavaScript 库集合”。更具体地说，它“使创建最佳服务工作器代码变得容易”，并以最有效的方式维护缓存。它很容易集成到 Webpack 中。不幸的是，文档不是很好，定制可能很困难。
尽管如此，Workbox 作为一种自动化开发方面并隐藏可能威胁到新开发人员的复杂性的方法，仍然具有巨大的前景。挑战将不是用更复杂的东西来取代这种复杂性。 https://github.com/GoogleChrome/workbox
西南预切
作为 Workbox 的一个子集，sw precache 值得单独讨论。它可以用来自动生成一个服务工作器来预缓存应用的资产。你所要做的就是将它合并到你的构建过程中（有一个 Webpack 插件）并注册产生的服务工作器。 https://github.com/GoogleChrome/sw-precache
软件工具箱
不适合初学者！sw toolbox 不是一个生成工具（如前一个工具），而是一个助手方法的集合。更令人困惑的是，谷歌 Chrome 团队的 Workbox 采用了更模块化的方法。我给你的建议是，直接与服务工作器进行交流时要感到舒适，然后，如果你有一个特定的问题，可以通过这些工具中的一个来简化，那么就去采用它。然而，不要去寻找一个工具来解决你还没有解决的问题，但是正如我所说的，看到工具出现来帮助管理复杂性是令人兴奋的。 https://github.com/GoogleChrome/sw-toolbox
离线插件
另一个使你的应用能够离线的插件。这一个使用了服务工作器，但为了获得更好的支持，需要使用 AppCache API。实现看起来简单明了。 https://github.com/NekR/offline-plugin
清单 json
从命令行自动生成 web 应用清单的工具。我的意思是，我认为我关于清单的章节很好，但如果你喜欢问答式的方法，我想也可以。
开玩笑的是，随着 Web 应用清单的发展和更多属性的出现，这个工具可能会派上用场。 https://www.npmjs.com/package/manifest-json
服务工人轨道
有 RubyonRails 项目吗？希望您的资产管道使用服务工作器缓存资产？用这个宝石。该文档对 Rails 如何处理缓存以及实现服务工作器方法的挑战进行了有趣的概述。 https://github.com/rossta/serviceworker-rails
软件离线谷歌分析
上述工作箱的一部分，但具体用于具有离线功能的应用的谷歌分析。一旦连接可用，使用此软件包向 Google Analytics 发送脱机请求。 https://www.npmjs.com/package/sw-offline-google-analytics
动态服务工人（DSW）
使用 JSON 文件配置您的服务工作器；对于服务工作器来说，这是一种非常有趣的方法，支持推送通知等关键功能（尽管只支持谷歌云消息）。 https://github.com/naschq/dsw
竖起
向站点添加两个脚本并使其脱机工作。UpUp 是服务工作器技术在简单用例中的一个漂亮实现。当然，这不是为高级用户设计的，而是为每个人介绍服务工作器技术的一个好方法。 https://www.talater.com/upup/
发电机 pwa
从命令行生成渐进式 Web 应用文件结构！这项工作仍在进行中。 https://github.com/hemanth/generator-pwa
渐进式 webapp 配置
（你猜对了）艾迪·奥斯马尼的另一个样板。如果您正在构建一个非反应式 PWA，请参阅此项目结构。 https://github.com/PolymerLabs/progressive-webapp-config
延伸目标
Chatastrophe 已经启动并运行，但它仍然非常基本。现在，我们将讨论一些挑战，您应该选择接受这些挑战，以扩展您的技能并改进我们的应用。
切换到 Preact
Preact 是 React 库的 3KB 版本。它有一个类似的 API 和功能，没有批量。使用它而不是 React 将提高我们应用的性能。如果你真的走这条路，看看网页的别名，作为一种简化转换的方式。
https://github.com/developit/preact
显示联机状态
当其他用户联机时告诉其他用户。用户界面由您决定。
打字时显示
聊天室中的一个常见功能是，它用于向您的用户显示其他人正在键入。使用 Chatastrophe，挑战将是代表多个用户同时键入。
包括文件上传
人们希望与朋友分享（可能是迷因）。给他们一个方法，这样做与文件上传系统。
创建聊天室
你的朋友设想了一个真正的全球聊天室；那个愿景是胡说八道。让我们继续，通过允许用户创建聊天室，让 Chatastrophe 变得更有用。是否有一种方法允许用户在房间之间导航并在脱机时阅读消息？
互动而不反应
阻碍性能的一个问题是，在向用户显示交互式站点之前，需要对启动做出反应。如果我们给他们一个纯 HTML 交互 shell，然后在加载时在 React 版本中进行交换，会怎么样？这里的挑战是避免覆盖用户输入，但您可以赢得一些巨大的性能分数。
构建自己的后端
我们在本教程中依赖 Firebase，以便将注意力集中在前端和 React 开发上。然而，在为 Chatastrophe 设计自己的后端 API 时，有一个巨大的学习机会。最大的好处是服务器可以呈现页面以获得额外的性能。
结束语
编程很难。学习是困难的。在学习全新概念的同时使用实验技术编程尤其困难。如果你完成了本书中的教程，甚至只是其中的某些部分，你应该为自己的成就感到骄傲。
我真诚地希望你在这里学到的东西对你的职业生涯有用。这本书对我来说也是一次激动人心的旅程。当我开始的时候，我对进步的网络应用的世界感到兴奋，但决不是一个专家。现在，我已经深入到进步的网络，我比以往任何时候都更兴奋的可能性。我希望你也有同样的感觉。
如果你想联系我，我很乐意听到你的反馈、批评、问题，或者只是交谈。你可以在推特上找到我的手柄@scottdomes，在 LinkedIn 上，在媒体上找到我的手柄@scottdomes，或者在我的网站上找到我 http://scottdomes.com ，我在这里发布了各种主题的 web 开发教程。
总结
我希望上述资源将有助于继续您的 PWA 之旅。PWA 是快速发展的 web 开发的一个令人兴奋的角落；关注前面的作者和创建者将帮助您跟上变化的步伐。
我们在这本书中涵盖了很多方面：从无到反应应用，从反应应用到渐进式 Web 应用。我们从头构建了一个完整的应用，并进行了部署，以便全世界都能看到它。我们还使其快速响应，能够处理所有类型的连接。
我希望你对最终的申请感到自豪，我希望这本书对你有用。祝你在未来的 PWA 好运，让我们继续推进网络。
版权属于：月萌API www.moonapi.com，转载请注明出处
