Is it possible to make an in-app button that triggers the PWA “Add to Home Screen” install banner?

by

Chrome(or any PWA supporting browser) triggers the beforeinstallprompt event for Web app install banner, which you can catch and re-trigger in more appropriate time when you think user wont miss it/convinced about adding your site to home page. Starting Chrome version 68, catching beforeinstallprompt and handling the install prompt programmatically is mandatory and no banners will be shown automatically.

In case the user have missed the prompt/declined to add to home screen, the event can’t be manually triggered by our code. This is intentionally left that way to avoid web pages annoying the users to repeatedly prompt the user for adding to home screen. Thinking of users perspective, this makes complete sense.

Yes, there are cases when user miss the option accidentally and he may not know of the browser menu option to “Add to home screen” and it would be nice for us to trigger the same again. But unfortunately, that’s not an option. At lest for now and I personally don’t see that changing much considering how developers can abuse if its left to the developers to prompt.

Alternate option: If the user have missed the install prompt or even chosen not to install it to home screen, give some time and when you think he is starting to like your site(based on conversions) you can show him a full page or half page Div popup kind of install instructions to add your site to home screen from browsers menu. It can have some images or Gif animation showing user how to add to home screen from the menu. With that, it should be self explanatory to most users, if not all.

Here is some code example for the same, which is iOS specific(look under #PROTIP 3).

As a bonus, you can show some promotions like discounts or added features when user add to home screen, which will convince user to do so. PWA has a way to find if the site is accessed form the home screen or browser.

For Development/testing: If you need this banner to come multiple times for dev/testing purpose, you can set the below flow in your Chrome for the same,

chrome://flags/#bypass-app-banner-engagement-checks

More Related Contents:

  1. Options for testing service workers via HTTP
  2. What is the storage limit for a service worker?
  3. Can service workers cache POST requests?
  4. Service worker is caching files but fetch event is never fired
  5. Best practices for detecting offline state in a service worker
  6. What limitations apply to opaque responses?
  7. How can I remove a buggy service worker, or implement a “kill switch”?
  8. Understanding Service Worker scope
  9. How to clear cache of service worker?
  10. “Status Code:200 OK (from ServiceWorker)” in Chrome Network DevTools?
  11. What causes a Failed to execute ‘fetch’ on ‘ServiceWorkerGlobalScope’: ‘only-if-cached’ can be set only with ‘same-origin’ mode error?
  12. Firebase: change the location of the service worker
  13. How to alter the headers of a Request?
  14. Can’t find serviceWorker in navigator anymore
  15. Service Worker registration error: Unsupported MIME type (‘text/html’)
  16. Service Worker Registration Failed
  17. What can service workers do that web workers cannot?
  18. Counting the occurrences / frequency of array elements
  19. Using variable keys to access values in JavaScript objects
  20. Call javascript function after script is loaded
  21. Firestore: What’s the pattern for adding new data in Web v9?
  22. Simple pagination in javascript
  23. Content Security Policy: The page’s settings blocked the loading of a resource
  24. Why {} != ( {} ) in JavaScript?
  25. How do I use the Spacing Utility Classes in Bootstrap
  26. Why is PassportJS in Node not removing session on logout
  27. Convert HSB/HSV color to HSL
  28. What is JavaScriptExecutor in Selenium?
  29. Javascript – Stop form submit depending on ajax response [duplicate]
  30. es6 – import all named module without alias

Leave a Comment