sabato 17 novembre 2018

Aggiungi alla schermata Home

Criteri da rispettare:

1. crea un file manifest.json con dentro

{
  "background_color": "...",
  "description": "...",
  "display": "fullscreen",
  "icons": [
    {
      "src": "app-icon.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "name": "...",
  "short_name": "...",
  "start_url": "..."
}


1.1 dentro <head> di index.html aggiungi

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


2. aggiungi un service worker


2.1 i index.html, prima di </body>, aggiungi

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

e nei CSS aggiungi
.add-button {
  position: absolute;
  top: 1px;
  left: 1px;

}

2.2 in index.html, prima di </html>, aggiungi

<script>
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)
   });
}

// Register service worker to control making site work offline

if('serviceWorker' in navigator) {
 navigator.serviceWorker
          .register('sw.js')
          .then(function() { console.log('Service Worker Registered'); });
}

// Code to handle install prompt on desktop

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
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;
     });
 });
});

</script>


2.3 crea un file service-worker.js vuoto


2.4 crea un file sw.js con dentro

self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('video-store').then(function(cache) {
     return cache.addAll([
       'index.html'
       // altre tue pagine
     ]);
   })
 );
});

self.addEventListener('fetch', function(e) {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});


3. attiva l'HTTPS sul tuo sito (guida per Netsons)


fonti
https://stackoverflow.com/questions/34369951/how-to-get-add-to-home-screen-pop-up-on-site-open-in-mobile-browser
https://developers.google.com/web/fundamentals/app-install-banners/
https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Add_to_home_screen

Nessun commento:

Posta un commento