Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add to home screen functionality using javascript

I want "add to home screen" functionality on button click using javascript. My first question is. Is that possible using javascript or html/css?

I have read too many post but did not find any working code. what I found is user have to do is to go to chrome menu and tab on "add to home screen" or chrome will prompt the user and ask them "add to home screen"

like image 467
Jitender Avatar asked Aug 08 '16 10:08

Jitender


People also ask

How do I add to home screen prompt?

Open the menu next to the URL bar. Depending on whether you're using Chrome or Android you'll see a menu option "Install" or "Install App". This is the "Add to Home screen" option displayed for any site that has the necessary features in place.

Why is add to home screen not an option?

If you do not see the "Add to Home Screen" option after you have opened the Mobile Gallery App installation link, you are most likely viewing from an unsupported browser (i.e. using the Gmail app on an iOS device, or the Twitter app from an Android device).

Where is add to home screen option?

Android. Launch Chrome for Android and open the website or web page you want to pin to your home screen. Tap the menu button and tap Add to homescreen.

What is the meaning of add to home screen?

This means that users that add a PWA to their Home screen will be able to find it anywhere they see other apps (e.g. in the app drawer or searching for apps), and open the site from intents.


Video Answer


3 Answers

Image below shows the project structure in file explorer. A public folder has all the file is inside it. And the manifest file is outside the public folder this is the image

Next create Manifest.json and service-worker.js files as shown below:

Manifest.json

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
      {  
   "src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image/png",
   "density": "0.75"
  },
    {
      "src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
       "src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },

    {
    "src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  }
  ],
  "start_url": "/index.html"
}

service-worker.js

self.addEventListener("fetch", function(event){

});

Now edit index.html and add following code in head section

<link rel="manifest" href="/manifest.json">     
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> 

In the same file put below code right before body closing

<script type="text/javascript">
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

Now Run your project, wait for few minute and reload your page.

ENJOY !

like image 154
Rishi Avatar answered Oct 24 '22 07:10

Rishi


In June 2018, Google introduce Chrome 68 (still in Beta at July 2018) that allow you show a modal add to home screen dialog by catching event "beforeinstallprompt".

To trigger this event, you need:

  • The web app is not already installed

  • Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)

  • Web app manifest must have: short_name or name, icon, start_url, and display

  • Must be https

  • Has registered a service worker with a "fetch" event handler

More detail and code at: https://developers.google.com/web/updates/2018/06/a2hs-updates

Add to home screen criteria: https://developers.google.com/web/fundamentals/app-install-banners/#criteria

like image 34
Kien Nguyen Ngoc Avatar answered Oct 24 '22 07:10

Kien Nguyen Ngoc


According to the Best Practices section of this page: https://developer.chrome.com/multidevice/android/installtohomescreen#best-practices

  • Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.

It looks like other developers have suggested that you can simply prompt the user with instructions for how to add to the homescreen, rather than try and do it directly.


EDIT: Doing more digging, it seems that since chrome 42, google is introducing app install banners. See: https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android

Your web app will need to meet a bunch of requirements however, including running a service worker, having your site as https, and having the user visit your site at least twice.

like image 3
Matt Way Avatar answered Oct 24 '22 07:10

Matt Way