PWA详解

PWA关键技术

• service worker (服务工作者)
• Manifest (网络应用清单)
• Push Notification (推送通知)

manifest.json (网络应用清单)

自定义名称

• name: {string} 应用名称，用于安装横幅、启动画面显示
• short_name: {string} 应用短名称，用于主屏幕显示

{
    "name": "这是一个完整名称",
    "short_name": "短名称",
}
复制代码

自定义图标

• icons: {Array.<ImageObject>} 应用图标列表
• 其中 ImageObject 的属性值包括：
  • src: {string} 图标 url
  • type {string=} 图标的 mime 类型，非必填项，该字段可让浏览器快速忽略掉不支持的图标类型
  • sizes {string} 图标尺寸，格式为widthxheight，宽高数值以 css 的 px 为单位。如果需要填写多个尺寸，则使用空格进行间隔，如"48x48 96x96 128x128"
  • 当PWA添加到主屏幕时，浏览器会根据有效图标的 sizes 字段进行选择。首先寻找与显示密度相匹配并且尺寸调整到 48dp(128x128) 屏幕密度的图标；如果未找到任何图标，则会查找与设备特性匹配度最高的图标；如果匹配到的图标路径错误，将会显示浏览器默认 icon。

"icons": [{
    "src": "images/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "images/icons/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }],
复制代码

设置启动网址

• 当PWA添加到主屏幕后，需要通过 start_url 去指定应用打开的网址
  • start_url: {string=} 应用启动地址

//假设 PWA 文件结构为
https://test.baidu.com
    |
    |----manifest.json
    |
    |----index.html
    |
    |----detail.html
    
//manifest.json 对应的 start_url 如果采用绝对地址的形式，其配置如下：
{
    "start_url": "/index.html",
}

//等价于如下相对地址：
{
    "start_url": "/index.html",
}
复制代码

设置作用域

• 对于一些大型网站而言，有时仅仅对站点的某些模块进行 PWA 改造，其余部分仍为普通的网页。因此需要通过 scope 属性去限定作用域，超出范围的部分会以浏览器的方式显示。
  • scope: {string} 作用域
• scope 应遵循如下规则：
  • 如果没有在 manifest 中设置 scope，则默认的作用域为 manifest.json 所在文件夹；
  • scope 可以设置为 ../ 或者更高层级的路径来扩大PWA的作用域；
  • start_url 必须在作用域范围内；
  • 如果 start_url 为相对地址，其根路径受 scope 所影响；
  • 如果 start_url 为绝对地址（以 / 开头），则该地址将永远以 / 作为根地址；

添加启动画面

• 设置图像和标题: -浏览器会从icons中选择最接近128dp(512x512)的图片作为启动画面图像。标题则直接取自name。
• 设置启动背景颜色:
  • background_color: {Color} css色值
• 设置启动显示类型:
  • display: {string}显示类型,仅当显示类型display设置为standalone或fullscreen 时，PWA启动的时候才会显示启动画面;
  • fullscreen 应用的显示界面将占满整个屏幕
  • standalone 浏览器相关UI（如导航栏、工具栏等）将会被隐藏
  • minimal-ui 显示形式与standalone类似，浏览器相关UI会最小化为一个按钮，不同浏览器在实现上略有不同
  • browser 浏览器模式，与普通网页在浏览器中打开的显示一致
• 设置主题颜色
  • 通过设置 theme_color 属性可以指定 PWA 的主题颜色。可以通过该属性来控制浏览器 UI 的颜色。比如 PWA 启动画面上状态栏、内容页中状态栏、地址栏的颜色，会被 theme_color 所影响
  • theme_color: {Color}css色值
  • 需要在页面里设置 name 为 theme-color 的 meta 标签

  <meta name="theme-color" content="#23fafa">
  复制代码

转载于:https://juejin.im/post/5c889d3ee51d45376a5d58b5