PWA浅尝辄止

前段时间看到苹果官方将对PWA提供支持,之前看到沪江也已经开始了PWA的尝试,于是尝试自学了一把,写点心得。

教程

Your First Progressive Web App

几点心得

PWA不算一种技术标准,算是一种理念,目的是为了给web应用提供接近APP的用户体验。大约有几个特性(我理解的,不保证全):

  1. 可添加HOME访问图标,支持全屏运行
  2. 离线访问
  3. 消息推送

所以,PWA是一系列技术的合集。添加图标这个靠浏览器及系统实现,离线访问依赖了Service Worker + CacheStorage API + Fetch API,消息推送Chrome支持GCM(这玩意国内肯定不好用。。。)

虽然看起来依赖的东西很多都不完备支持(实际上也是),但因为是 Progressive,不支持也没关系,也不影响原来的Web APP运行,就是没了上述的特性而已。总而言之,PWA这东西加上之后,支持的可以提升用户体验,不支持的就当什么都没发生。

示例

模仿官方的示例,我也自己写了一个。只实践了离线访问的特性。

PWA测试页面

总体流程如下:

  1. 正常加载页面
  2. 检测支持PWA? 继续3 : 啥也不做。
  3. 缓存请求及数据(图片等资源)
  4. 再加载页面资源直接从缓存加载,请求的接口数据先从缓存展示,等有返回再更新。

问题

  1. 强制需要https
  2. 测试离线页面竟然在firfox下完美,在chrome上离线有问题。。。还在找原因。
 标签: JavaScript, 前端开发, PWA

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。


  1. 游客
    1#
    游客

    到此一游

    March 2nd, 2018 at 10:38 am 回复
  2. 游客
    2#
    游客

    到此一游

    April 3rd, 2018 at 04:27 pm 回复


最新文章