vue.js - 如何使用 vuejs 制作可安装的 PWA？

Question

我想让我的 vue 应用程序可以通过 chrome/firefox 使用按钮安装 (显示 pwa 安装提示)

<button @click="install">install</button>

var deferredPrompt
methods: {
  install() {
      deferredPrompt.prompt()
      deferredPrompt.userChoice.then((choiceResult) => {
          if (choiceResult.outcome === 'accepted') {
              console.log('User accepted the A2HS prompt')
          } else {
              console.log('User dismissed the A2HS prompt')
          }
          deferredPrompt = null
      })  
  }    
}

构建应用程序及其在线后，我单击按钮并在控制台上获得 deferredPrompt null。
我缺少什么？

Answer 1

您似乎没有 beforeinstallprompt window 上的事件监听器目的。
在 vuejs 中，您需要在 created() 中执行此操作事件，例如:

export default {
  name: "App",
  data() {
    return {
      deferredPrompt: null
    };
  },
  created() {
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      // Stash the event so it can be triggered later.
      this.deferredPrompt = e;
    });
  },
  methods: {
    async install() {
      this.deferredPrompt.prompt();
    }
  }
};

此外，您应该只在出现 beforeinstallprompt 时才显示安装按钮。事件已被触发，并且 deferredPrompt已经设置好了。否则，该按钮将可见但不执行任何操作。
退房 https://medium.com/js-dojo/promoting-your-vue-js-pwa-installation-6bd112342c19了解更多详情。