[Nuxt] PWA Add to Home Screen ($pwa.install not working)

PWA는 'Progressive Web Apps'의 줄임말로 모바일 웹을 어플처럼 쓸 수 있게 도와주는 표준기술.

---

1. nuxt 3 > integrations > modules > 'PWA' 검색

https://nuxt.com/modules/vite-pwa-nuxt

2. 문서에 따라 차분히 진행

https://vite-pwa-org.netlify.app/frameworks/nuxt.html 

npx nuxi@latest module add @vite-pwa/nuxt

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    /* your pwa options */
  }
})

3. 헤더에 아래와 같이 pwa 수동설치 가능한 버튼 생성

<script setup lang="ts">
const install = async () => {
  const nuxtApp = useNuxtApp();
  nuxtApp.$pwa?.install();
};
</script>
<template>
    <button v-if="$pwa?.isPWAInstalled" @click>앱 설치</button>
</template>

4. 근데 왜 안 먹히지? node_modules 까보면 알겠지

5. install 이 비어있는 프로미스객체인데 hideInstall 이 false 이어야 제대로 된다는 사실 캐치

6. 설정에 installPrompt를 true로 설정해줘야 hideInstall이 false가 되겠구나.

7. 이거였군

8. 빌드하면 되네요!