渐进式 Web 应用（PWA）：进入页面弹出安装应用的提示按钮

谷歌浏览器效果图预览

manifest.json

在入口的html中引入该JSON文件，文件内容根据实际配置

{
  "name": "VIDEO_H5", // 弹出提示时显示的应用名称
  "short_name": "VIDEO_H5", // 桌面显示的应用名称
  "theme_color": "#1b1b1b", 
  "background_color": "#1b1b1b", // 从桌面启动应用时，启动页颜色
  "description": "",
  "display": "fullscreen", // 全屏模式，不显示浏览器地址栏操作栏
  "start_url": "/?display_mode=fullscreen", // 启动地址
  "icons": [
    {
      "src": "./favicon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

控制安装弹窗的弹出时机

// 点击时弹出浏览器自带的添加屏幕按钮
import eventBus from '@/lib/evtbus'

let deferredPrompt: any
window.addEventListener('beforeinstallprompt', (e: any) => {
  e.preventDefault();
  deferredPrompt = e
  eventBus.on('showAddDeskPrompt', () => {
    // 显示提示，每个deferredPrompt.prompt只能使用一次
    deferredPrompt.prompt()
    deferredPrompt.userChoice.then((choiceResult: {[key: string]: any}) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('用户点击了安装，该deferredPrompt.prompt已被使用')
      } else {
        console.log('用户取消安装，该deferredPrompt.prompt仍可继续使用')
      }
      deferredPrompt = null
    })
  })
})

判断是否从桌面图标（PWA）进入

  /**
   * 判断是否从桌面图标（PWA）进入
   * 实际参数以manifest.json的start_url为准
   */ 
  const isPwa = route.query.display_mode === 'fullscreen'

重要的调试工具：谷歌浏览器的Lighthouse

利用这个工具，可以清楚自己的配置是否有出现问题，有哪些优化点