Nuxt 3 PWA app (ssr: true) either installable on Chrome or on Samsung Browser, but not both with same settings. Related to <ClientOnly> and <NuxtPwaManifest/>. #175
In thjs repository nuxt3-pwa-ssr-browser-test, a minimal example shows an issue with a Nuxt 3 app being configured as server-side-rendering (ssr: true). The PWA strategy for the service worker is the default, i.e. generateSW.
In app.vue, <NuxtPwaManifest /> is enclosed in a <ClientOnly> component. With this setting, it's possible to install the PWA app on Chrome, but not on Samsung Internet browsers. When <NuxtPwaManifest /> is moved outside the <ClientOnly> component, the PWA app can be installed on Samsung Internet browsers, but not on Chrome. The beforeInstallprompt event is not send by the browser in the failure cases.
Please note that the PWA functionality was supported before in Nuxt 2 with nuxt/pwa for both browsers and a similar project setup. For the Nuxt 2 project, ssr was set to false which we want to keep also after the migration to Nuxt 3. However also in the case of setting ssr: false, only Chrome and Edge browsers receive the beforeInstallprompt event and can be installed.
I know the issue board is not supposed to be a support forum for brand-based browser issues, but maybe someone knows more about the differences in this behavior. I've tried different settings without success. Any help, any hint for a solution or workaround is highly appreciated, e.g. using a custom service worker, a custom definition of the web manifest or its link.
The Android phone (Samsung Galaxy, Android 14) has the latest version of Samsung Internet (v 26.0.3.7), and Chrome (v 130.0.6723.102) installed.
In thjs repository nuxt3-pwa-ssr-browser-test, a minimal example shows an issue with a Nuxt 3 app being configured as server-side-rendering (ssr: true). The PWA strategy for the service worker is the default, i.e.
generateSW.In app.vue,
<NuxtPwaManifest />is enclosed in a<ClientOnly>component. With this setting, it's possible to install the PWA app on Chrome, but not on Samsung Internet browsers. When<NuxtPwaManifest />is moved outside the<ClientOnly>component, the PWA app can be installed on Samsung Internet browsers, but not on Chrome. ThebeforeInstallpromptevent is not send by the browser in the failure cases.Please note that the PWA functionality was supported before in Nuxt 2 with nuxt/pwa for both browsers and a similar project setup. For the Nuxt 2 project, ssr was set to false which we want to keep also after the migration to Nuxt 3. However also in the case of setting ssr: false, only Chrome and Edge browsers receive the
beforeInstallpromptevent and can be installed.I know the issue board is not supposed to be a support forum for brand-based browser issues, but maybe someone knows more about the differences in this behavior. I've tried different settings without success. Any help, any hint for a solution or workaround is highly appreciated, e.g. using a custom service worker, a custom definition of the web manifest or its link.
The Android phone (Samsung Galaxy, Android 14) has the latest version of Samsung Internet (v 26.0.3.7), and Chrome (v 130.0.6723.102) installed.