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

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

  1. Listen for the beforeinstallprompt event

  2. Notify the user your app can be installed with a button or other element

  3. Wait for the explicit user event

  4. Show the prompt by calling prompt() on the saved beforeinstallprompt event

  5. [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

PWA: App Manifest, Add to Home Screen

By Maxim Salnikov

PWA: App Manifest, Add to Home Screen

  • 3,871