Tutorial - PWA Trigger add to homescreen | Vevioz Developers

Tutorial PWA Trigger add to homescreen

DevOps

Linux Systems Engineer
Joined
Oct 18, 2019
Messages
176
Reaction score
14
Points
18
Location
Novosibirsk, Russia
Website
addons.vevioz.com
Offline
iOS - Safari currently don't support Web app install banner, like in Android - Chrome.
There is no way to programatically trigger install banner in Android as well, except for the case when you catch the beforeInstallPromot and use that to show the banner.
In the linked answer, you can check on the alternate option on how to show in app banner to guide user to add to home screen. Here is some code example for the same, which is iOS specific(look under #PROTIP 3).

Code:
/public_html/themes/cloud/layout/welcome/content-simple.phtml
under
Code:
<div class="valign tag_auth_animation d-none"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.805 367.805" xml:space="preserve"> <g> <path style="fill:#3BB54A;" d="M183.903,0.001c101.566,0,183.902,82.336,183.902,183.902s-82.336,183.902-183.902,183.902 S0.001,285.469,0.001,183.903l0,0C-0.288,82.625,81.579,0.29,182.856,0.001C183.205,0,183.554,0,183.903,0.001z"/> <polygon style="fill:#fff;" points="285.78,133.225 155.168,263.837 82.025,191.217 111.805,161.96 155.168,204.801 256.001,103.968"/> </g></svg><?php echo $wo['lang']['welcome_back'] ?></div>

Code:
<button id="install" style="display:none; background: transparent; width: auto; height: auto; border: 0;"><img src="https://assets.vevioz.com/pwa/192x192.png" width=50%></button></center><script>
// variable store event
window.deferredPrompt = {};

// get button with id
const install_button = document.querySelector('#install');

// if the app can be installed emit beforeinstallprompt
window.addEventListener('beforeinstallprompt', e => {
  // this event does not fire if the application is already installed
  // then your button still hidden ;)

  // show button with display:block;
  install_button.style.display = 'block';

  // prevent default event
  e.preventDefault();

  // store install avaliable event
  window.deferredPrompt = e;

  // wait for click install button by user
  install_button.addEventListener('click', e => {
    window.deferredPrompt.prompt();
    window.deferredPrompt.userChoice.then(choiceResult => {
      if (choiceResult.outcome === 'accepted') {
        // user accept the prompt

        // lets hidden button
        install_button.style.display = 'none';
      } else {
        console.log('User dismissed the prompt');
      }
      window.deferredPrompt = null;
    });
  });
});

// if are standalone android OR safari
if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true) {
  // hidden the button
  install_button.style.display = 'none';
}

// do action when finished install
window.addEventListener('appinstalled', e => {
  console.log("success app install!");
});</script></p>
 
Top Bottom