PWA無(wú)法彈出添加左面提示功能

百度很多教程都說(shuō)pwa應(yīng)用可以彈出一個(gè) 《是否添加到桌面》這樣的提示框
也按照l(shuí)avas框架的文檔應(yīng)用添加橫幅去設(shè)置，還是達(dá)不到效果，請(qǐng)問(wèn)一下我究竟那里寫(xiě)錯(cuò)了

需求：彈出提示框，提示是否添加應(yīng)用到桌面

測(cè)試：（打包后使用express開(kāi)啟本地服務(wù)器測(cè)試的）

chrome瀏覽器點(diǎn)擊 add to homescreen 可以添加網(wǎng)頁(yè)到桌面
ios: 10.0.2 safari可以添加到桌面,uc無(wú)法添加網(wǎng)頁(yè)到桌面，兩者都無(wú)法彈出提示框
安卓: 沒(méi)有測(cè)試

技術(shù)：

前端： vue
后端： node

代碼：

manifest.json

{
  "name": "web_app",
  "short_name": "web_app",
  "scope": "/",
  "description": "The app that helps you understand PWA", //用于描述應(yīng)用
  "display": "standalone", // 定義開(kāi)發(fā)人員對(duì)Web應(yīng)用程序的首選顯示模式。standalone模式會(huì)有單獨(dú)的
  "start_url": "/", // 應(yīng)用啟動(dòng)時(shí)的url
  "theme_color": "#313131", // 桌面圖標(biāo)的背景色
  "background_color": "#313131", // 為web應(yīng)用程序預(yù)定義的背景顏色。在啟動(dòng)web應(yīng)用程序和加載應(yīng)用程序的內(nèi)容之間創(chuàng)建了一個(gè)平滑的過(guò)渡。
  "icons": [ // 桌面圖標(biāo)，是一個(gè)數(shù)組
    {
      "src": "/static/images/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "/static/images/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }, {
      "src": "/static/images/apple-touch-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

sw-register.js

navigator.serviceWorker && navigator.serviceWorker.register('/service-worker.js').then(() => {
  //
})

// 「彈出添加到主屏對(duì)話框」事件
window.addEventListener('beforeinstallprompt', event => {
  // 這個(gè) `event.userChoice` 是一個(gè) Promise ，在用戶(hù)選擇后 resolve
  event.userChoice.then(result => {
    console.log(result.outcome)
    // 'accepted': 添加到主屏
    // 'dismissed': 用戶(hù)不想理你并向你扔了個(gè)取消
  })
})

構(gòu)建使用`sw-precache-webpack-plugin` `sw-register-webpack-plugin`

webpack.prod.conf

// service worker caching
    new SWPrecacheWebpackPlugin(config.swPrecache),
    new SwRegisterWebpackPlugin({
        filePath: path.resolve(__dirname, '../src/sw-register.js')
    })

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="manifest" href="/static/manifest.json">
    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="web_app">
    <link rel="apple-touch-icon" href="/static/images/apple-touch-icon-120x120.png">
    <!-- Add to home screen for Windows -->
    <meta name="msapplication-TileImage" content="/static/images/msapplication-icon-152x152.png">
    <meta name="msapplication-TileColor" content="#000000">
    <title>douban</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>