渐进式Web应用清单(翻译转载)

PWA Checklist

本文转载自:众成翻译
译者:dainiel
链接:http://www.zcfy.cc/article/4200
原文:https://developers.google.com/web/progressive-web-apps/checklist

渐进式WEB应用(PWA)是可靠、快速和吸引人的,有很方法是可以把一个PWA从初级提升到高级。

为了帮助团队尽可能的提升体验,我们整理了这个checklist,其涵盖了所有我们认为构建一个基础PWA所需的,以及通过提供更好的离线体验,达到更快的交互和关心更多的重要细节,来进一步构建一个高级的PWA。

初级PWA Checklist

Lighthouse工具可以自动化验证表中的很多项,同时在简易测试页面上也很有帮助。

页面通过HTTPS加载

测试

使用Lighthouse来验证是否通过HTTPS加载

修复

实施HTTPS,通过
letsencrypt.org着手开始。

页面在平板和移动设备上有进行响应式适配

测试

  • 使用Lighthouse的Design is mobile-friendly来验证,尽管手工检查也可以。

  • 使用Mobile Friendly Test来检查

修复

试着实现响应式设计,或者适配提供一个viewport友好的页面。

离线状态时访问的URL(至少)要加载

测试

使用Lighthouse验证URL responds with a 200 when offline

修复

使用Service Worker.

Metadata提供添加到主屏幕的功能

测试

使用Lighthouse验证User can be prompted to Add to Home screen是否都是Yes。

修复

给你的项目添加Web App Manifest文件。

首次加载流畅,即使是在3G下

测试

在Nexus 5(或者类似的机器)上使用Lighthouse验证在模拟3G网络下,首次访问时可交互时间是否小于10S。

修复

  • 有许多提升性能的方法。
  • 你可以通过使用Pagespeed Insights (旨在把分数提升 >85)和WebPageTest (旨在首次访问3G下Nexus 5 Chrome的时间 <4000)的SpeedIndex来更深入理解性能。
  • 还有一些关于加载更少脚本的小建议:确保尽可能多的使用

你可能感兴趣的:(渐进式Web应用清单(翻译转载))