Progressive Web App 启动和更新机制 (6)

PWA 启动

要怎麽知道 Web App 是在 PWA 已经被安装情况下被开启的，靠 CSS 中有个 display-mode，不管透过 tab 或是安装的情况下，去测试都可以看得出来。

• display-mode 搭配 matchMedia()
• navigator.standalone: 不支援 matchMedia() 就透过属性直接判断

function getPWADisplayMode() {
  const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
  if (document.referrer.startsWith("android-app://")) {
    return "twa";
  } else if (navigator.standalone || isStandalone) {
    return "standalone";
  }
  return "browser";
}

侦测 display mode 改变

也是透过 matchMedia() 搭配 change 的事件，但还想不到什麽情境底下会发生。

window
  .matchMedia("(display-mode: standalone)")
  .addEventListener("change", (evt) => {
    let displayMode = "browser";
    if (evt.matches) {
      displayMode = "standalone";
    }
    // Log display mode change to analytics
    console.log("DISPLAY_MODE_CHANGED", displayMode);
  });

针对 display mode 改变 UI

最简单就是透过 CSS 的 media query 条件设定:

@media all and (display-mode: standalone) {
  body {
    background-color: yellow;
  }
}

更新 PWA

当想要更新 App 的名称或是 Icon 的时候，其实也是透过修改 manifest 配置档。

Chrome 桌面版

以下属性改变的时候，Chrome 会自动抓取新的 manifest 配置档, Chrome 会把新的配置暂存，等到所有视窗关闭时会进行更新安装。当安装完成时，除了 name, short_name, start_url, icons 以外的栏位都会更新。

哪几个栏位会触发更新?

• display: manifest 的配置、使用者 window/browser tab setting 同时存在会以使用者为主
• scope
• shortcuts
• theme_color

测试 manifest 更新

• about://internals/web-app

Chrome Android 版

哪几个栏位会触发更新?

• background_color
• display
• orientation
• scope
• shortcuts
• start_url
• theme_color
• web_share_target

如果 Chrome 无法从服务器取得更新版的 manifest，会延长到 30 才进行更新确认。

测试 manifest 更新

• about://webapks:　点选 "Update" 按钮