渐进式 web应用 vue_渐进式Web应用简介

大多数开发人员至少听说过有关渐进式Web应用程序的嗡嗡声。 这些得到了Google等科技公司的广泛支持，并Swift成为多设备Web应用程序的规范 。

但是， 典型的Web应用程序与渐进式 Web应用程序之间到底有什么区别 ？

对于开发人员来说， 这是一个很大的差异 。 渐进式Web应用程序使用现代Web API在浏览器中创建本机应用程序体验 。 这意味着开发人员无需使用混合框架即可构建快速加载的动态应用。

在本指南中，我将介绍渐进式Web应用程序的基础知识 ，一些主要功能以及如何开始构建自己的应用程序。

什么是渐进式Web应用程序？

渐进式Web应用程序（或PWA） 利用Web浏览器API在任何设备上的浏览器中创建本机应用程序体验。

最终，渐进式Web应用程序包含了少数技术 ，开发人员可以使用它们来创建功能强大的类似于本机的应用程序。 许多来自Web API，例如Service Workers API或Push API 。

• 具有完全的移动响应能力 。
• 坚持逐步完善 。
• 能够在智能手机和平板电脑上本地安装 。
• 使用服务工作者，无需Internet即可脱机运行 。
• 使用应用程序外壳 将内容与功能分开 。
• 建立在HTTPS上以提高安全性。
• 在Google搜索中可发现 。
• 具有类似于应用程序的动态页面，但是每个页面仍然具有自己的URL 。

如果您打算构建一个小型Web应用程序 ，则可以尝试创建Progressive Web App。 这带有一些学习曲线，但是您对用户体验的控制要多得多 。

让我们深入了解渐进式Web应用程序的基础知识，并了解使它们产生变化的原因。

服务人员

每一个Progressive Web App都需要服务人员 。 这些就像交通官员一样 ，负责协调交通往何处，数据来自何处以及如何组织和缓存所有数据。

简而言之，服务工作者作为JavaScript文件运行，并在您的Web应用程序后台运行。 每当用户执行事件时 ，它都会调用Service Worker脚本以提取数据，保存数据或同时执行两者！

使用Service Worker API 对于运行脱机支持的PWA是必不可少的 。 这是在视图之间传输数据以及从本地数据库请求数据的方式 。 但是，这大部分是您通过PWA项目学习的高级知识。

看一看《 服务工作者食谱》，了解基本片段和现场演示 。 通过研究他人所做的事情并将其克隆到自己的应用程序中，这是一种绝佳的学习方法。

如果您希望构建渐进式Web应用程序，请从Service Worker API开始 。 只需修改一下，然后在本地设置一个简单的演示即可。 这将为以后构建自定义应用程序功能和全部通过服务工作者运行的页面奠定基础。

对于初学者指南和详细的代码段 ，我特别推荐以下资源：

• 服务人员入门
• 服务工作者入门
• 服务人员示例：自定义脱机页面示例

应用程序外壳

大多数本机应用程序遵循应用程序外壳体系结构 ，其中数据和应用程序代码与UI完全分开 。 应用程序外壳程序可以本地缓存，因此每个页面的加载速度都非常快。

这保持了相同的“本机应用程序”感觉，其中界面始终保持可见，但是每次加载内容/功能时都不同 。 在Google Developers网站上查看此页面 ，以了解有关应用程序外壳模型的更多信息。

大多数应用程序都有一个非常简单的应用程序外壳 ，因此您在设计体系结构时应考虑简单性 。

通常，应用程序外壳程序具有以下主要元素 ：

• 顶部导航栏链接。
• 刷新按钮（可选）。
• 页面背景容器。

您可以在此处找到有关Google的I / O渐进式Web App Shell架构的很好的案例研究。 他们还提供了一些技巧，可帮助您构建自己的shell架构，对其进行缓存并为每个页面自动提取它 。

将shell架构视为您将在每个页面上使用的所有静态UI元素 。 这些应与其余代码分开，并进行缓存以方便重用。 另外，请查看Google的主题简介 ，其中包含大量代码片段，以帮助您入门 。

在线和离线支持

大多数本机应用程序都可以在没有Internet的情况下正常运行 。 渐进式Web应用程序应遵循相同的行为。

通过服务人员，您可以为每个页面使用JSON代码构建本地缓存 。 这样，用户可以在本地浏览您的Web应用程序 。 您可能还包括一个清单文件，以定义图标，启动屏幕和其他启动设置。

如果您正在使用Service Worker API，请看一下属于同一框架的Cache API 。 通常，这是在本地存储数据并稍后从服务人员访问 数据的最佳方法。

您还可以使用Lighthouse （一种免费工具，用于检查功能符合性和对PWA技术的支持） 测试任何Web应用程序 。

PWA始终需要通过Service Worker API 进行脱机支持 ，因此它们可以在低连接状态下工作 。 Lighthouse是测试脱机支持以及许多其他功能的最佳方法。

现场例子

学习实时PWA并查看其工作方式是学习的好方法。 但是，渐进式Web应用程序市场仍在兴起 ，因此许多最好的应用程序分散在Internet的各个角落 。

但是，感谢PWA的岩石画廊 ，我整理了一些惊人的示例来展示PWA的真正功能。

1.货币转换器

这个相当简单的货币换算器采用汇率并计算全球一吨货币之间的当前差额 。

您会注意到该Web应用程序具有完全响应能力 ， 支持touch和自动更新，而无需刷新页面。

这些只是您在任何典型的渐进式Web应用程序中期望的功能。 尽管此应用程序确实连接到JSON文件以检查当前汇率，但也可以将其保存在本地以供离线使用。

2.英语口音

我只是喜欢这个Web应用程序，因为它既独特又设计得非常好。 English Accents Map 在线策划视频 ，人们携带来自美国和英国特定地区的口音。

通过单击地图上的任意位置，您可以聆听人们在世界不同地区如何发音某些单词。 该应用程序闪电般快速，并且已在GitHub上开源 ，任何人都可以检出。

内部组件在具有Firebase和与Google Maps的API连接的 React / Redux上运行。 绝对是初学者学习和学习的简单例子。

3. Flipkart

最后，最令人惊讶的是，让我们看看Flipkart网站 。 实际上，这家完整的电子商务商店是Progressive Web App 。

它具有充分的响应能力 ， 可以动态加载页面 。 页面URL附加到浏览器，因此您可以像典型网站一样复制/粘贴和共享它们。

这很容易是我见过的最复杂的PWA 。 我很惊讶开发人员能够在网络上为所有用户创建无缝体验，更不用说支持本地脱机存储了。

而且，虽然我找不到整个Flipkart源代码的存储库，但GitHub上有一个Flipkart页面 ，其开发人员团队提供了较小的代码段 。

了解更多

渐进式Web应用非常受欢迎，随着越来越多的开发人员从本机/混合应用切换过来，渐进式Web应用必将获得发展。

每年都有一次名为“ 渐进式Web应用程序峰会”的峰会 ，他们在YouTube上发布视频，您可以免费观看。 这是无需支付门票即可获取专业知识的好方法。

但是，如果您正在寻找更详细的PWA编码指南，请务必查看以下教程：

• 使用React构建您的第一个渐进式Web应用
• 使用Polymer构建渐进式Web应用

翻译自: https://www.hongkiat.com/blog/progressive-web-apps/