当前位置

PWA(渐进式网页应用)交流研讨

James Qi 在 2017年4月24日 - 13:33 提交
内容摘要:去年就听说过Google的PWA(Progressive Web Apps),后来在关注和开发微信小程序中,对“渐进式网页应用”又有了进一步的了解,并写过一篇《Google的P......

  去年就听说过Google的PWA(Progressive Web Apps),后来在关注和开发微信小程序中,对“渐进式网页应用”又有了进一步的了解,并写过一篇《Google的PWA(渐进式网页应用)是未来趋势吗?》的博文,还由此有一位机械工业出版社编辑联系我能否写一本主题为PWA的书,虽然我对出书有兴趣,但其实对PWA技术的细节和程序实现了解并不够,而且感觉这个技术在国内的兴起还需要以年来计算的时间,所以写书的事情也不急,3月份去北京参加Google AdSense研讨会的时候也与这位出版社编辑见了一面,说晚些时候再说。

  不过也许用不了那么长的时间就会兴起的,例如近期微信小程序突然发力,推出多项新功能(个人可以申请开发、支持模糊搜索、小程序码长按识别、公众号绑定小程序、小程序之间跳转推荐、小程序第三方平台等),就可能让小程序加快发展,而PWA也可能会加快普及。我们公司在春节后也招聘了专门的前端技术开发人员,做了一些webapp方面的开发尝试。上周还专门做了一次前端技术交流。

  我把Google PWA官方网站上面的内容也摘录、翻译了一下,用PPT和大家分享,现在再摘录放在下面:

一、软件、网站和应用的演进

  • 软件平台演变
    • PC单机软件时代
    • 局域网C/S软件时代
    • 互联网Web时代
    • 移动互联网App时代
    • 未来?web v.s. Native app
  • 用户对软件的需求:
    • 功能:满足功能需要
    • 便捷:方便获取
    • 快速:响应速度快
    • ...

二、Progressive Web Apps简介

  • 主要特征
    • Reliable 可靠性 - 即时加载、离线可用
    • Fast 快速 - 即时响应,平滑动画、滚动
    • Engaging 吸引力 – 类似原生app,真实用户感受

更详细说明见网站

 

三、为什么要建PWA?

  • 添加到首屏
    Worthy of being on the home screen 
  • 无论网络环境都能可靠工作
    Work reliably, no matter the network conditions 
  • 增加吸引力
    Increased engagement 
  • 提高转换率
    Improved conversions

四、PWA检查列表

  • Baseline
    • Site is served over HTTPS
    • Pages are responsive on tablets & mobile devices
    • The start URL (at least) loads while offline
    • Metadata provided for Add to Home screen
    • First load fast even on 3G
    • Site works cross-browser
    • Page transitions don't feel like they block on the network
    • Each page has a URL
  • Exemplary 
    • Indexability & social
    • User experience
    • Performance
    • Caching
    • Push notifications
    • Additional features

五、深入知识点

  • Move to HTTPS
  • Preventing Mixed Content
  • App Install Banners
  • Lighthouse
  • Get Support

六、做第一个PWA

......

  PPT的讲解还不方便用博客呈现出来,我以后再补充文字内容。

  另外,如果有对PWA技术实现很了解和对出书很感兴趣的朋友,也欢迎与我联系,我很想能找到写PWA书的合作作者,谢谢!

自由标签:

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。
验证码
本问题用于测试您是否为人类访问者,避免自动垃圾发贴。
图形验证
键入显示在图片中的字符