vuej를 사용하여 설치 가능한 PWA를 만드는 방법

vuej를 사용하여 설치 가능한 PWA를 만드는 방법

버튼을 사용하여 chrome/firefox를 통해 vue 앱을 설치할 수 있도록 하고 싶다(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
      })  
  }    
}

앱과 앱을 온라인으로 만들면 버튼을 클릭하면 콘솔에 deferred Prompt null이 표시됩니다.뭘 놓쳤지?

이벤트 청취자가 없는 것 같네요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 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/66001910/how-to-make-a-installable-pwa-using-vuejs