CODEWITHSUNDEEP
installationprogressive-web-appsservice-workera2hs
Das
Das

Reputation: 13

Service-worker doesn't install only adds to home screen

I'm trying to install the pwa onto my mobile device. I only am able to add to home screen. Does anyone have any idea why this is happening?

Upvotes: 1

Views: 1088

Answers (1)

Punit Jain
Punit Jain

Reputation: 228

To make your PWA installable you need to meet up the following requirments:

  • A web manifest,with the correct fields filled in.
  • The website to be served from a secure(HTTPS) domain.
  • An icon to represent the app on the device.
  • A service worker registered with a fetch eventhandler,to make the app work offline(this is only required by chrome for Android currently).

You must include your manifest file in section of your index.html,like this

    <link rel="manifest" href="name.webmanifest">

Your manifest should contain the following fields,most of which are self explanatory.

{
"background_color": "purple",
  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
  "display": "fullscreen",
  "icons": [
    {
      "src": "icon/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "Awesome fox pictures",
  "short_name": "Foxes",
  "start_url": "/pwa-examples/a2hs/index.html"
}

Now when the browser finds the manifest file with all requirements fulfilled,it will fire a beforeinstallprompt and accordingly you have to show the A2HS dialog.

NOTE:

  • Different browsers have different criteria for installation, or to trigger the beforeinstallprompt event.
  • Starting in Chrome 68 on Android (Stable in July 2018), Chrome will no longer show the add to home screen banner. If the site meets the add to home screen criteria, Chrome will show the mini-infobar.

For A2HS dialog:

Add a button in your document,to allow user to do the installation

    <button class="add-button">Add to home screen</button>

Provide some styling

.add-button {
  position: absolute;
  top: 1px;
  left: 1px;
}

Now in the JS file where you register your service worker add the following code

let deferredPrompt;

//reference to your install button
const addBtn = document.querySelector('.add-button');

//We hide the button initially because the PWA will not be available for 
//install until it follows the A2HS criteria.
addBtn.style.display = 'none';

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to notify the user they can add to home screen
  addBtn.style.display = 'block';

  addBtn.addEventListener('click', (e) => {
    // hide our user interface that shows our A2HS button
    addBtn.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;
      });
  });
});

Upvotes: 2

Related Questions