Un'introduzione alle app Web progressive
La maggior parte degli sviluppatori ha almeno sentito parlare di queste cose Applicazioni Web progressive. Questi sono ampiamente supportati da aziende tecnologiche come Google e stanno rapidamente diventando norma per applicazioni web multi-dispositivo.
Ma, qual è esattamente il differenza tra un tipico e a progressivo app web?
Per gli sviluppatori, è tutto un mondo di differenza. Le Web App progressive utilizzano le moderne API Web per crea esperienze app native nel browser. Ciò significa che gli sviluppatori possono creare app dinamiche a caricamento rapido senza utilizzare framework ibridi.
In questa guida, tratterò il nozioni di base delle app Web progressive, alcune funzioni primarie e come è possibile iniziare a creare le proprie.
Che cosa sono le app Web progressive?
Applicazioni Web progressive (o PWA) approfittare delle API del browser web per creare app native per app direttamente nel browser su qualsiasi dispositivo.
In definitiva, le applicazioni Web progressive comprendono a una manciata di tecnologie che gli sviluppatori possono utilizzare per creare potenti applicazioni native-like. Molti vengono da API Web come il API dei service worker o il Push API.
Ci sono alcuni requisiti chiamare qualcosa un PWA ma questi sono i i più importanti:
- È pienamente reattivo al cellulare.
- Aderisce a miglioramento progressivo.
- Capace di installare localmente su smartphone e tablet.
- Funziona offline senza Internet, utilizzando i lavoratori del servizio.
- Separa il contenuto dalla funzionalità usando la shell dell'app.
- Builts su HTTPS per una maggiore sicurezza.
- Scopribile nella ricerca di Google.
- ha pagine dinamiche simili ad app ma ognuno ancora ha il suo URL.
Se tu sei pensando di costruire una piccola app web potresti provare a creare un'applicazione web progressiva. Questo ha un po 'di una curva di apprendimento ma tu hai così tanto più controllo sull'esperienza utente di conseguenza.
Facciamo un tuffo nei fondamenti delle app Web progressive e impariamo cosa li rende migliori.
Lavoratori del servizio
Ogni singola app web progressiva ha bisogno di operatori di servizio. Questi sono come gli agenti del traffico che coordinano il punto in cui il traffico sta andando, da dove provengono i dati e come tutto viene organizzato e memorizzato nella cache.
In termini semplici, l'addetto all'assistenza funziona come un file JavaScript e viene eseguito sullo sfondo della tua app Web. Ogni volta che l'utente esegue un evento, chiama il script di servizio per estrarre dati, salvare dati o entrambi!
Usando il API Service Worker è essenziale per eseguire un PWA supportato offline. Questo è come te trasmettere i dati tra le viste e come puoi richiedere dati da un database locale. Ma questo è per lo più materiale avanzato che si apprende lavorando su un progetto PWA.
Dai un'occhiata al Ricettario dei lavoratori del servizio per frammenti di base e demo live. Questo è un modo fantastico per imparare studiando ciò che altri hanno fatto e clonazione che nelle tue app.
Se speri di creare un'applicazione web progressiva iniziare con l'API di Service Worker. Basta armeggiare con esso e impostare una semplice demo localmente. Questo metterà le basi per dopo creazione di funzionalità e pagine di applicazioni personalizzate che tutti corrono attraverso i lavoratori del servizio.
Per guide per principianti e snippet di codice dettagliato, Raccomando specificamente queste risorse:
- Iniziare con i lavoratori del servizio
- Iniziare con i lavoratori del servizio
- Esempio di operatore di servizi: esempio di pagina offline personalizzata
La shell dell'app
La maggior parte delle app native seguire un'architettura della shell dell'app dove sono i dati e il codice dell'app completamente separato dall'interfaccia utente. La shell dell'applicazione può essere memorizzato nella cache locale quindi ogni pagina viene caricata incredibilmente velocemente.
Questo continua con lo stesso “app nativa” sentendo dove il l'interfaccia rimane sempre visibile ma il contenuto / funzionalità carica diversamente ogni volta. Dai un'occhiata a questa pagina sul sito Google Developers per saperne un po 'di più su modello di shell di app.
La maggior parte delle app ha un shell di applicazione molto semplice e dovresti progettare la tua architettura con semplicità in mente.
In genere, la shell dell'app ha questi elementi principali:
- Top link della barra di navigazione.
- Pulsante Aggiorna (opzionale).
- Contenitore di sfondo della pagina.
Qui puoi trovare un bel case study Architettura della shell Web progressiva I / O di Google. Offrono anche alcuni suggerimenti per costruire la propria architettura della shell, memorizzandola nella cache e tirandolo automaticamente per ogni pagina.
Pensa all'architettura della shell come tutti gli elementi dell'interfaccia utente statici userai su ogni singola pagina. Questi dovrebbero essere separato dal resto del tuo codice e memorizzato nella cache per un facile riutilizzo. Anche controllare Intro di Google al soggetto con un sacco di codice snippet per aiutarti a iniziare.
Supporto online e offline
La maggior parte delle app native funziona bene senza Internet. Le Web App progressive sono pensate per seguire lo stesso comportamento.
Attraverso i lavoratori del servizio, puoi farlo crea cache locali con codice JSON per ogni pagina. In questo modo gli utenti possono sfoglia la tua app web localmente. Potresti anche include un file manifest per definire le icone, la schermata iniziale e altre impostazioni di avvio.
Se si utilizza l'API di Service Worker, dare un'occhiata al API Cache che è parte dello stesso framework. In genere è il modo migliore per memorizzare i dati localmente e accedervi dagli addetti all'assistenza dopo.
Puoi anche prova qualsiasi app web utilizzando Faro, uno strumento gratuito per verificare la conformità delle funzionalità e il supporto per le tecnologie PWA.
PWA sempre richiede supporto offline attraverso l'API di Service Worker, così possono lavorare in stati di bassa connettività. Lighthouse è il modo migliore per testare il supporto offline insieme a una serie di altre funzionalità.
Esempi dal vivo
Studiare live PWA e vedere come funzionano è un ottimo modo per imparare. Tuttavia, il mercato di Progressive Web App è ancora emergente, così molti dei migliori sono sparsi in vari angoli di Internet.
Ma grazie al Galleria di rocce PWA, Ho curato alcuni esempi straordinari per mostrare ciò che i PWA possono davvero fare.
1. Convertitore di valuta
Questo è abbastanza semplice convertitore di valuta prende i tassi di cambio e calcola la corrente differenze tra una tonnellata di valute in tutto il mondo.
Noterai che questa app web è pienamente reattivo, supporta il tocco, e aggiornamenti automatici senza alcun aggiornamento della pagina.
Queste sono solo alcune delle funzionalità che ti aspetti da qualsiasi tipica app web progressiva. Questo l'app può anche essere salvata localmente al telefono per funzionare offline, sebbene si connetta a un file JSON per controllare i tassi di cambio correnti.
2. Accenti inglesi
Semplicemente adoro questa app Web perché è sia unica che incredibilmente ben progettata. Il Mappa inglese degli accenti cura i video online dove le persone portano accenti da specifiche regioni degli Stati Uniti e del Regno Unito.
Cliccando ovunque sulla mappa, puoi ascoltare come le persone pronunciano certe parole in diverse parti del mondo. L'app è veloce e lo è open-source su GitHub per chiunque di controllare.
Gli interni vanno avanti Reagire / Redux con Firebase e un Connessione API a Google Maps. Sicuramente un grande esempio di qualcosa di abbastanza semplice per i principianti per studiare e imparare.
3. Pokedex.org
Un altro PWA abbastanza semplice è questo App Pokedex creato da Nolan Lawson. Ha anche pubblicato questo codice liberamente su GitHub, quindi ci siamo ancora un altro progetto vale la pena di curiosare e studiare.
Poiché questi dati possono rimanere statici, lo sono gestito tramite un motore locale chiamato PouchDB. Tutti i dati provengono da PokeAPI e quindi salvano come semplici JavaScript. Questo significa che puoi salvarlo localmente sul tuo telefono come una vera app nativa e funzionerà con o senza accesso a Internet. Molto bello, giusto?
Il tutto è alimentato da JavaScript, quindi è una testimonianza di quanto puoi fare con il codice frontend. Utilizza un sacco di cache con l'API di Service Worker, quindi è pazzesco veloce e super facile da usare.
4. Flipkart
Infine e più sorprendentemente, vediamo il Sito Web di Flipkart. Questo pieno L'e-commerce shop è, infatti, un'app web progressiva.
Suo pienamente reattivo e carica le pagine in modo dinamico. Gli URL delle pagine vengono aggiunti al browser, quindi puoi copiarli / incollarli e condividerli come un tipico sito web.
Questo è facilmente il PWA più complesso che abbia mai visto. Sono stupito che gli sviluppatori siano stati in grado di creare un'esperienza senza soluzione di continuità sul web per tutti gli utenti, per non parlare supporto dell'archiviazione locale offline, pure.
E, mentre non sono riuscito a trovare un repository per l'intero codice sorgente di Flipkart, c'è un Pagina di Flipkart su GitHub con frammenti di codice più piccoli dal loro team di sviluppatori.
Saperne di più
Le applicazioni Web progressive sono incredibilmente popolare e sicuramente guadagnerà vapore come sempre più sviluppatori passano da app native / ibride.
C'è un summit annuale chiamato il Vertice di app Web progressivo e pubblicano video su YouTube che puoi guardare gratuitamente. Questo è un ottimo modo per raccogliere alcune conoscenze professionali senza pagare un biglietto.
Ma se stai cercando informazioni più dettagliate Guide di codifica PWA sicuramente dai un'occhiata a questi tutorial:
- Guida per principianti alle app Web progressive
- Crea la tua prima app web progressiva con React
- Costruire un'applicazione Web progressiva con Polymer
