PWA初探
PWA初探
sunshinewyf 发表于12个月前
PWA初探
  • 发表于 12个月前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

什么是PWA

PWA是Progressive Web App的简称,主要有下面几个特点:

  • 渐进式 - 适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的。
  • 适合任何机型:桌面设备、移动设备、平板电脑或任何未来设备。
  • 连接无关性 - 能够借助于服务工作线程在离线或低质量网络状况下工作。
  • 类似应用 - 由于是在 App Shell 模型基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感。
  • 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
  • 安全 - 通过 HTTPS 提供,以防止窥探和确保内容不被篡改。
  • 可发现 - W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”。
  • 可再互动 - 通过推送通知之类的功能简化了再互动。
  • 可安装 - 用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上。
  • 可链接 - 可通过网址轻松分享,无需复杂的安装。 看上面这么多特性,感觉很高大上,其实真正深入进去,还是依托于前端最基础的html,css,js这些技术,还有manifest以及Service Worker。

PWA在中国的现状

  • 国内较重视 iOS,而 iOS 目前还不支持 PWA。
  • 国内的 Android 实为「安卓」,不自带 Chrome 是一,可能还会有其他兼容问题。
  • 国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。
  • 依赖 GCM 推送的通知不可用,Web Push Protocol 还没有国内的推送服务实现。
  • 国内 webview 环境较为复杂(比如微信),黑科技比较多。

下面是一张service Worker在各个浏览器中兼容的图片:

template

从上图可以看出,Chrome和Firefox,Opera都已经支持Service Worker,Safari2015年也提过会在5年计划中提供支持

PWA中使用的技术

Web App Manifest

web App Manifest是指通过一个清单文件像浏览器暴露web应用的元数据,其中包括名字,要缓存的icons信息以及一些页面的主题颜色等。 下面附上一个例子:


{
  "name": "pp android",
  "short_name": "pp",
  "icons":[{
     "src":"public/images/1.jpg",
     "type":"image/jpg"
  }],
  "start_url": "/index.html",
  "description": "the pp android of pwa version",
  "display": "standalone",
  "background_color": "#FFF",
  "theme_color": "#2F3BA2",
  "lang":"en"
}

这里解释一下比较生疏的字段含义:

  • scope:定义了 web 应用的浏览作用域.
  • start_url:定义了一个 PWA 的入口页面。
  • orientation:屏幕旋转
  • theme_color/background_color:主题色与背景色

manifest还有一些其他的字段,具体信息可移步这里

Service Worker

Service Workers 是谷歌 chrome 团队提出并大力推广的一项 web 技术,可以充当应用通服务器之间的代理服务器,可以用于拦截请求

Service Workers有几点需要注意的地方:

  • Service Workers 基于 Https,这是硬性条件
  • 每个 Service Worker 都有自己的作用域,它只会处理自己作用域下的请求,而 Service Worker 的存放位置就是它的最大作用域
  • Service WorkderWeb Worker 的一种,它不能够直接操作 DOM

Service Worker有一个生命周期,如下图所示:

template

关于Service Worker的一些api和用法,可以异步这里这里

下面收录一些关于PWA的文章

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 15
博文 97
码字总数 64205
×
sunshinewyf
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: