Πώς να προσθέσετε στην αρχική οθόνη σε μια εφαρμογή προοδευτικού ιστού

Προσθέστε στην αρχική οθόνη

Εδώ το banner εγκατάστασης εφαρμογής ιστού εστιάζεται στην εφαρμογή ιστού, με τη δυνατότητα προσθήκης στην αρχική οθόνη.

Υποστήριξη προγράμματος περιήγησης για προσθήκη στην αρχική οθόνη

Η λειτουργία Προσθήκη στην αρχική οθόνη υποστηρίζεται προς το παρόν από:

  • Χρώμιο
  • iOS Safari

Μπορείτε να δείτε την τελευταία κατάσταση της υποστήριξης του προγράμματος περιήγησης αυτής της δυνατότητας εδώ.

Σε Android

Σε Android, το banner "προσθήκη στην αρχική οθόνη" εμφανίζεται αυτόματα αν πληροίτε συγκεκριμένες απαιτήσεις. Αυτό πρέπει να μοιάζει στο Android:

Προσθήκη στην προτροπή αρχικής οθόνης Όταν ξεκινά η εφαρμογή

προτροπή εκτόξευση

Απαιτήσεις

συμπεριλάβετε ένα manifest.jsonαρχείο με τις ακόλουθες ιδιότητες:

  • short name
  • name
  • 192x192μέγεθος του pngεικονιδίου
  • start_url
  • συμπεριλάβετε έναν εργαζόμενο υπηρεσιών που είναι εγγεγραμμένος και ενεργοποιημένος
  • ο ιστότοπος που προβάλλεται μέσω HTTPS (μπορείτε ακόμα να το δοκιμάσετε με το localhost χωρίς HTTPS)
  • ο ιστότοπος πληροί τις ευρετικές αφοσίωσης που ορίζονται από το Chrome

manifest.json

{ "name": "FreeCodeCamp", "short_name": "FreeCodeCamp", "theme_color": "#00FF00", "background_color": "#00FF00", "display": "standalone", "Scope": "/", "start_url": "/", "icons": [ { "src": "assets/images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "assets/images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "assets/images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "assets/images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "assets/images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "assets/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "assets/images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "assets/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
  • nameείναι το όνομα της εφαρμογής ιστού. (Θα εμφανιστεί στην οθόνη εκκίνησης)
  • short nameείναι το σύντομο όνομα της εφαρμογής ιστού. (Θα εμφανιστεί κάτω από το εικονίδιο του μενού του τηλεφώνου)
  • theme_color είναι το χρώμα της κορυφής του προγράμματος περιήγησης.
  • background_color είναι το χρώμα φόντου της οθόνης εκκίνησης.
  • display είναι ο τρόπος με τον οποίο θα πρέπει να εμφανίζεται η εφαρμογή ιστού μόλις ξεκινήσει στο τηλέφωνο.
  • start_url καθορίστε το αρχικό URL του ιστότοπου.
  • icons είναι ένας πίνακας που αποθηκεύει όλες τις θέσεις, τα μεγέθη και τον τύπο των εικόνων.

Σε άλλες συσκευές

Αν και αυτή η μέθοδος δεν λειτουργεί σε iOS και Windows, υπάρχει μια εναλλακτική μέθοδος.

iOS

Στο iOS, το κουμπί "προσθήκη στην αρχική οθόνη" πρέπει να προστεθεί χειροκίνητα. Προσθέστε τις ακόλουθες μετα-ετικέτες στην αρχική ενότητα του HTML σας για να υποστηρίξετε το εικονίδιο της εφαρμογής ιστού iOS.

Παράθυρα

Στο Windows Phone, προσθέστε τις ακόλουθες μετα-ετικέτες στην κύρια ενότητα του HTML σας: