pwa简单说明

pwa简单说明

什么是pwa

  • PWA全称Progressive Web App,即渐进式WEB应用。
  • 本质上是一个网页,通过2种新技术可以运行在本地(手机端和桌面端)
    • App Manifest 使网页程序可以在没有记录url的使用在桌面上访问,可以实现加载动画。
    • Service Worker 是网页拥有了离线运行的基础,本质是离线缓存资源与请求数据。
    • Service Worker 实现了消息推送

大致实现方式

使用Manifest添加程序到主屏

index.html

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "Minimal PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示,如果没有设置,则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标,是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}

service worker简介

  • service worker 是chrome 团队提出的一个web api,提供可持续的后台处理能力(类似与axios)
  • 特点:
    • 在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。
    • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
    • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
    • 单独的作用域范围,单独的运行环境和执行线程(这个比较重要,不然一直是一个阻塞模式)
    • 不能操作页面 DOM。但可以通过事件机制来处理
    • 事件驱动型服务线程
  • 浏览器支持情况
    • chrome 和 firefox支持 其他基本不支持

优缺点

优点

  • app快速开发,桌面全屏运行
  • 能够做到部分源生应用功能,可以离线使用
  • 消息推送
  • 本质是网页,方便更新。(没有原生app的各种启动条件,快速响应用户指令)

缺点

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

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

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

参考链接

Manifest参考文档
chrome工程师讲解Manifest
pwa详细说明及实现方式

相关链接

纸质书籍介绍
最佳实践及博客转变模式

发表评论

电子邮件地址不会被公开。 必填项已用*标注