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
