How to Implement Add to Home Screen Prompt in PWAs

Progressive Web Apps (PWAs) have revolutionized the way users interact with web content, providing a native app-like experience while still being accessible via a browser. One of the most effective features of PWAs is the "Add to Home Screen" prompt, which allows users to add the web app to their device’s home screen for easier access. Here’s how to effectively implement this feature in your PWA.

Step 1: Set Up Your Web App Manifest

The first step in implementing the "Add to Home Screen" prompt is to create a web app manifest file. This JSON file contains metadata about your app, such as its name, icons, start URL, and display type. Below is a sample manifest file.

{
  "name": "Your App Name",
  "short_name": "App Name",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

To link your manifest file to your HTML document, include the following tag in the <head> section:

<link rel="manifest" href="/manifest.json">

Step 2: Enable Service Worker

A service worker is a script that your browser runs in the background, separate from a web page, enabling features that don’t need a web page or user interaction. It is essential for enabling the installability of your PWA. Here’s a basic implementation:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
  });
}

Step 3: Detect the 'beforeinstallprompt' Event

In order to show the "Add to Home Screen" prompt, you need to listen for the beforeinstallprompt event. This event is fired when the PWA meets the criteria to be installed. Here’s how to capture and save the event for later use:

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent the mini info bar from appearing on mobile
  e.preventDefault();
  // Stash the event so it can be triggered later
  deferredPrompt = e;
  // Optionally, display a custom button to prompt the user
  document.querySelector('#add-button').style.display = 'block';
});

Step 4: Show the Prompt to Users

Once you have captured the beforeinstallprompt event, you can prompt the user to add the web app to their home screen. Trigger the stored event upon a user action, such as a button click:

document.querySelector('#add-button').addEventListener('click', () => {
  // Hide the custom button
  document.querySelector('#add-button').style.display = 'none';
  // Show the install 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;
  });
});

Step 5: Handle 'appinstalled' Event

To improve user experience, it’s a good practice to handle the appinstalled event to track when the PWA has been successfully added to the user's home screen.

window.addEventListener('appinstalled', (evt) => {
  console.log('PWA was installed');
  // Optionally, you could update the UI to reflect the app being installed
});

Conclusion

Implementing the "Add to Home Screen" prompt in your PWA is a straightforward process that involves setting up a manifest file, registering a service worker, and

How to Implement Add to Home Screen Prompt in PWAs