PWA Install Button Not Visible on iOS Devices

[tahirmahmudzade]

Description

I am using the vite-pwa/nuxt module to enable PWA functionality in my Nuxt 3 application. The install button is not visible when the app is accessed on iOS devices (iPhone and iPad), despite working as expected on other platforms (such as desktop and Android).

The issue appears to be specific to iOS and the $pwa?.showInstallPrompt method, which does not trigger the installation prompt, nor does the button appear.

I’m new to this, so I would really appreciate any help or guidance on how to resolve this issue.

Steps to Reproduce:

1. Implement PWA functionality using vite-pwa/nuxt in a Nuxt 3 project.
2. Add a button that calls the PWA installation logic using $pwa?.showInstallPrompt.
3. Test the app on iOS devices (iPhone or iPad) and observe that the button is not visible.

Expected Behavior:

The PWA install button should be visible on iOS devices, and clicking it should either prompt the user to install the app or provide appropriate feedback.

Actual Behavior:
The install button is not visible on iOS devices. There is no way for the user to install the PWA from the app interface.

nuxt.config.ts

const sw = process.env.SW === 'true'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxthub/core',
    '@nuxt/icon',
    '@vueuse/nuxt',
    '@vite-pwa/nuxt',
  ],
  experimental: { payloadExtraction: true, appManifest: true },
  ui: { global: true },

  hub: { database: true, blob: true, kv: true, remote: true },

  pwa: {
    strategies: sw ? 'injectManifest' : 'generateSW',
    registerType: 'autoUpdate',
    client: { installPrompt: true },
    manifest: {
      name: 'Schmalify',
      short_name: 'Schmalify',
      description:
        'Schmalify is a second-hand marketplace designed for students in Schmalkalden, providing a dedicated platform to buy and sell items within the local student community. Schmalify aims to simplify the trading process and foster a more efficient way for students to connect and exchange goods.',
      background_color: '#111827',
      theme_color: '#111827',
      icons: [
        { src: 'icons/icon_64x64.png', sizes: '64x64', type: 'image/png' },
        { src: 'icons/icon_144x144.png', sizes: '144x144', type: 'image/png' },
        { src: 'icons/icon_192x192.png', sizes: '192x192', type: 'image/png' },
        { src: 'icons/icon_512x512.png', sizes: '512x512', type: 'image/png' },
      ],
    },
    workbox: { globPatterns: ['**/*.{js,css,html,png,svg,ico}'] },
    injectManifest: { globPatterns: ['**/*.{js,css,html,png,svg,ico}'] },
  },
  compatibilityDate: '2024-09-12',
})

Main page (index.vue)

<template>
<ClientOnly>
        <UButton
          v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady"
          label="Install Application"
          class="mt-4"
          size="sm"
          @click="installPwa"
        />
      </ClientOnly>
</template>

<script setup lang="ts">
const nuxtApp = useNuxtApp()
const installPwa = () => {
  const pwa = nuxtApp.$pwa
  if (pwa?.showInstallPrompt) {
    pwa.install()
  } else {
    throw createError({
      statusCode: 400,
      message: 'Something went wrong installing the application, please try again later or contact support.',
    })
  }
}
</script>

You can try on your device by going to this url here scroll to the bottom and see whether it works

[userquin]

This is a browser issue, we cannot do anything here.

[tahirmahmudzade]

This is a browser issue, we cannot do anything here.

The button appears on chrome on all the devices except IOS. Can you walk me through the issue if possible, why does it behave like this ?

[userquin]

There is no button at all, the browser supporting this feature will expose the event listener, the approach in nuxt pwa is about replacing the default browser behavior.

If the browser doesn't support the beforeinstallprompt event listener, there is nothing we can do from JavaScript: https://github.com/vite-pwa/nuxt/blob/main/src/runtime/plugins/pwa.client.ts#L92-L121