Manifesto PWA: creare la tua app Web in modo semplice

Un manifest dell'app Web correttamente configurato è fondamentale per il processo di installazione della tua PWA, poiché senza di esso l'intero processo non è possibile. E sorprendentemente, non è nemmeno così difficile configurare correttamente il manifest dell'app Web.

Cosa serve?

Il manifest dell'app Web è una parte vitale della tua PWA in quanto determina il modo in cui l'app si presenta all'utente nella schermata iniziale e nella schermata iniziale dell'utente. Queste sono tutte fasi iniziali importanti che contribuiscono a dare forma alle impressioni degli utenti sulla tua app, motivo per cui è importante che tu la esegua correttamente.

Modi per configurare il tuo manifest.json

Iniziando da zero

Con un po' di dimestichezza con il formato dati JSON, puoi creare un manifest dell'app Web personalizzato senza alcuno sforzo.

Un tipico manifest.json dovrebbe assomigliare a questo:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "schermo intero",
    "scopo": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluzioni eCommerce di nuova generazione per Magento",
    "icone": [
        {
            "src": "/icon-192x192.png",
            "taglie": "192x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-256x256.png",
            "taglie": "256x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-384x384.png",
            "dimensioni": "384x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-512x512.png",
            "taglie": "512x",
            "tipo": "immagine/png"
        }
    ]
}

Puoi lasciare alcune parti del codice ma ci sono ancora alcuni membri obbligatori, senza i quali l'utente non sarà in grado di installare la tua PWA:

 nome, nome breve, icone, display, start_url

• name : il nome della tua app che viene visualizzato sotto l'icona della tua app nella schermata iniziale e in vari altri luoghi. Mantieni il valore della tua proprietà nome breve e semplice.

• short-name : quando il valore della tua proprietà name non rientra nello schermo dell'utente, verrà utilizzato il valore di questa proprietà. È consigliabile che il tuo short-name sia inferiore a 20 caratteri. In effetti, spara per 10 caratteri.

• icons : le icone dell'app, che possono essere costituite da più immagini per diversi sistemi operativi e dispositivi. È possibile definire un set di icone per il browser da utilizzare per l'aggiunta alla schermata iniziale, alla schermata iniziale e così via.

Ad esempio, solo iOS richiede 4 diverse dimensioni per 4 dei suoi dispositivi:

• iPhone: 120 x 120 pixel e 180 x 180 pixel
• iPad Pro: 167 x 167 pixel
• iPad e iPad mini: 152 x 152 pixel

Anche Google Chrome richiede almeno 2 diverse dimensioni per la piena usabilità su iOS e Android:

• 512 x 512 pixel
• 192 x 192 pixel

Affinché l'icona dell'immagine venga chiamata, viene utilizzato un insieme di proprietà, ovvero src , type e sizes .

• src : il percorso del file immagine dell'icona
• types : il tipo di file immagine
• sizes : larghezza x altezza dell'immagine, in pixel

 "icone": [ 
    {
       "src" : "/imgs/icon152.png",
       "tipo" : "immagine/png",
       "misure" : "192x192"
    },
    {
       "src" : "/imgs/icon215.png",
       "tipo" : "immagine/png",
       "misure" : "512x512"
    }
]

• display : indica come deve essere visualizzata l'app. Per un'esperienza coinvolgente e simile a un'app, ti consigliamo di impostarla su fullscreen (nessuna interfaccia utente). Tuttavia, sono disponibili anche opzioni come standalone , minimal-ui che sono meno costose in termini di prestazioni, ma a costo di perdere l'esperienza immersiva (la barra di stato potrebbe essere ancora visualizzata).

• start_url : indica il percorso da cui inizia l'applicazione. Il tuo valore start_url potrebbe essere un semplice / se la tua applicazione inizia dalla stessa directory .root in cui è archiviato manifest.json .

Membri facoltativi

Seguire il libro è una cosa, ma c'è sempre spazio per te per cercare di essere migliore. Di seguito sono riportate le chiavi consigliate per un manifest dell'app Web migliore e più dettagliato:

• scope : limita la misura in cui un utente può arrivare. Se l'utente naviga al di fuori dell'ambito, torna a una normale pagina Web all'interno di una scheda o finestra del browser. Per definire l'ambito del tuo sito web, inserisci semplicemente un / o inserisci l'URL completo del tuo sito web.

Note :
– Il comportamento predefinito di scope è la directory da cui viene servito manifest.json .
– Qualsiasi collegamento aperto nell'app Web verrà visualizzato all'interno della finestra PWA esistente. Per aprire qualsiasi collegamento in una scheda del browser, devi aggiungere target="_blank" al tag <a> .
– start_url deve essere nell'ambito.

• background_color : indica il colore di sfondo in determinati contesti di app. In particolare, questo campo può essere utilizzato per impostare il colore di sfondo della schermata iniziale.

• theme_color : indica il colore del tema degli elementi dell'interfaccia utente dell'app Web, ad esempio la barra degli indirizzi. La modifica viene applicata a tutto il sito ed è efficace solo quando il sito viene avviato dalla schermata iniziale.

Note : le tue configurazioni a livello di pagina, ad esempio il meta tag theme-color: <meta name="theme-color" content="#3367D6"> , sovrascriveranno il valore del tuo theme_color nel manifest dell'app web.

• description : Questo dovrebbe essere autoesplicativo.

• shortcuts : definisce le scorciatoie alle pagine all'interno dell'app Web. È possibile accedere alle scorciatoie dell'app premendo a lungo sull'icona di avvio dell'app su Android o facendo clic con il pulsante destro del mouse sull'icona dell'app sulla barra delle applicazioni (Windows)/sul dock (macOS).

 "scorciatoie": [
  {
    "name": "Notifiche",
    "url": "/utente/notifiche/",
    "description": "Notizie che ti sei perso"
  },
  {
    "name": "Crea nuovo ordine",
    "url": "/crea/ordina"
  },
  {
    "name": "La mia lista dei desideri",
    "url": "/utente/lista dei desideri"
  }
]

Utilizzo di un generatore di manifest di app Web

Un modo più semplice e senza sforzo per farlo sarebbe utilizzare un generatore di manifest di app Web. Il generatore prende il tuo input e, in base al quale, genera un manifest di app Web completamente funzionale che può essere utilizzato così com'è.

Collega il tuo manifest.json

Quando tutto è configurato correttamente, il passaggio successivo consiste nel fare riferimento al manifest dell'app Web nell'intestazione HTML.

 <link rel="manifest" href="/manifest.webmanifest">

Dopo aver fatto riferimento al manifest dell'app Web, tutti i browser supportati dovrebbero ora riconoscere correttamente manifest.json . Per un elenco completo dei browser attualmente supportati, dai un'occhiata a CanIUse.

Conclusione

E questo è tutto per un semplice manifest di app Web. Non dovrebbe essere necessario molto tempo per creare un manifest.json completamente funzionale. E solo con alcune modifiche aggiuntive, la tua app Web può essere resa installabile proprio come qualsiasi altra PWA.