2018-10-21 08:55:00 愛碼農

在本文中，我们提供了对渐进式Web应用程序的高级讨论以及如何最好地测试PWA。

自2007年推出iPhone以来，开发人员一直在努力为移动设备全面实施基于网络的纯应用程序，但仅仅在过去的1 - 2年里，我们才看到了这方面的进展。渐进式Web应用程序是纯粹的基于Web的应用程序，其行为和感觉就像本机应用程序。它们可以作为图标添加，以全屏模式打开（不使用浏览器），具有纯粹的本机应用程序类型的用户体验，并生成通知。

另一方面，它们几乎没有占用空间，速度快，像网络应用程序一样丰富，并且改进了更新和发布的整个过程以更改功能或外观。

他们离线工作！

顾名思义，PWA或渐进式Web应用程序是Web应用程序...... 但更好。

PWA是一种Web应用程序，旨在为用户提供类似应用程序的体验，并将所有现代Web功能集中在一个位置。该技术直接从您的浏览器提供所有类似应用程序的功能，使您免于搜索，下载和更新的痛苦，就像本机应用程序一样。

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

目前，基于与PWA相关的网络上的研究和内容，Google是最高权威机构。根据Google开发人员博客和指南，如果您的应用具有以下功能，那么您可以说是，我的网络应用程序是一个渐进式Web应用程序。

渐进式：您的Web应用程序必须适用于每个用户，无论他们选择何种浏览器。
响应：由于您的Web应用程序将在浏览器中打开，因此它应该
是响应式的。
连通性独立：是的，这就是PWA中的无名英雄之一。无论互联网连接如何，您的网络应用都应该可以正常工作，或者某些功能必须在无网络或慢速网络情况下工作
类似应用程序：它应该为用户提供类似应用程序的体验。像经验的应用程序包括全屏模式，访问各种内置配件，如相机，麦克风等。
最新：您的Web应用程序必须始终是最新的，并且不应该通过请求更新来打扰用户。
安全：它应该通过HTTPS提供。
易于访问：您可以安装应用程序，或者只需单击一下即可直接从主屏幕访问它。
快速：报告显示，如果加载时间超过3秒，则有53％的用户放弃了您的网站。显然，你不希望用户回去。因此，您的应用程序应该很快。

一旦你开发了，那就是测试的时候了！

开发渐进式Web应用程序有点超出了本文的范围。如果您有兴趣，谷歌有一个很好的教程在这里。因此，一旦完成Web应用程序的开发，下一步就是测试它。

那么，在渐进式Web应用程序中测试什么呢？

在测试渐进式Web应用程序时，您需要测试以下给定点：

该站点通过HTTPS提供服务：安全性是渐进式Web应用程序中的主要问题之一，因此您需要确保通过HTTPS提供Web应用程序。如何测试：您可以使用Lighthouse by Google Developers，jitbit，seositecheckup，digicert，ssl shopper，ssl labs等来测试您的网站是否通过HTTPS提供服务。
网页具有响应性：确保您的Web应用程序在所有移动和桌面设备上显示响应行为。
离线加载：
即使您的应用处于离线状态，您的所有网页或至少部分网页都必须正常运行。您需要确保您的网络应用在离线时以200响应。如何测试：再次，由于谷歌大规模推动PWA生态系统，他们拥有一些测试PWA应用程序的最佳工具。例如灯塔。另一种选择是Wiremock。
跨浏览器兼容性：您需要测试您的Web应用程序以实现跨浏览器兼容性，以确保您的Web应用程序在所有浏览器中提供无缝的用户体验。
“添加到主屏幕”的元数据：您需要测试网络应用是否提供“添加到主屏幕”的元数据。如何测试：您可以使用Lighthouse来测试“添加到主屏幕”功能的元数据。
页面过渡应该是平滑的：过渡是感知性能的关键，因此即使在慢速互联网连接上，它们也不应该感觉迟钝。如何测试：这应该在慢速网络上手动完成。当您单击任何按钮或链接时，它应立即响应，方法是立即转换到下一个屏幕，并在等待应用程序响应时显示占位符加载屏幕或加载指示器。
每个页面都必须包含一个URL：您的Web应用程序中的每个页面都必须包含一个URL，并且所有URL必须是唯一的。如何测试：通过检查每个页面是否可通过URL链接进行测试，并可在社交媒体或其他平台上共享。也可以在新浏览器中直接打开URL。
共享性：内容应易于共享甚至可以通过全屏模式下，它应该形成卡所有的社交媒体平台。如何测试：通过从全屏模式共享内容手动测试。
Facebook：输入要共享的帖子并验证是否已生成卡片来调试URL。
Twitter：检查您的内容的卡片类型是否已添加到页面的HEAD元素：
< meta name = “twitter：card” content = “summary” />
Schema.org元数据在任何需要的地方的可用性：如果适用，您的Web应用程序应该能够创建一个丰富的卡。它有助于改善不同搜索引擎的网站外观。如何测试：
您可以使用Google的结构化数据来确保图像，描述，标题等可用。
推送通知：如果推送通知适用于您的网络应用，则不应过于激进。如何测试：测试推送通知选择加入流程。应该有明确的说明，说明网站需要什么权限以及用户应该启用推送通知的原因。