How To Create Customised PWA In-App Installation

freecoded

freecoded

Administrator
Staff member
Freecoin
2,180
To indicate your Progressive Web App is installable, and to provide a custom in-app install flow:

  1. Listen for the beforeinstallprompt event.
  2. Save the beforeinstallprompt event, so it can be used to trigger the install flow later.
  3. Alert the user that your PWA is installable, and provide a button or other element to start the in-app installation flow.
The beforeinstallprompt event, and the appinstalled event have been moved from the web app manifest spec to their own incubator. The Chrome team remains committed to supporting them, and has no plans to remove or deprecate support. Google's Web DevRel team continues to recommend using them to provide a customized install experience.

Listen for the beforeinstallprompt event​

If your Progressive Web App meets the required installation criteria, the browser fires a beforeinstallprompt event. Save a reference to the event, and update your user interface to indicate that the user can install your PWA. This is highlighted below.

// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
There are many different patterns that you can use to notify the user your app can be installed and provide an in-app install flow, for example, a button in the header, an item in the navigation menu, or an item in your content feed.

In-app installation flow​

To provide in-app installation, provide a button or other interface element that a user can click to install your app. When the element is clicked, call prompt() on the saved beforeinstallprompt event (stored in the deferredPrompt variable). It shows the user a modal install dialog, asking them to confirm they want to install your PWA.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt, and can't use it again, throw it away
deferredPrompt = null;
});
The user choice property is a promise that resolves with the user's choice. You can only call prompt() on the deferred event once. If the user dismisses it, you'll need to wait until the beforeinstallprompt event is fired again, typically immediately after the user choice property has resolved.

Try it

Make a site installable using the beforeinstallprompt event.

Detect when the PWA was successfully installed​

You can use the user choice property to determine if the user installed your app from within your user interface. But, if the user installs your PWA from the address bar or other browser component, user choice won't help. Instead, you should listen to the app installed event. It is fired whenever your PWA is installed, no matter what mechanism is used to install your PWA.

window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});

Detect how the PWA was launched​

The CSS display-mode media query indicates how the PWA was launched, either in a browser tab, or as an installed PWA. This makes it possible to apply different styles depending on how the app was launched. For example, always hide the install button and provide a back button when launched as an installed PWA.

Track how the PWA was launched​

To track how users launch your PWA, use matchMedia() to test the display-mode media query. Safari on iOS doesn't support this yet, so you must check navigator. standalone, it returns a boolean indicating whether the browser is running in standalone mode.

function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}

Track when the display mode changes​

To track if the user changes between the standalone, and browser tab, listen for changes to the display-mode media query.

window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});

Update UI based on the current display mode​

To apply a different background color for a PWA when launched as an installed PWA, use conditional CSS:

@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}

 
Last edited:
F

Franca

New member
Freecoin
-9
The problem I have with PWA configuration is that everything is working but do not see Install pop up or the Add to homscreen pop up
 

Richest Freecoded User

Most Freecoin

freecoded
freecoded
2,180 Freecoin
Davy200
Davy200
590 Freecoin
nathan69
nathan69
424 Freecoin
Laureine
Laureine
415 Freecoin
C
codeguru
295 Freecoin
Tekera
Tekera
263 Freecoin
A
Akubay
170 Freecoin
smitha
smitha
104 Freecoin
G
Gabby
93 Freecoin
S
sesli
78 Freecoin
Top