移动端开发

移动设备忽略ios将页面中的数字识别为电话号码的方法

<head></head>中加入

<meta name="format-detection" content="telephone=no" />

 

移动端手势事件

  1. touchstart 当手指触摸屏幕时触发
  2. touchmove 当手指在屏幕滑动时不断的触发
  3. touchend 当手指从屏幕上移开时触发
  4. touchcancel 当系统停止跟踪触摸时触发

 

PWA

https://segmentfault.com/a/1190000012353473?utm_source=tag-newest

PWA全称Progressive Web App,即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题?

  • 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
  • 实现了消息推送

它解决了上述提到的问题,这些特性将使得 Web 应用渐进式接近原生 App。

PWA的优势

  • 可以将app的快捷方式放置到桌面上,全屏运行,与原生app无异
  • 能够在各种网络环境下使用,包括网络差和断网条件下,不会显示undefind
  • 推送消息的能力
  • 其本质是一个网页,没有原生app的各种启动条件,快速响应用户指令

PWA存在的问题

  • 支持率不高:现在ios手机端不支持pwa,IE也暂时不支持
  • Chrome在中国桌面版占有率还是不错的,安卓移动端上的占有率却很低
  • 各大厂商还未明确支持pwa
  • 依赖的GCM服务在国内无法使用
  • 微信小程序的竞争

尽管有上述的一些缺点,PWA技术仍然有很多可以使用的点。

  • service worker技术实现离线缓存,可以将一些不经常更改的静态文件放到缓存中,提升用户体验。
  • service worker实现消息推送,使用浏览器推送功能,吸引用户
  • 渐进式开发,尽管一些浏览器暂时不支持,可以利用上述技术给使用支持浏览器的用户带来更好的体验。

 

posted @ 2019-06-27 12:58  一粒一世界  阅读(188)  评论(0编辑  收藏  举报