Come generare risorse PWA per iOS

Sei pronto per imparare come abilitare la modalità PWA per la tua app Vue.js sui dispositivi iOS, inclusa la creazione di una schermata iniziale con un'icona? In questo articolo, condividerò la mia esperienza di lavoro su un progetto client che richiedeva lo sviluppo di una modalità PWA per un'app, con dispositivi iOS come priorità. Ti guiderò attraverso il processo di abilitazione della modalità PWA, aggiungendo un file manifest.json e generando icone utilizzando un pratico pacchetto npm chiamato pwa-asset-generator.

Pila tecnica ‍

• Vue.js
• Pwa Asset Generator (pacchetto npm)
• Navigatore iOS Safari

Per usare pwa-asset-generator, devi installarlo globalmente usando npm. Una volta installato, puoi farlo

• Eseguire il comando pwa-asset-generator ./src/assets/icon.png --out ./public/iconsper generare gli asset richiesti. Il ./src/assets/icon.pngparametro si riferisce alla posizione del file dell'icona e il ./public/iconsparametro è la posizione in cui verranno salvate le risorse generate.

Dopo aver aggiunto il file manifest.json e i tag di collegamento, l'app era pronta per l'uso. Tuttavia, c'era una sfida significativa: la schermata iniziale era completamente bianca, senza icone. Dopo alcune ricerche, ho scoperto che per avere una schermata iniziale con un'icona, iOS prevede una procedura specifica che gli sviluppatori devono seguire rigorosamente.

La procedura era un processo lungo e noioso, che richiedeva allo sviluppatore di generare icone per ogni dispositivo che l'app doveva supportare. Ho tentato di generare le risorse manualmente, ma non funzionava. È stato allora che ho scoperto il pacchetto npm pwa-asset-generator.

Questo pratico pacchetto npm mi ha fatto risparmiare ore di lavoro manuale. Con un solo comando, pwa-asset-generator ha generato le risorse necessarie per i dispositivi iOS. Il pacchetto fornisce un'interfaccia semplice per generare icone e schermate iniziali per varie piattaforme, incluso iOS.

Dopo aver generato le risorse utilizzando pwa-asset-generator, sono stato in grado di aggiungere i tag richiesti al file HTML dell'app per abilitare la schermata iniziale con un'icona sui dispositivi iOS.

In conclusione, aggiungere la modalità PWA a un'app Vue.js e garantire che funzioni perfettamente sui dispositivi iOS può essere un'attività impegnativa. Tuttavia, con gli strumenti giusti, come il pacchetto pwa-asset-generator npm, puoi semplificare il processo e risparmiare ore di lavoro manuale. Allora perché non fare un tentativo e vedere come funziona per il tuo progetto?

Link utili

• https://www.npmjs.com/package/pwa-asset-generator
• Guida di Google sulla creazione di un manifest di un'app Web:https://developers.google.com/web/fundamentals/web-app-manifest