Chrome per Android - aggiungi web app alla schermata iniziale

Question

Sto cercando di implementare un banner "aggiungi a homescreen" utilizzando il supporto nativo per banner di Google Chrome, con questa demo come riferimento.

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

Secondo le specifiche lì, i requisiti sono:

• la pagina utilizza un operaio di servizio (sì, vedi sotto)
• il sito utilizza HTTPS (sì, il sito ha un certificato SSL valido e sto caricando su HTTPS chrome mostra il sito come sicuro e ha un lucchetto verde, nessun errore o avviso nel certificato)
• l'app ha un manifest dichiarato (sì, vedi sotto)
• il manifesto ha uno short_name, 144 icona di pixel e un tipo di 'image/png' (sì, vedi sotto)

Il manifesto che sto usando è al di sotto.

{ 
    "name": "Web app test", 
    "short_name": "Test", 
    "icons": [ 
    { 
     "src": "/resources/launcher-icon-3x.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    } 
    ], 
    "display": "standalone" 
} 

Che contiene un'icona short_name e 144 pixel di tipo image/png.

Il lavoratore servizio che sto usando è una copia diretta & incolla di questo codice:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

che è stato consigliato in questo articolo:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

Il lavoratore servizio è stato registrato, il manifest viene caricato nella pagina e l'URL dell'immagine è corretto, ma il banner non viene mostrato.

Ho anche il chrome: // flags/# bypass-app-banner-engagement-checks abilitato quindi non è il caso che io debba tornare domani e controllare che funzioni. Sono stato in grado di visualizzare i banner di homescreen su tutte le demo di Chrome che ho controllato (da dove ho preso la maggior parte del codice) e il mio telefono ha l'ultima versione di Chrome installata.

C'è qualcos'altro che mi manca che potrebbe impedire l'apparizione del banner homescreen?

Grazie.

Answer 1

Un paio di cose da controllare:

• Assicurarsi di avere un start_url nel vostro manifesto che definisce la pagina per lanciare.
• Assicurarsi di avere un <link rel=manifest> nella tua pagina
• Assicurarsi che l'URL dell'immagine tutto risolve correttamente in base alla posizione manifesta
• presentano preferibilmente un'icona 192px, 144 è il minimo

Mounir Lamouri ha creato un manifest validator che è possibile utilizzare per verificare che il manifest sia corretto.

È necessario attivare anche chrome: // flags/# bypass-app-banner-engagement-checks se si utilizza Chrome in modo da ottenere un avviso più rapido o la visibilità di eventuali problemi. Finalmente puoi guardare nella console di Dev Tools su qualsiasi pagina caricata e verrà mostrato un errore che indica il motivo per cui il banner non è stato mostrato.

C'è anche un sacco di orientamento sul developers.google.com

• Using App Install Banners
  • Creare un file manifesto tra cui uno SHORT_NAME, icone e launch_url
  • Link il file manifesto dal pagina
• Web App Install Banner
  • Includere facoltativamente informazioni extra come background_color e theme_color.
• Listening to events on App Install banner
  • imparare quando Chrome pensa di poter chiederà di installare e quindi offrire la possibilità di rinviare fino a un momento più adatto.
  • Capire se l'utente ha accettato o rifiutato il prompt osservando la risposta nell'evento onbeforeinstallprompt.

Answer 2

In generale mi consiglia di incollare il manifesto in questo per garantire che non ha errori: http://mounirlamouri.github.io/manifest-validator/

Se utilizzano Chrome con Chrome: // flags/# bypass-app- banner-engagement-checks abilitati, puoi guardare nella console su qualsiasi caricamento della pagina e verrà visualizzato un errore che indica il motivo per cui il banner non è stato mostrato.