Add "Install" and "Open In App" buttons

[tacman]

To show off the "app" ability of the bundle, can you add an install and open in app buttons?

To app.js, add

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

// main.js

installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

And then an install button on the page. In my apps, I'm using bootstrap, not sure how to style an install button here. Also, I have bootstrap-icons installed.

    <button id="install" class="btn btn-primary" hidden>
        <span class="bi bi-download"></span>
        Install
    </button>

I'm not sure how to add the "open in app" button, I think it has something to do with the manifest, but an example where would be most welcome.

Thanks for adding the "online/offline" notification.

[Spomky]

That's a nice feature!
I use flowbite for the frontend. See the following link for all button styles: https://flowbite.com/docs/components/buttons/
I have a pro licence if needed.

[Spomky]

I think this script should be on the template instead of app.js right?
Also, the button should be hidden by default and shown if not installed. WDYT?

[tacman]

I think this script should be on the template instead of app.js right?

At the moment, it's a SPA, so app.js is the only script (besides the service worker).

I was thinking, though, of a twig component that handled everthing.

<twig:pwa-install
    installButtonText: {{ 'pwa.install'|trans }},
    installButtonIcon: 'bi bi-download',
    installButtonClass: "btn btn-primary"

    launchButtonText: {{ 'pwa.launch'|trans }},
    launchButtonIcon: 'bi bi-open-file',
    launchButtonClass: "btn btn-success"
>
{# or with named blocks #}
<twig:block name='install' >
    <button class="btn btn-warning" id="install">Install</button>
</twig>

Also, the button should be hidden by default and shown if not installed. WDYT?

Yes, it works that way in my demo, but I'm not sure how to create an "Open in App" if it's installed but running on the website.

[Spomky]

Yes, it works that way in my demo, but I'm not sure how to create an "Open in App" if it's installed but running on the website.

I read this blog post where it explains how to detect if the app is installed. I will test it when back home.
https://web.dev/articles/get-installed-related-apps

[tacman]

The install button logic is working for me now at https://noise.survos.com

I think the mp3 problems is fixed as well, as the app seems to be working offline.

I don't see the install button when I go to the same URL on my Android phone, though, not sure why.

[Spomky]

Looks great. Can you just change the start_url parameter? It indicates ./index but should be / or. / I think

[tacman]

I changed it, not sure if it makes a difference though.

Alas, the mp3 offline still doesn't work. Should I try with 1.1.x?

[Spomky]

I changed it, not sure if it makes a difference though.

I installed the app, quit, disabled Internet and the app failed because the path was not in cache. Works fine now.

Alas, the mp3 offline still doesn't work. Should I try with 1.1.x?

With the last release and the correct regex, the file should be served correctly. I cannot test as I don't have my computer with me right now, but I really think it should work:

• remove those lines: https://github.com/survos-sites/noise/blob/main/assets/sw.js#L8L39
• remove this line: https://github.com/survos-sites/noise/blob/main/config/packages/pwa.yaml#L36
• add static_regex: '/\.(css|js|json|xml|txt|mp3|map|webmanifest)$/'

[tacman]

Works now, thanks! I will close Spomky-Labs/pwa-bundle#81