This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
Chrome has recently (well at least in 2017)
implemented window.onappinstalled
event.
It is triggered when a user installs a progressive web app either via the Add to
Homescreen API (the prompt() function on the event delivered via the
onbeforeinstallprompt
event) or now more importantly via the manual method
of Add to Homescreen.
This is a very useful addition because it allows you to see engagement on the prompt vs people who use the system banners or menu buttons to install a progressive web app.
I've added it to Airhorner so you can see it in action
if DevTools is attached. The code is below that manages onbeforeinstallprompt
and onappinstalled
- in this case I use onbeforeinstallprompt to defer the
install prompt to a custom button, and onappinstalled
to clean up the UI and
do some basic analytics.
const Installer = function(root) {
let promptEvent;
const install = function(e) {
if(promptEvent) {
promptEvent.prompt();
promptEvent.userChoice
.then(function(choiceResult) {
// The user actioned the prompt (good or bad).
// good is handled in
promptEvent = null;
ga('send', 'event', 'install', choiceResult);
root.classList.remove('available');
})
.catch(function(installError) {
// Boo. update the UI.
promptEvent = null;
ga('send', 'event', 'install', 'errored');
root.classList.remove('available');
});
}
};
const installed = function(e) {
promptEvent = null;
// This fires after onbeforinstallprompt OR after manual add to homescreen.
ga('send', 'event', 'install', 'installed');
root.classList.remove('available');
};
const beforeinstallprompt = function(e) {
promptEvent = e;
promptEvent.preventDefault();
ga('send', 'event', 'install', 'available');
root.classList.add('available');
return false;
};
window.addEventListener('beforeinstallprompt', beforeinstallprompt);
window.addEventListener('appinstalled', installed);
root.addEventListener('click', install.bind(this));
root.addEventListener('touchend', install.bind(this));
};
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

Paul Kinlan | Sciencx (2018-04-13T12:20:31+00:00) onappinstalled – for when an app is installed.. Retrieved from https://www.scien.cx/2018/04/13/onappinstalled-for-when-an-app-is-installed/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.