Web Snippet

How to add website to home screen on any smart device

In this tutorial we will learn how to add a website to the home screen on any site smart device pop up site in the mobile browser.

Chrome automatically displays the banner when your app meets the following criteria:

  • You should have a service worker registered on your Web site.
  • You should have an app manifest file.
  • Make sure the web site is served over HTTPS (a requirement for using service worker).
  • And it needs to meet the browser’s website online engagement heuristic

source: developers.google.com

Here are three easy steps.

Step 1: Create a service worker file

Create a blank sw.js file in the root folder. And put the below code in your file

self.addEventListener(‘fetch’, function(event) {});

Add below code in your HTML page, before closing </body> tag.

Code Example:
<script type="text/javascript">
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

Step 2: Create a manifest file

create a manifest.json file in the root folder. Add below tag in your HTML page header section

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

Step 3: Add configurations in the manifest file

Here are the configurations we used.

Code Example:
{
   "short_name": "CoderWell",
   "name": "CoderWell: Easy Programming?",
   "description": "Coder Well Easy Web Programming",
   "icons": [
      {
	 "src": "/images/icons-192.png",
         "type": "image/png",
         "sizes": "192x192"
      },
      {
         "src": "/images/icons-512.png",
         "type": "image/png",
         "sizes": "512x512"
      }
   ],
   "start_url": "https://coderwell.com",
   "background_color": "#133783",
   "display": "standalone",
   "scope": "/",
   "theme_color": "#133783"
}

In the code above you can replace your own values.

You should have an app manifest file with:

  • short_name – used on the home screen just below the icon.
  • name – full name of the app
  • icon – logo/icon of at least 192×192 png icon (the icon declarations must include a mime type of image/png)
  • start_url – load when the app opens

Customize Add to home screen button

Code Example:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Customize Add to home screen button</title>
    <link rel='manifest' href='/manifest.json'>
  <body>
  <h1 class="add-to">
    <button class="add-to-btn">
      Install Coder Well App
    </button>
  </h1>

  <script type="text/javascript">
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
  </script>
  
  <script type="text/javascript">
   let deferredPrompt;
  var getDive = document.querySelector('.add-to');
  var btnAdd = document.querySelector('.add-to-btn');
  getDive.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;
    getDive.style.display = 'block';

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

  });
  </script>
  </body>
</html>

TOOLS

ABOUT US

CONTACT