Tinniccii

PWA简易笔记

By Tinco Chan in

以后做Progressive Web Apps (PWA) 可以按照这个清单的需求来弄：

PWA的特点

  1. 启动速度和响应速度很快；
  2. 任何浏览器都能访问；
  3. 响应式设计；
  4. 有离线访问页面；（按理说第6点才是PWA的一个终极目标，但是目前的兼容性问题不足以支持第六点。）
  5. 可安装。

（以下是非必需的）

  1. 可离线访问；（这一部分目前时PWA研究的热门，有机会我会写写自己的心得，关键是利用浏览器自带的NoSQL数据库。）
  2. 无障碍访问，即完全符合 WCAG 2.0 的约定；
  3. 可供搜索引擎搜索；
  4. 任何输入设备（键盘、鼠标或者触摸屏）都可以无障碍使用；
  5. 具有向用户询问是否请求APIs的提示；
  6. 与时俱进的代码设计；

做一个PWA

web app manifest

说白了manifest是一个告诉浏览器你的网页是一个PWA页面的JSON文件，这个文件说明这个页面在网页端设备和手机端设备各自有怎么样表现，通常manifest文件以manifest.webmanifest命名，放在项目根目录，大概就是以下这样：

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "description": "Weather forecast information",
  "icons": [
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6"
}

给用户一个安装提示界面（非必需）

1. 监听beforeinstallprompt事件

当PWA满足可安装的条件时，浏览器生命周期会启动beforeinstallprompt事件，这里你需要做的是：

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini-infobar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI notify the user they can install the PWA
  showInstallPromotion();
});

2. 程序内安装流

如果你的页面想加一个用于提示安装PWA的按钮或者UI之类的，当点击这个按钮的时候，触发beforeinstallprompt状态中的prompt()函数：

buttonInstall.addEventListener('click', (e) => {
  // Hide the app provided install promotion
  hideMyInstallPromotion();
  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
  })
});

3. 监听PWA是否安装

这里需要监听appinstalled：

window.addEventListener('appinstalled', (evt) => {
  console.log('a2hs installed');
});

3.1 监听PWA如何安装

这里有个很关键的css属性disaplay-mode，我们通过css样式的变化来表现PWA的安装状态，比如当我们安装了PWA之后，UI会变成这样：

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

当然从函数的角度去监听PWA的安装状态，这里需要matchMedia()测试display-mode的媒体查询，不过目前Safari并不支持这个，因此需要单独测试navigator.standalone：

window.addEventListener('load', () => {
  if (navigator.standalone) {
    console.log('Launched: Installed (iOS)');
  } else if (matchMedia('(display-mode: standalone)').matches) {
    console.log('Launched: Installed');
  } else {
    console.log('Launched: Browser Tab');
  }
});

4. 更新app的图标和名字

手机安卓端目前不需要考虑这个，电脑桌面端manifest还无法自动更新