构建渐进式 Web 应用 (PWA) 的最佳方法

渐进式 Web 应用（ PWA）是 Web 开发行业的最新趋势。 它们日益普及，因为它们让使用 JavaScript、HTML 和 CSS 构建 Web 应用变得简单，并为用户带来原生应用般的体验。 我将讨论在 PWA 开发过程中需要记住的所有基本和高级要点。 首先，渐进式网站与传统网站之间存在一些关键区别。渐进式 Web 应用必须能够做到以下几点：

• 采用渐进式代码库，可在大多数浏览器和设备（移动设备和桌面设备）上运行。
• 采用响应式设计，适配所有屏幕和外形尺寸。
• 利用 Service Worker 实现离线连接（https://techbeacon.com/offline-first-web-mobile-apps-top-frameworks-components）（需要 HTTPS）
• 提供类似应用程序的体验，并利用推送通知等重新吸引用户的工具。
• 利用 Web 应用清单来描述所使用的资源。目前，JavaScript 及其 UI 框架是 PWA 流行背后的主要推动力。使用 React 构建渐进式 Web 应用
• 它由 Facebook 管理和支持，Facebook 在其mrroom 网站上使用该框架，从而证明该框架经过了每天 11.8 亿用户的严格测试（https://s21.q4cdn.com/399680738/files/doc_presentations/FB-Q316-Earnings-Slides.pdf）。
• React 是 React Native ( https://facebook.github.io/react-native/ )的基础，它使您可以轻松地将使用 React 构建的应用移植到原生应用。用户界面由组件构成。这些组件可以在浏览器中渲染，也可以在服务器端（使用 Node.js）渲染，还可以在应用内部（使用 React Native）渲染。这样一来，管理需要部署到多种操作系统、浏览器和设备的应用所面临的挑战就迎刃而解了。入门指南：使用 Polymer 模板
• Polymer 模板（https://github.com/StartPolymer/progressive-web-app-template）使用 PRPL 模式来优化应用向设备的交付。它可用于：
• 为初始路线调配关键资源
• 渲染初始路线
• 预先缓存剩余路线
• 按需延迟加载并创建剩余路由使用 Webpack 管理依赖项最终测试：使用 Lighthouse 检查代码第一部分“渐进式 Web 应用”返回以下分析结果：
• 应用程序可以加载离线/不稳定的连接
• 页面加载速度很快
• 网站正在逐步改进
• 网络连接安全
• 可以提示用户将其添加到主屏幕
• 安装后的 Web 应用将以自定义启动画面启动。
• 地址栏颜色与品牌颜色相匹配。
• 设计对移动设备友好。每个小节都详细介绍了您可以添加或修改的具体技术，以提升渐进式 Web 应用的性能。例如，“应用可在离线/不稳定连接下加载”报告提供了以下详细信息：
• 是否拥有注册服务人员（并描述服务人员的定义）
• URL 在离线时返回 200 状态码。第二部分“最佳实践”详细介绍了以下内容：
• 使用现代离线功能
• 使用现代协议
• 使用现代 CSS
• 使用现代 JavaScript 功能
• 避免使用会损害用户体验的 API
• 可访问性 第三部分“性能”列出了响应式 Web 应用加载单个页面所需的时间，以及页面中每个元素的加载时间。它还包含一些工具，用于深入分析导致速度变慢的任何问题。最后一部分“高级功能”检查是否使用了最新的 HTML5/JS 功能（http://caniuse.com/）。Lighthouse的目标是测试您的网站，并指导您修复问题。其他工具 以上工具是我们团队评测过的众多渐进式 Web 应用工具中的一部分。除了上述工具之外，您可能还想考虑使用以下一些工具（或替代工具）：
• AMP（加速移动页面）——用于指导图像/JS压缩以加快网站速度的工具。谷歌大力支持AMP（甚至在搜索结果中突出显示使用AMP的移动网站）。谷歌支持AMP缓存（https://developers.google.com/amp/cache/），开发者可以免费利用AMP元素的缓存功能。
• AngularJS——谷歌的前端 JavaScript 框架，虽然比 React 更重量级，但仍然深受企业级 Java 和 .NET 开发人员的青睐（ https://techbeacon.com/node/1563）。
• Ionic 2——这个基于 AngularJS 2 的框架于 2017 年初发布，乍一看，它似乎是在 2015 年发布的初代 Ionic 框架成功的基础上构建更强大的解决方案。对于从 Cordova/PhoneGap 过渡到现代响应式 Web 应用解决方案的开发者来说，Ionic 是一个不错的平台。关键在于，渐进式 Web 应用 (PWA) 的工具仍在快速发展和完善。许多主流浏览器厂商，特别是苹果（Safari 和移动版 Safari）、谷歌（Chrome）和微软（Edge），每 1-3 个月都会定期更新。我们始终密切关注新的解决方案，并评估是否应该在我们的项目中使用它们。最终目标是利用 Web 技术提升用户体验，使其更接近原生应用。不妨看看那些已经采用渐进式 Web 应用的热门网站。

额外推荐： Udemy 上关于渐进式 Web 应用 (PWA) 的最佳课程——完整指南