关于如何做一个“优秀网站”的清单——基础篇

前言

本文翻译自Google Developers中的文章——《Progressive Web App Checklist》

本文分为两篇，分别为基础级清单和规范级清单

一个优秀的Web App

本文中所提到的“优秀的Web App”是指现在比较流行的概念——Progressive Web App，又称PWA。

什么是Progressive Web App？

字面上直译为“先进的web应用”，而维基百科中给出的解释是——PWA是一个用来表示使用了最新技术的Web应用的术语。PWA是可靠的、迅速的、吸引人的、体验好的Web App的代名词。

为了帮助开发团队创造最好的用户体验，我们拆解出了这一份清单，其中包括了我们所能想到的如何进一步做出一个体验更完美的模范版PWA的重要细节。

1

基准版PWA的清单

LightHouse工具能够自动验证此列表中的许多项目，并有助于轻松测试指定站点。他以Chrome插件的形式存在，可以在谷歌应用商店中添加该应用，也可以下载最新版的Chrome浏览器，它会出现在Audits面板中。

下面是利用Lighthouse工具对京东网站的测试结果。他不仅能为站点打分，还可以给出适当的优化建议。

下面一一列出PWA的清单项目。

网站通过HTTPS提供

确认方法：直接用LightHouse工具进行确认，确认项目名称为Served over HTTPS。

改善方法：服务端启用HTTPS

页面在平板电脑和移动设备上自适应显示

确认方法：直接用LightHouse工具勾选验证项 Design is mobile-friendly进行确认。

改善方法：网站应该遵从响应式设计原则,或自适应地设置viewport属性。

（关于响应式页面设计，可以看下面这篇文章：

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

同时也推荐各位看一本书《响应式Web设计：HTML5和CSS3实战》By Ben Frain）

在离线状态下加载URL

确认方法：直用Lighthouse工具验证URL responds with a 200 when offline。

改善方法：利用Service Worker技术来改善网站体验

页面提供添加到主屏幕的功能

确认方法：直接用LightHouse工具勾选User can be prompted to Add to Home screen的所有选项。

改善方法：在你的项目中添加个Web App Manifest文件。

即使在3G下，初次加载也很快

确认方法：将浏览器调试工具设置成手机Nexus5（或类似的）模式，并把浏览器的网络调至成3G网络。

改善方法：

■这里有很多种方式来提供性能，如

优化内容效率、关键渲染路径等。

■您可以通过使用WebPageTest上的Pagespeed Insights（目标为85分）和SpeedIndex（目标是移动3G Nexus 5 Chrome上的<4000第一视图）来更好地了解您的表现。

■还一些技巧，主要专注于加载较少的脚本，确保使用<script async>尽可能多的脚本异步加载，并确保渲染阻止CSS被标记为这样。

■还可以在服务器上查看使用PRPL模式和工具，如PageSpeed Module。

网站可以跨浏览器正常工作

确认方法：分别在Chrome、Edge、Firefox和Safari浏览器上测试网站的表现。

改善方法：修复所有跨浏览器运行时出现的问题。

页面切换时，不应该让用户感觉像似网络阻塞

应该做到即使在网络环境很糟的情况下，页面切换也是丝般顺滑，这是提供用户体验的关键。

确认方法：在Chrome浏览器中，将网络设置成非常慢（可以设置为3G网络），然后在打开应用。每次点击应用程序中的链接/按钮，页面应立即响应。

方式如下： 在等待网络中的内容时，立即转换到下一个屏幕并显示占位符加载屏幕（或加载动画）。 当应用程序等待来自网络的响应时，显示加载指示符（或加载动画）。

改善方法：如果使用的是单页应用（客户端渲染），页面转换时应该立即完成并且在下一页显示页面骨架图，并且在内容加载时使用诸如标题或缩略图之类的任何内容。

下面的例子中，页面在从列表页进入详情页时，先用列表中的图片进行粗略渲染，等详情页的数据返回后再将数据填充进去，使得页面切换体验非常顺滑，几乎感觉不到卡顿。

每一个页面都有一个URL

确认方法：确保单个页面可以通过URL进行深度链接，并且将当前页面的链接复制，然后在一个新的标签中打开该链接，观察渲染内容是否与原来页面保持一致，这样做可以做到在社交网站中分享当前页面时，其他用户可以正常访问。

改善方法：如果构建的是单页应用，请确保客户端router可以从给定的URL重新构建到之前的应用程序状态。