Maxim Salnikov
@webmaxru
App Manifest
Add to Home Screen
My App
Fundamentals
Codelabs
Today's slidedecks
Maxim Salnikov
-
PWA Slack organizer
-
PWA Oslo / PWA London meetups organizer
-
PWA speaker and trainer
-
Google Dev Expert in Web Technologies
Azure Developer Technical Lead at Microsoft
Why is this important?
-
Most engaged audience
-
More repeat visits
-
Longer time on site
-
Higher conversion rates
Current support
Installation criteria
- Includes a web app manifest with at least:
-
-
icons must include a 192px and a 512px sized icons
-
display must be one of: fullscreen, standalone, or minimal-ui
-
Has registered a service worker with a fetch event handler
-
As a consequence of above point: served over HTTPS
-
The web app is not already installed
-
Manifest's prefer_related_applications is not true
-
Meets a user engagement heuristic (Engagement Score?)
Web App Manifest
{
"short_name": "Maps",
"name": "Google Maps",
"icons": [
{
"src": "/images/icons-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/maps/?utm_source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/maps/",
"theme_color": "#3367D6"
}Connect with your app
<link rel="manifest" href="/manifest.json">Validate and test
Generate
Native install options
Custom install options
-
Listen for the beforeinstallprompt event
-
Notify the user your app can be installed with a button or other element
-
Wait for the explicit user event
-
Show the prompt by calling prompt() on the saved beforeinstallprompt event
-
[Optional] Track the successful installation using appinstalled event
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from auto-showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can add to home screen
btnAdd.style.display = 'block';
});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;
});
});window.addEventListener('appinstalled', (e) => {
// Installed
});Tracking installations from all sources
UX patterns
-
Header
-
Menu
-
Landing page
-
Banner
-
Inline (contextual)
-
Keep promo outside of the flow of your user journeys
-
Include the ability to dismiss or decline the promotion
-
Combine more than one of these techniques in different parts of your PWA
-
Only show the promotion after beforeinstallprompt event
Thank you!
Maxim Salnikov
@webmaxru
Questions?
Maxim Salnikov
@webmaxru