Web App Checklist

Mobile Web App checklist

目标： 高性能Mobile Web App

一、UX和UI

• 操作节目与边框之间留空隙：

防止操作过程中，触发系统缺省行为，有些是无法disable的。 如： 向下划过上边框会触发系统状态信息，

• 清除 300ms的click延时(从用户click到发出event之间有300ms延时)

Android4.4+已经清除了， 但是IOS还没有（可以用fastClick）。

FastClick检测到touchend之后，马上发出event

• 让top bar真正固定， 不要被弹出的软键盘顶出去（IOS 8已经解决了问题）

** 用absolute容器分别裹住内容和top bar， 作为sibling，并且令内容overflow scroll.

这样， scroll的不是body， 而是内容的div。

副作用：

** 双击页面， 不在scroll到页面顶部

** back回来的时候，页面scroll的位置丢失了， 补救措施， 给内容div添加下面样式：

-webkit-overflow-scrolling: touch;

overflow: scroll

• 禁止overscroll （i.e. 划过底线和顶边）

在cordova/phonegap的 xml config中添加：

<preference name="DisallowOverscroll" value="true" />

或者参考下面的JS

https://github.com/luster-io/prevent-overscroll/blob/master/index.html

• 阻止copy，paste菜单出现，

在IOS上，给不应该被选中的元素添加样式：

user-select: none;

-{prefix}-user-select: none;

-webkit-touch-callout: none;

在android上

if(navigator.userAgent.match(/Android/i))

noContextMenu.addEventListener('contextmenu', function (e) { e.preventDefault() })

• 亮显的元素颜色美化，

例如：替换系统缺省的灰色为green

* {

-webkit-tap-highlight-color: rgba(0,0,0,0);

}

button:active {

color: green;

}

• 如果此web App已经被添加到homepage， 就可以消除浏览器的底部和底部菜单

<!-- android -->

<meta name="mobile-web-app-capable" content="yes">

<!-- iOS -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">

<meta name="apple-mobile-web-app-title" content="My App">

并禁止顶部菜单再被触发：

document.addEventListener('touchmove', function(e){

e.preventDefault();

}

document.addEventListener('gesturestart', function (e) {

e.preventDefault();

});

• 少用display: none， 以避免重绘带来的闪烁;

用opacity：0， 或者，用translate3d(-9999px, 0, 0)移出屏幕.

• 不要自己写scroll，不会比浏览器的scroll更smooth， 它有native的支持

• 禁止用户缩放

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

• 测试back， forward按钮， 不要简单地禁止它

• 打开IE的 CleratType，让字体更好看一点

二、Performance优化

• 从Day 1就重视， 避免太慢无法优化

• 提高速度的核心是避免重绘和重排版，常见的措施如下：
  • Opacity和transform之外的参数动画慎用， 它导致重绘和重排版
  • 用GPU加快绘制速度：通过添加下面的属性
    • transform: translateZ ， 或者
    • will-change: transform
    • will-change: opacity.
    • 禁止用jQuery的animate 或fade，而用纯CSS动画，Velocityjs或 Impulse，因为：
      • JQuery使用setInterval而不是 requestAnimationFrame驱动动画,
      • JQuery的 css动画功能差.
    • 在Client端， 不要resize图像， 尽可能下载1：1的图像。因为：
      • 浏览器中存储resize的image的空间非常小， 一旦满了，就会溢出旧的，从而导致反复地计算，页面上出现空白区域， 或者scroll变得不流畅。
    • 先完成绘制， 再动画
      • 将动画完全包裹在requestAnimationFrame里面， 因为它是在paint完成之后，才调用的。
• 不要在scroll和touch中迫使浏览器重新计算Style，改到requestAnimationFrame中。
  • 如果修改style， 则浏览器马上重新计算Style， 虽然不立即绘制
  • 在mobile上的scroll是用scroll thread处理的，一个完全独立于JS的thread。而这个scroll thread只有等待scroll event处理完成之后才执行（以便于处理 scrollTop， preventDefault()等要求）， 所有， 长时间的event处理，将会迟滞scroll。

三、Homescreen

• 像Native App一样， 在用户的屏幕有个图标？可以直接点开？

<!-- android -->

<link rel="shortcut icon" sizes="196x196" href="icon-196x196.png">

<!-- iOS -->

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

• 修改homescreen上图标的标题？（IOS）

<meta name="apple-mobile-web-app-title" content="Luster">

• 有1个splash screen？ （IOS）

<link rel="apple-touch-startup-image" href="img/l/splash.png">

四、离线可用

• ServiceWorker
• LocalStorage， indexDB

from： https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html