Adding an in-app install PWA button

[davidromani]

Recently, I've discovered that there is an event called beforeinstallprompt (for now, only available in a few browsers) that can be used to add a UI button that triggers an installation from your PWA.

Maybe this feature is quite interesting because, for now, it's not so easy to let the user perform this action. Take in mind that only Chrome (desktop) browser shows the following icon.

If you are in Chrome (mobile) it's not so easy to let the user know that he inside a PWA, that can be installed like another native app into his mobile (or tablet). At least, no t for now...

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt#triggering_the_install_prompt
• https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeinstallprompt_event

So, maybe this can help to include a button to perform this action. Furthermore, it would be great to create a Stimulus controller to achieve it. What do you think?

[Spomky]

@tacman worked on a similar feature. Also, I added this in my to-do list in #85.

[tacman]

My implementation was via a Twig Component, that used stimulus.

https://github.com/survos/SurvosPwaExtraBundle/blob/main/assets/src/controllers/install_controller.js

Still a work in progress, but it was mostly working okay for me in Chrome. I can document it more if you think it's useful, or more likely is to wait until @Spomky adds it to the core bundle.

[tacman]

It was supposed to work like this:

            <twig:PwaInstall>
                <twig:block name="install">
                    Install as PWA
                </twig:block>
                <twig:block name="installed">
                        It's installed! Launch it!
                </twig:block>
            </twig:PwaInstall>

but indeed, still a WIP.

[davidromani]

Thanks for your feedback @tacman, but I'm getting confused...

I usually instantiate Twig Components using the following form...

{{ component('PwaInstall') }}

Reading your Twig Component PHP class here I don't understand how your block name <twig:block name="installed"> works... Don't see anything called installed inside the template.

[davidromani]

Well, I implemented this approach, let me comment which decisions I've took.

First of all, I decided to put the beforeinstallprompt event listener into my main app.js entry point because can be a problem to set it directly inside a Stimulus controller. The event itself (beforeinstallprompt) maybe has been triggered before the Stimulus controller initialization. So, I've written this code:

// assets/app.js
if ('serviceWorker' in navigator && 'BeforeInstallPromptEvent' in window) {
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (event) => {
        event.preventDefault();
        deferredPrompt = event;
        const e = new CustomEvent('app-installable-pwa-detector', {detail: {prompt: deferredPrompt}});
        window.dispatchEvent(e);
        console.log('app-installable-pwa-detector event dispatched');
    });
}

Just in case that browser suports the event type and allow ServiceWorker, it make sense to declare the event listener. For now, this code only add the event listener in some browsers, check the caniuse reference. If all the conditions are well, then the event listener dispatches another custom event that will be caught by any Stimulus controller tied to this code.

<div
    {{ stimulus_controller('installable_pwa_detector') }}
    data-action="app-installable-pwa-detector@window->installable-pwa-detector#installablePwaAvailable"
>
    <button
        {{ stimulus_target('installable_pwa_detector', 'button') }}
        {{ stimulus_action('installable_pwa_detector', 'install') }}
        class="btn d-none"
    >
        <img src="{{ asset('frontend/ic-install-arrow-orange.svg') }}" alt="{{ 'front.nav.install_app' | trans }}">
    </button>
</div>

The Stimulus controller itself is defined with the following the code thanks to the @tacman example. There is a localStorage flag that decides if there is no need to show the install button.

import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy' */
export default class extends Controller
{
    static targets = ['button'];

    initialize() {
        this.installPrompt = null;
    }

    installablePwaAvailable(event)
    {
        this.installPrompt = event.detail.prompt;
        if (localStorage.getItem('installed_pwa_flag') !== 'true') {
            this.buttonTarget.classList.remove('d-none');
        }
    }

    async install()
    {
        if (!this.installPrompt) {
            console.warn('[installable_pwa_detector:install] NO this.installPrompt allowed');

            return null;
        }
        const result = await this.installPrompt.prompt();
        console.log(`[installable_pwa_detector:install] Install prompt was: ${result.outcome}`);
        if (result.outcome === 'accepted') {
            this.buttonTarget.classList.add('d-none');
            this.installPrompt = null;
            localStorage.setItem('installed_pwa_flag', 'true');
        }
    }
}

Keep in mind that the installablePwaAvailable method is called only if there is an action (data-action="app-installable-pwa-detector@window->installable-pwa-detector#installablePwaAvailable") defined to catch the custom event. This code reveals the icon in the view only if it has not been previously installed.

Finally, if the install PWA button is shown and clicked the install method will be executed.

[tacman]

awesome! Can you wrap this up in something re-usable? Or I can add it to my bundle which makes the stimulus controller available, the trick is to document that app.js setup. My bundle needs to remove some features that are built into the core bundle (e.g. the debug profiler) and perhaps all of this will eventually move to the core.