现在是测试我们刚刚通过 LightHouse 进行的干预的时候了。
在此阶段,我们将分析仅将 PWA 分数返回给我们的网站。
我们到达要转换的网站的 URL
让我们打开Chrome浏览器开发者控制台
从控制台菜单中,我们转到 AUDITS 项
开发人员/审核控制台
我们单击“运行审核”按钮。网站分 土耳其电话格式 析将开始(我们停留在要分析的网站页面上)
评估完成后,我们将收到一个屏幕,其中包含唯一可用的 PWA 条目。
开发者控制台/LightHouse 结果
如果您严格按照从站点到 PWA 的转换过程进行操作,您应该能够看到屏幕上全是“绿点”,这意味着您已经成功了。
但是,如果您注意到一些“红点”,则说明有问题。
LightHouse 将为您提供一切解释,确定需要纠正的要点以及要应用的解决方案。
但是现在,我们将检查清单和 Service Worker 是否正常工作并被浏览器解释。
让我们一步一步来:
开发者/应用程序控制台
2. 在左侧,我们会发现一个附加菜单,其中包含清单、Service Worker 和清除缓存项(以及现阶段我们不感兴趣的其他项)。这三项将帮助我们了解 PWA 的正确功能。
3. 让我们转到 Manifest 项,检查通过代码编辑器输入的数据是否已被控制台正确解码(名称、短名称、起始 URL、背景颜色、方向、显示和我们之前准备的图标集)
4. 现在让我们转到 Service Worker 项并检查它是否运行良好。我们可以理解这一点,因为如果 Service Worker 正常工作,我们会在状态项下有一个绿点,并显示相关的“已激活并正在运行”。
开发人员/服务工作者控制台
5. 最后,我们将检查 Service Worker 中存在的内容是否已存储在浏览器缓存中。
开发者控制台/缓存控制
6. 但是,如果我们在控制台上收到错误,我建议逐条检查本文中提出的干预措施。由于语法错误,脚本可能无法正常工作。
但是,如果我们选择安装插件,则可能不会出现任何类型的错误,并且我们将能够以相同的方式测试 PWA 的功能。