Make less specific to iOS

[JacobDB]

Apparently the banner that pops up at the bottom of Chrome is a temporary solution, and developers can provide their own. This package should be refactored to support this better.

[Soneji]

HI @JacobDB

I have been using this project for a while now, and I find it very useful, I too would like to see better support for other devices, especially Android.

I was thinking to use this

if( /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ) {

Or maybe

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

from This stackoverflow post

Maybe one way would be to show this:

This on iOS

and add an install button like this on android which can trigger the browser install dialogue

I am happy to help with development, are you accepting PRs?

[JacobDB]

This is something I intend to look at at some point, but I'm not sure how I'd like to approach it. In the meantime, you should be able to achieve this yourself by setting the condition property to whatever you like. For example:

import pwaInstallPrompt from "pwa-install-prompt";

new pwaInstallPrompt(".pwa-install-prompt__container", {
    condition: /Android|iPhone|iPad|iPod/i.test(navigator.userAgent),
});

Not sure what language you're using, but you can also customize the markup however you see fit. If you want to display one thing for iOS and another for Android, you'd just need to set up some conditionals based on user agent in whatever language you're using to replace the messaging. I mostly work with WordPress, so in PHP this would look something like:

<?php $ua = strtolower($_SERVER["HTTP_USER_AGENT"]); ?>
<div class="pwa-install-prompt__container">
    <button class="pwa-install-prompt__overlay">Close</button>
    <div class="pwa-install-prompt">
        <div class="pwa-install-prompt__icon__container">
            <img class="pwa-install-prompt__icon" src="/path/to/icon/file.png" alt="{app_name}" />
        </div>
        <div class="pwa-install-prompt__content">
            <h3 class="pwa-install-prompt__title">Install {app_name}</h3>
            <p class="pwa-install-prompt__text">Install this application on your home screen for quick and easy access when you’re on the go.</p>
            <?php if (stripos($ua, "android") !== false && stripos($ua, "mobile") !== false): ?>
                [ Android install button goes here ]
            <?php else: ?>
                <p class="pwa-install-prompt__guide">Just tap <svg class="pwa-install-prompt__guide__icon" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>Share</title><path fill="#007AFF" d="M48.883,22.992L61.146,10.677L61.146,78.282C61.146,80.005 62.285,81.149 64,81.149C65.715,81.149 66.854,80.005 66.854,78.282L66.854,10.677L79.117,22.992C79.693,23.57 80.256,23.853 81.114,23.853C81.971,23.853 82.534,23.57 83.11,22.992C84.25,21.848 84.25,20.125 83.11,18.981L65.997,1.794C65.715,1.511 65.421,1.215 65.139,1.215C64.563,0.932 63.718,0.932 62.861,1.215C62.579,1.498 62.285,1.498 62.003,1.794L44.89,18.981C43.75,20.125 43.75,21.848 44.89,22.992C46.029,24.149 47.744,24.149 48.883,22.992ZM103.936,35.32L81.114,35.32L81.114,41.053L103.936,41.053L103.936,121.27L24.064,121.27L24.064,41.053L46.886,41.053L46.886,35.32L24.064,35.32C20.928,35.32 18.355,37.904 18.355,41.053L18.355,121.27C18.355,124.419 20.928,127.003 24.064,127.003L103.936,127.003C107.072,127.003 109.645,124.419 109.645,121.27L109.645,41.053C109.645,37.891 107.072,35.32 103.936,35.32Z" /></svg> then “Add to Home Screen”</p>
            <?php endif; ?>
        </div>
    </div>
</div>

Should be doable with Vue, React, vanilla JS, or whatever else you'd like to use.

[Soneji]

Hey, this is cool!
I ended up doing it a little differently

<div class="pwa-install-prompt__container">
        <button class="pwa-install-prompt__overlay">Close</button>
        <div class="pwa-install-prompt">
            <div class="pwa-install-prompt__icon__container">
                <img class="pwa-install-prompt__icon" src="img/icons/apple-touch-icon.png" alt="logo" />
            </div>
            <div class="pwa-install-prompt__content">
                <h3 class="pwa-install-prompt__title">Install PDR App</h3>
                <p class="pwa-install-prompt__text">Install this application on your home screen for quick and easy
                    access when
                    you’re on the go.</p>
                <p class="pwa-install-prompt__guide">Just tap <svg class="pwa-install-prompt__guide__icon"
                        viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Share</title>
                        <path fill="#007AFF"
                            d="M48.883,22.992L61.146,10.677L61.146,78.282C61.146,80.005 62.285,81.149 64,81.149C65.715,81.149 66.854,80.005 66.854,78.282L66.854,10.677L79.117,22.992C79.693,23.57 80.256,23.853 81.114,23.853C81.971,23.853 82.534,23.57 83.11,22.992C84.25,21.848 84.25,20.125 83.11,18.981L65.997,1.794C65.715,1.511 65.421,1.215 65.139,1.215C64.563,0.932 63.718,0.932 62.861,1.215C62.579,1.498 62.285,1.498 62.003,1.794L44.89,18.981C43.75,20.125 43.75,21.848 44.89,22.992C46.029,24.149 47.744,24.149 48.883,22.992ZM103.936,35.32L81.114,35.32L81.114,41.053L103.936,41.053L103.936,121.27L24.064,121.27L24.064,41.053L46.886,41.053L46.886,35.32L24.064,35.32C20.928,35.32 18.355,37.904 18.355,41.053L18.355,121.27C18.355,124.419 20.928,127.003 24.064,127.003L103.936,127.003C107.072,127.003 109.645,124.419 109.645,121.27L109.645,41.053C109.645,37.891 107.072,35.32 103.936,35.32Z" />
                    </svg> then “Add to Home Screen”
                </p>
                <!-- I added this button-->
                <button class="pwa-install-prompt__chrome" style="display: none"> Install </button> 
            </div>
        </div>
    </div>

and i added this javascript

 var prompt = new pwaInstallPrompt();
        let deferredPrompt;
        
        window.addEventListener('beforeinstallprompt', (e) => {
            // Prevent Chrome 67 and earlier from automatically showing the prompt
            e.preventDefault();
            // Stash the event so it can be triggered later.
            deferredPrompt = e;
            document.querySelector(".pwa-install-prompt__guide").style.display = "none"
            document.querySelector(".pwa-install-prompt__chrome").style.display = "initial"
            document.querySelector(".pwa-install-prompt__chrome").style.margin = 0;
            document.querySelector(".pwa-install-prompt__text").style.marginBottom = "1em"
            document.querySelector(".pwa-install-prompt__container").classList.add("is-active")
        });
        let btnAdd = document.querySelector(".pwa-install-prompt__chrome");
        btnAdd.addEventListener('click', (e) => {
            // hide our user interface that shows our A2HS button
            btnAdd.style.display = 'none';
            // Show the prompt
            deferredPrompt.prompt();
            // Wait for the user to respond to the prompt
            deferredPrompt.userChoice
                .then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('User accepted the A2HS prompt');
                    } else {
                        console.log('User dismissed the A2HS prompt');
                    }
                    deferredPrompt = null;
                });
            document.querySelector(".pwa-install-prompt__container").classList.remove("is-active")
        });

I used this guide to create this.
https://developers.google.com/web/fundamentals/app-install-banners/native

It shows the install dialog as a pop up using the pwa-install-prompt UI as opposed to in the URL bar or the native chrome android one. It also replaces the guide with an install button

Maybe this could be implemented into the package?

[Soneji]

What do you think @JacobDB? Are you accepting PRs?