自从智能手机问世和网站越来越受欢迎以来，将两者结合起来为客户创造非凡的体验对开发者社区来说一直是一个挑战。
虽然许多工具和框架被很好地用于开发广泛可达性和性能的完美结合，但结果总是低于标准。但在 2015 年，随着 PWA 的出现，一切都发生了变化。
PWA（渐进式网页应用）
PWA 是一种独特的跨平台应用程序开发方法的结果，该方法通过移动浏览器提供安装在手机上的网页。它是本机应用程序和移动网站的混合体，并使用 CSS、HTML 和 JavaScript 等标准 Web 技术来提供类似应用程序的用户体验。
与原生应用，个PWA有更好的装载经验，能函数下线，并通过搜索引擎发现。这就是为什么某些品牌（例如阿里巴巴、Trivago 和 Twitter）在移动设备上提供无缝浏览体验的原因。
PWA 的优势
- 由于 PWA 是通过浏览器访问的，因此它与操作系统和移动设备（平板电脑和智能手机）兼容。
- 用户不必在他们的智能手机上安装 PWA。
- 从技术上讲，PWA 是一个网站，因此可以依靠 SEO 的力量来提高其搜索排名。
- PWA 让用户参与推送通知
- 它有一个应用程序类似的UI / UX，这也可以函数下线。
- 用户不必手动更新 PWA。所有更新都会自动发生。
PWA 的缺点
- PWA 消耗移动电池的速度更快，因为它运行在并非为移动环境构建的 Web 技术上。
- 尽管苹果推出了服务工作者，但 iOS 仍然不能完全支持 PWA 的所有功能。该技术更侧重于Android。
- 它无法完全访问硬件组件，例如 Face ID 和 Touch ID、应用内支付、相机访问等。
PWA 的趋势是什么？
研究发现，如果 PWA 可以满足所有移动 Web 需求，则应用程序开发和维护成本可以节省 33% 以上。凭借闪电般的页面加载速度、轻量级页面设计和快速转换等功能，PWA 已经成功地对许多品牌产生了积极影响：
- Mobify 的移动销售和收入增长了 20%
- 通过 PWA 发送的推送通知，兰蔻见证了废弃购物车 8% 的回收率
- Pinterest 将其移动网站重建为 PWA，并将其参与度提高了 60%。
PWA 所在的流行度图催生了许多可供企业选择进行 PWA 开发的框架。
1.ReactJS
由 Facebook 于 2013 年发布，React 因其广泛的 JavaScript 库而成为开发人员的热门选择。 Progressive Web App 开发框架可以创建单页和多页应用程序，并确保在单个页面内加载和更改内容。它使用 JSX 来渲染用于连接 HTML 结构的函数，从而创建 React PWA 解决方案。
优点
- React 驱动的 PWA 具有更高的灵活性，并且可以通过附加包进行扩展。
- 开发人员可以为本机应用程序部署相同的代码。
- 由于虚拟 DOM，渲染过程很快。
- 使用不同的 JavaScript 库，Progressive Web App 开发框架支持生成 API 交互、服务器端和静态呈现页面以及路由。
缺点
- 除了 JavaScript 之外，React PWA 解决方案还需要 JSX 的知识。
- 由于缺乏明确定义的方法，实施很棘手。
- 由于 JSX 的存在，从 AngularJS 迁移很困难。
- 你越追求灵活性，React PWA 解决方案中出现的功能问题就越多。
2. AngularJS
AngularJS 由 Google 于 2010 年构建，它使用 JavaScript 生态系统来构建强大且可靠的 PWA。 2017 年发布的 Angular 5 是第一个支持 PWA 的版本。 Progressive Web App 开发框架允许通过 JSON 配置创建 PWA，从而无需从头开始构建 Web 应用程序。
与需要高水平专业知识才能使用的先前版本不同，Angular 8 有两个额外的 CLI 命令，可简化将 Web 应用程序安装到移动设备上的过程。
优点
- 由于有明确定义的方法，实施很容易。
- 与 React 一样，它拥有庞大的开发人员社区。
- Google 会维护代码，以确保顺畅的操作和支持。
- CLI 的贡献缩短了框架的学习曲线。
缺点
- 使用渐进式 Web 应用程序开发框架需要具备 Typescript 知识。
- 尽管学习曲线减少了，但 AngularJS 明显比其他渐进式 Web 应用程序框架复杂。
3. VueJS
Vue 是在 MIT 许可下分发的开源前端 JavaScript 框架。主要由社区驱动，使用 Vue 很容易上手。您可以使用路由、高速渲染和针对初学者的简单编码等功能简化开发过程。
优点
- 就像 React 一样，可以使用额外的包来扩展使用 Vue JS 的应用程序。
- 它清晰而详细的文档在开发者社区中受到高度赞扬。
- Vue 支持快速产品交付——非常适合构建 MVP 和更小的解决方案。
- 它为复杂和动态的应用程序提供了能力。
缺点
- 虽然代码新颖，易学，但市面上的Vue开发者寥寥无几。
- 由于任何大公司都不拥有 Progressive Web App 开发框架，因此其支持团队很小。
- 灵活性的优势在使用时会在渐进式 Web 应用程序框架中产生问题。
4.Ionic
开源 SDK Ionic基于 Angular 和 Apache Cordova Progressive Web App 框架。它于 2013 年设计，截至今天已被用于开发超过 500 万个混合应用程序。
使Ionic成为 PWA 开发的理想选择的原因在于其庞大的 iOS 和 Android 组件库。这可用于在 WebView 的帮助下构建在设备浏览器内运行的网页。
优点
- 由于它是开源的，因此您无需购买Ionic。它的应用程序开发成本也很低，这使其成为小型企业的合适选择。
- 任何熟悉 Angular 和 Web 技术的人都可以使用Ionic 。
- 在调试工具和内置浏览器工具的帮助下，它易于维护。
- Ionic有一个广泛的插件库，用于访问不需要任何编码的 API。
缺点
- 频繁更新需要重新设计现有的 PWA，以便它们反映这些更改。随着时间的推移，这可能会变得很麻烦。
5. 苗条
就像 Vue 一样，Svelte 也是一个新的基于组件的框架。尽管写法完全不同，但它将自己定位为市场上的“反应式框架”。它是在 MIT 许可下分发的。其最新版本于 2019 年发布，立即被《纽约时报》和 GoDaddy 采纳。
优点
- Svelte 使用更精简的代码提供更快的页面加载、更小的包大小以及句法分析和执行。
- 该框架既通用又简单，因为它支持纯 CSS 以及各种 CSS 渐进式 Web 应用程序框架。
- Svelte 入门模板包括 PWA 包，其中涵盖了用于元数据社交共享的基本服务器工作人员和样板。
缺点
- 该框架非常新，这意味着社区支持几乎可以忽略不计。
- 实施可能会很棘手，因为文档还没有得到适当的开发。
- 它不支持 TypeScript。
6. 聚合物
Polymer 由 Google 开发，也是一个开源 Web 应用程序框架。它由一系列模板、PWA 工具和 Web 组件组成，使用 HTML、JS 和 JSS，使其成为一个独立的框架。
此外，Chrome 和 Opera 等多种浏览器都支持 Polymer 的工具和组件。此功能使 Polymer 具有高度的可访问性和适应性。
优点
- API 相对容易理解。
- 它带有出色的文档，可简化实施过程。
- Polymer 支持完整的 Web 应用程序堆栈支持，包括响应式布局、数据层和路由。
缺点
- Polymer 缺少办公 IDE。
- 该框架未经过 SEO 优化，这违背了构建 Web 应用程序的目的。
- 它的页面重新加载时间很长，这与 PWA 不同。
- 有时，Progressive Web App 开发框架需要调试工具，因为其中存在嵌入式开发工具。
7. PWABuilder
它由 Microsoft 创立，是一个开源 PWA 框架，它提供了一种最快的方法来为跨设备和平台响应的 Web 应用程序开发组件。 PWABuilder 拥有强大的开发人员社区，还支持 Android 和 iOS 应用程序开发。
优点
- 它将网站转换为 PWA，几乎不需要开发工作。
- PWABuilder 提供了启动开发过程的最简单方法；在输入行中输入 URL，然后分析构建 PWA 所需的组件。
- 可以下载生成的 PWA 包或使用附加功能增强 Web 应用程序。
缺点
- 灵活性的缺点在使用时会在 PWA 中产生问题。自定义 Web 应用程序并不容易！
- 自动化过程也使管理变得更加困难。
在这个时代，PWA 的价值是不可否认的，因此请确保您在规模、预期可扩展性、交互元素的存在和复杂性方面为您的业务选择完美的 Progressive Web App 开发框架。