Progressive Web App 加入主画面 : PWA 究竟加入和安装了什麽 (2)

加入主画面 (Add to Home screen)

加入主画面 (Add to Home screen) 常见的缩写为 A2HS，可以看成是让使用者将 Web App 进行 "安装" 的动作，虽然实际上只是加入一个捷径到桌面上，类似桌面版的我的最爱。

由於不是 PWA 的网站也可以做到加入主画面，那 PWA 任务就是要将现有的 A2HS 做渐进式增强，安装过後除了支援实作快取资源到本机也能够在 App 管理介面中看到。

Chrome 的使用说明

为什麽需要加入主画面 (A2HS)?

A2HS 是 Progressive Web App 设计理念的其中一部份，经过 "安装" 这个动作让 web apps 也能像 native app 有类似的使用者体验。

在加入主画面後，使用者就可以透过点击主画面上的 icon 直接去使用 Web App，PWA 的相关支援目前在各大平台的支援程度都在逐渐提高中，不过渐进式增强功能在各平台都有各自需要注意的地方。

怎麽使用加入主画面 (Add to Home screen)?

透过浏览器打开後，可以注意网址栏会多了一个可以按的按钮，依各家浏览器不同会有不同的样貌，这个按钮就是加入主画面的功能按钮。

网址列的加入至主画面 (图片来源: https://developer.mozilla.org)

在按下加入至主画面後或第一次载入网页时 (Android 8 以上) 依照各家浏览器实作不同，大多会有一个确认的视窗，按下後就完成了这个 "安装" 的动作。

确认要加入至主画面 (图片来源: https://developer.mozilla.org)

MDN 提供了一个简单轮播图片的范例，可以直接用手机打开来看，连结如下:

https://mdn.github.io/pwa-examples/a2hs/

虽然网站很简单，但其中也实作了 service worker 来快取资源让网站在安装後能够离线浏览。

self.addEventListener("install", (e) => {
  e.waitUntil(
    caches
      .open("fox-store")
      .then((cache) =>
        cache.addAll([
          "/pwa-examples/a2hs/",
          "/pwa-examples/a2hs/index.html",
          "/pwa-examples/a2hs/index.js",
          "/pwa-examples/a2hs/style.css",
          "/pwa-examples/a2hs/images/fox1.jpg",
          "/pwa-examples/a2hs/images/fox2.jpg",
          "/pwa-examples/a2hs/images/fox3.jpg",
          "/pwa-examples/a2hs/images/fox4.jpg",
        ])
      )
  );
});

目前哪些浏览器支援 A2HS?

加入主画面这个功能几乎是全面支援，除了:

iOS webview 不支援
Chromium desktop 部分支援
Firefox Mobile v58 後支援

想要了解更多详细状况，可以参考 caniuse.com，连结如下:

https://caniuse.com/web-app-manifest

加入主画面 (A2HS) 不存在哪些增强功能?

加入主画面的过程只是让 Web App 更方便存取，并没有将 App 的资源下载或快取，所以并无法让 Web App 做到离线使用。

离线使用的功能必须额外搭配 Service Worker API 来处理、储存资料和资源，像是透过 Web storage 或 IndexedDB 都是不错的解决方案。

在实作完相关快取机制後，记得要注册後才可以使用:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/pwa-examples/a2hs/sw.js").then(() => {
    console.log("Service Worker Registered");
  });
}

怎麽让 Web App 有 PWA 的增强功能 (A2HS-ready)?

各家的浏览器其实都有相关的 "安装前的审核标准"，只有在满足相关条件後，才会让浏览器支援 "渐进式增强的安装"，而非单纯的加入捷径到主画面，底下列出 Firefox 和 Chrome 的标准，也附上各平台的相关标准参考连结:

Firefox Install criteria

HTTPS
manifest 配置档必填栏位都有填，且有在 HTML head 引入
有 icon 的图片，提供在主画面中显示用

Chrome Install criteria

HTTPS
web App 没有被安装过
Meets a user engagement heuristic (使用者在这个网域有互动超过 30 秒)
有注册 service worker 且搭配 fetch handler
manifest 配置档须包含
- short_name 或 name
- icons 包含 192px 跟 512px
- start_url
- display 要填 fullscreen、standalone、minimal-ui
- prefer_related_applications 不需要，或是给 false

Manifest

这其中有一个关键就是 manifest 这个配置档，会是让浏览器辨识是否为 PWA 的一个关键，推荐的命名规则有两种

somefilename.webmanifest
manifest.json

在加入这个档案後记得在 <head> 中引入 <link rel="manifest" href="manifest.webmanifest">

那要支援 A2HS 有几个必填栏位如下:

background_color: 在加入主画面後，启动时 splash screen 的背景主视觉，在还没安装前的网址列也会改变颜色
display: 定义 App 开启後的显示方式目前有三种，各有细微差异 fullscreen、standalone、minimal-ui
icons: 主画面或是任务切换时显示
name/short_name: 安装後的 App 名称 short_name 会用在显示上有限制的地方
start_url: App 开启预设页，须注意为相对路径跟 manifest 位置相关，有填 Chrome 才会跳提示

MDN 提供的完整范例如下:

{
  "background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

恭喜!!! 看到这里就可以发现，其实很快就可以很快地做出一个初阶版的 PWA 了，所以其实 PWA 对网页开发者来说，几乎可以说是只有优点没有太多缺点。

<<: Day 02-资源管理大师IAM

>>: 予焦啦！使用暂存器除错