Un corso che analizza ogni aspetto dello sviluppo di app web progressive moderne.
Questo corso tratta le nozioni di base dello sviluppo di app web progressive in parti di facile comprensione. Nei moduli seguenti scoprirai che cos'è un'app web progressiva, come crearne una o eseguire l'upgrade dei tuoi contenuti web esistenti e come aggiungere tutte le parti per un'app installabile offline. Utilizza il riquadro dei menu per navigare tra i moduli. Il menu si trova a sinistra sul computer o dietro il menu a tre linee sui dispositivi mobili.
Imparerai le nozioni di base delle PWA, come il manifest delle app web, i service worker, come progettare un'app in mente e come utilizzare altri strumenti per testare ed eseguire il debug della tua PWA. Dopo aver seguito questi principi base, scoprirai l'integrazione con la piattaforma e il sistema operativo, come migliorare l'esperienza di installazione e utilizzo della tua PWA e come offrire un'esperienza offline.
Ogni modulo include demo interattive e autovalutazioni per testare le tue conoscenze. Potrai testare e provare demo su cellulare, tablet o laptop mentre giochi con la programmazione per capire le nozioni di base dei componenti di un'app web progressiva.
Questo corso è stato creato sia per gli sviluppatori web principianti che per quelli avanzati. Puoi esaminare la serie dall'inizio alla fine per acquisire una conoscenza generale della PWA dall'alto verso il basso oppure utilizzarla come riferimento per argomenti specifici. I principianti dello sviluppo web avranno bisogno di una conoscenza di base di HTML, CSS e JavaScript da seguire. Dai un'occhiata ai corsi Impara CSS e ai corsi HTML e JavaScript su MDN.
Ecco cosa imparerai:
Come iniziare
Se vuoi creare un'app web progressiva, ti starai chiedendo da dove iniziare, se è possibile eseguire l'upgrade di un sito web a una PWA senza partire da zero o come passare da un'app specifica per piattaforma a una PWA. Questo articolo ti aiuterà a rispondere a queste domande.
Competenze essenziali
Tutte le app web progressive sono, per lo più, siti web moderni, quindi è importante che il tuo sito web disponga di solide basi in materia di reattività, mobile e di tutti gli aspetti, design intrinseco e prestazioni web.
Design dell'app
Una delle differenze principali tra le app web progressive e le app web e i siti web classici è l'installabilità. Ciò crea un'esperienza autonoma più integrata nella piattaforma e nel sistema operativo. L'installazione consente nuova flessibilità e nuove responsabilità, dato che non avremo un'interfaccia utente del browser per i nostri contenuti.
Risorse e dati
Un'app web progressiva è un sito web; tutti i suoi asset sono gli stessi che si trovano sul web, ma con nuovi strumenti per far sì che questi asset vengano caricati velocemente online e disponibili offline.
Service worker
I service worker sono una parte fondamentale di una PWA. Consentono il caricamento rapido (indipendentemente dalla rete), l'accesso offline, le notifiche push e altre funzionalità.
Memorizzazione nella cache
Puoi utilizzare l'API Cache Storage per scaricare, archiviare, eliminare o aggiornare le risorse sul dispositivo. Questi asset possono quindi essere pubblicati sul dispositivo senza bisogno di una richiesta di rete.
Pubblicazione in corso
Utilizzando l'evento di recupero del service worker, puoi intercettare le richieste di rete e fornire una risposta utilizzando diverse tecniche.
Casella di lavoro
Workbox è un insieme di moduli che semplificano le interazioni dei service worker comuni, come il routing e la memorizzazione nella cache. Ogni modulo affronta un aspetto specifico dello sviluppo dei service worker. Lo scopo di Workbox è semplificare il più possibile l'utilizzo dei service worker, garantendo al contempo la flessibilità necessaria per soddisfare requisiti di applicazioni complessi, ove necessario.
Dati offline
Per creare una solida esperienza offline, devi implementare la gestione dello spazio di archiviazione. Strumenti come IndexedDB, Cache, Storage Manager, Persistent Storage e Content Index possono essere d'aiuto.
Installazione
Le app installate sono di facile accesso e possono sfruttare alcune integrazioni più profonde con il sistema operativo. Scopri come rendere installabile la tua PWA e ottenere questi vantaggi.
File manifest dell'app web
Il file manifest dell'app web è un file JSON che definisce come la PWA deve essere trattata come un'applicazione installata, nonché l'aspetto e il comportamento di base all'interno del sistema operativo.
Richiesta di installazione
Per i siti che soddisfano i criteri di installazione della PWA, il browser attiva un evento per richiedere all'utente di installarla. La buona notizia è che puoi utilizzare questo evento per personalizzare la tua richiesta e invitare gli utenti a installare la tua app.
Aggiorna
È probabile che la PWA debba essere aggiornata. Questo capitolo ti fornisce gli strumenti per aggiornare diverse parti della PWA, dagli asset ai metadati.
Miglioramenti
L'utente si aspetta una buona esperienza. In questo capitolo, scoprirai come migliorare la tua PWA con le schermate iniziali, le scorciatoie delle app e il funzionamento delle sessioni.
Rilevamento
Identificare il modo in cui gli utenti interagiscono con la tua app è utile per personalizzare e migliorare l'esperienza utente. Ad esempio, puoi verificare se la tua app è già installata sul dispositivo dell'utente e implementare funzionalità come il trasferimento della navigazione all'app autonoma dal browser.
Integrazione del sistema operativo
Ora la PWA funziona all'esterno del browser. Questo capitolo spiega come eseguire un'ulteriore integrazione con il sistema operativo dopo che gli utenti installano la tua app.
Gestione delle finestre
Una PWA all'esterno del browser gestisce la propria finestra. In questo capitolo comprenderai le API e le funzionalità per la gestione di una finestra all'interno del sistema operativo.
Funzionalità sperimentali
Esistono funzionalità PWA ancora in fase di realizzazione e puoi partecipare al loro sviluppo. In questo capitolo scoprirai il progetto Fugu, come registrarti per una prova dell'origine e come utilizzare le API sperimentali
Strumenti e debug
Esploreremo gli strumenti disponibili per sviluppare, eseguire il debug e testare le app web progressive.
Architettura
Durante lo sviluppo di una PWA, prendi alcune decisioni, ad esempio se creare un'applicazione a pagina singola o a più pagine e se la vuoi ospitare nella directory principale del dominio o all'interno di una cartella.
Gestione della complessità
Mantenere un'app web semplice può essere sorprendentemente complicato. In questo modulo imparerai come funzionano le API web con i thread e come puoi utilizzarla per i pattern PWA più comuni come la gestione dello stato.
Funzionalità
Le PWA non sono solo legate allo schermo. Questo capitolo riguarda le funzionalità attuali di una PWA in termini di hardware, sensori e utilizzo della piattaforma.
Conclusione
Passaggi e risorse successivi.
Allora, vuoi iniziare a imparare le PWA?