渐进式Web应用(PWA)

什么是渐进式Web应用?

渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。

渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:

  1. 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。

  2. 用户可以在安装应用之前先试用。

  3. 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。

  4. 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。

  5. 渐进式Web应用启动时可以显示一个好看的启动画面。

  6. 你可以在渐进式Web应用中提供具有全屏体验的应用。

  7. 通过系统通知等形式提高用户的粘性。

  8. 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。

  9. 轻量级安装——你只需要缓存几百KB的数据即可。

  10. 所有的数据传输必须使用安全的HTTPS连接

  11. 渐进式Web应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。

    渐进式Web应用发展的现状

    渐进式Web应用才刚刚开始发展,但实际上在国内,有些网站已经实际开始PWA的实践了,例如:微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问,那这个PWA不就是和微信小程序一样吗,对是这样,二者的目的是一致的,就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

    但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。

    而在微信这边,凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。

    PWA的原理

    第一步:使用HTTPS

     

    渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。

     

    由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址,所以在本示例中您并不需要开启HTTPS。另外,出于调试目的,您可以在启动Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查:

     

    • –user-data-dir

    • –unsafety-treat-insecure-origin-as-secure

     

    第二步:创建一个应用程序清单(Manifest)

     

    应用程序清单提供了和当前渐进式Web应用的相关信息,如:

     

    • 应用程序名

    • 描述

    • 所有图片(包括主屏幕图标,启动屏幕页面和用的图片或者网页上用的图片)

posted @ 2018-06-04 10:07  懒懒de尐彪  阅读(346)  评论(0编辑  收藏  举报