Spesso, la creatività del marketing incontra limiti tecnici. Una pagina Web può essere caricata solo così velocemente. UX è vincolata dai browser. Le soluzioni all'avanguardia sono accessibili solo a chi ha budget elevati.
Le applicazioni native risolvono alcuni di questi problemi ma portano il loro bagaglio: costi di sviluppo, irregolarità della piattaforma, requisiti di download, necessità di aggiornamento e problemi con l'indicizzazione della ricerca.
I siti mobili ottengono più visitatori, ma le app ottengono risultati migliori per i tassi di coinvolgimento e conversione:
Le app Web progressive (PWA) hanno il potenziale per combinare la copertura mobile con il coinvolgimento di app native. Ma pochi esperti di marketing sanno a cosa stanno entrando quando seguono questa strada, o decidono di non farlo.
Quell'ignoranza è costosa. Le decisioni relative alle riprogettazioni del sito sono spesso le più costose e meno reversibili che i marketer prendono. Prendi Hertz: ora stanno facendo causa al loro partner di marketing, Accenture, per $ 32 milioni dopo un sito fallito e una revisione dell'app.
Quando si tratta di riprogettazioni, potresti essere l'unico decisore. Potresti semplicemente essere una voce nella stanza. In ogni caso, devi vedere oltre gli oggetti luccicanti nei campi del web design e sapere come la tecnologia PWA ti aiuterà (o non ti aiuterà) a raggiungere i tuoi obiettivi di marketing.
Questo post fornisce conoscenze tecniche di base sui PWA e si concentra su aspetti – come UX, SEO e analisi – che incidono maggiormente sui team di marketing.
Cosa sono i PWA?
Nati dai problemi evidenziati sopra, i PWA sono – per Alex Russel, che ha coniato il termine – "siti Web che hanno preso tutte le vitamine giuste". Reso possibile dai browser moderni, i PWA consentono un'esperienza simile ad un'app all'interno di un normale browser, mentre si elude le insidie delle app native.
In altre parole, i PWA cercano di combinare il meglio di web e app:
- Velocità di caricamento estremamente elevate, senza download di app ingombranti e aggiornamenti costanti;
- Indicizzazione ottimizzata, senza sacrificare i vantaggi UX delle app native;
- Distribuibile su tutti i mercati di app, senza richiedere basi di codice diverse;
- Portata estesa tramite un minore utilizzo dei dati, senza ridurre le prestazioni;
- Migliore accessibilità attraverso l'eliminazione di download e l'acquisto di app;
- Navigazione web offline, accesso web all'hardware mobile, connettività …
Gartner ha previsto che i PWA sostituiranno il 50% delle app mobili entro il 2020. Diversi titani digitali – Twitter, Forbes, Uber, Alibaba, AliExpress – sono già passati ai PWA e c'è una crescente raccolta di case study che mostrano l'effetto positivo dei PWA sugli indicatori KPI di marketing: conversioni, entrate, tempo speso, coinvolgimento, reimpegno, lead, ecc.
Dai un'occhiata a uno di questi siti sul tuo dispositivo mobile per provare personalmente un PWA:
- Ordina un caffè Starbucks.
- Gioca al gioco 2048 nel tuo browser.
- Pianifica il tuo viaggio con MakeMyTrip.
- Sfoglia un negozio di e-commerce alla moda (demo).
Le PWA potrebbero sembrare il sogno di ogni operatore di marketing digitale che si avvera, ma ci sono sfide significative che affronteremo a breve. Per prima cosa, però, tuffiamoci in ciò che fa battere i PWA.
Come funzionano i PWA?
Il Web è disseminato di spiegazioni riformulate, quindi piuttosto che spargere più inchiostro, ecco uno dei migliori:
Un'applicazione Web progressiva è un'applicazione software, scritta nella piattaforma Web e in esecuzione nel browser, che si comporta come un'applicazione nativa fornita dal cloud.
È un'applicazione perché installa ed esegue il codice sul dispositivo o sul computer dell'acquirente, con più velocità e funzionalità rispetto alle "app JavaScript a pagina singola" del passato.
È web perché è scritto nelle lingue del Web (HTML, CSS e JavaScript) anziché in un linguaggio specifico del dominio o in un framework nativo prigioniero di una piattaforma.
Ed è progressivo perché si carica lentamente, insieme a tutti i dati e le risorse pertinenti, mentre l'utente naviga nel tuo negozio.
Le PWA sono compatibili con la maggior parte dei browser?
Il supporto moderno del browser di funzionalità come le notifiche push e il salvataggio della schermata principale è parte integrante dei PWA. Le PWA richiedono che i browser supportino gli "operatori del servizio" (più sotto), cosa che quasi tutti i browser moderni fanno. (Safari, spesso in ritardo, viene spesso definito "Internet Explorer dei PWA".)
Ma la mancanza di supporto per funzionalità specifiche non impedisce l'uso della PWA. Poiché i PWA sono siti Web, funzioneranno comunque in tutti i browser (solo senza tutte le funzionalità).
Perché gli "addetti all'assistenza" sono essenziali per i PWA
Un sito web che invia notifiche push quando non interagisci con il tuo telefono? Navigare in Internet quando non si dispone di una connessione? Questo (e altro) è possibile grazie al lavoratore dell'assistenza. Ma cos'è?
Matt Gaunt di Google ha definito il lavoratore del servizio:
Un lavoratore dell'assistenza è uno script che il browser esegue in background, separato da una pagina Web, aprendo la porta a funzionalità che non richiedono una pagina Web o l'interazione dell'utente.
Sappiamo tutti come funziona un sito Web: la base di codice è memorizzata su un server e chiunque può accedervi tramite il proprio browser digitando il nome di dominio o l'indirizzo IP diretto.
Quando si tratta di PWA, c'è un ulteriore elemento: il lavoratore dell'assistenza. Risiede fra il server e il browser, aggiungendo un nuovo livello di funzionalità in background per imitare le funzionalità simili a un'app (ad esempio, notifiche push per lo stato di consegna del cibo da un sito Web di un ristorante).
Mentre la navigazione web tradizionale consiste in un'interazione diretta da utente a server, il service man abilita indiretto interazione:
In sostanza, un lavoratore dell'assistenza è un file JavaScript sul lato client che viene aggiunto alla tua base di codice. (Se desideri una spiegazione più approfondita e più tecnica, dai un'occhiata a questo discorso tenuto dalla community degli sviluppatori di Google Chrome.)
La magia – e i limiti – della memorizzazione nella cache
L'operatore del servizio è anche un elemento cruciale per le prestazioni di PWA che dipende dalla memorizzazione nella cache. Le PWA offrono agli sviluppatori un controllo senza precedenti su ciò che è e non è memorizzato nella cache sul dispositivo dell'utente.
C'è un avvertimento: al primo caricamento, gli utenti non trarranno vantaggio dalla "magia della cache" che è responsabile dei successivi tempi di caricamento estremamente rapidi. PWA può servire un piccolo documento shell con risorse integrate per fornire l'impressione di un primo caricamento rapido, durante il quale viene installato il Service Worker.
Sebbene ciò possa migliorare leggermente l'esperienza del primo contatto, le PWA non devono ancora fornire velocità istantanee fin dall'inizio. È qui che arrivano le pagine mobili accelerate (AMP).
AMP per acquisizione, PWA per impegno
Gli AMP sono pagine HTML leggere progettate per essere caricate il più velocemente possibile. (Ecco un buon video esplicativo.) Gli AMP vengono utilizzati principalmente per pagine statiche (ad es. Siti di notizie) piuttosto che per le pagine più dinamiche che si trovano su, ad esempio, siti di e-commerce.
Google ha integrato AMP nei suoi risultati di ricerca mobile nel 2016 e le pagine che utilizzano AMP sono intrinsecamente prioritarie nei risultati di ricerca, contrassegnati con un badge "AMP":
Per siti Web complessi con molti elementi dinamici, è possibile combinare PWA e AMP per ottenere il meglio da ciascuna piattaforma.
PWA arricchisce le esperienze e il coinvolgimento degli utenti attraverso funzionalità come le notifiche push, mentre AMP può essere integrato su pagine statiche come la homepage e i post di blog.
Tokopedia, la più grande piattaforma di mercato in Indonesia, ha creato versioni AMP dei suoi tre principali tipi di landing page organici: prodotto, categoria e trend. Ciò ha creato 3,6 milioni di pagine AMP per la ricerca organica, il loro più grande imbuto per la scoperta di prodotti. Le pagine AMP hanno quindi trasferito gli utenti a un PWA per garantire velocità costanti e un'ottima UX.
Grazie alla comprensione di come funzionano i PWA, immergiamoci nei risultati della distribuzione della tecnologia.
L'impatto dei PWA su prestazioni, UX e accessibilità
Il vantaggio in termini di prestazioni di un PWA
Le prime impressioni contano. E la prima esperienza che i tuoi visitatori ottengono con il tuo sito non è né design né contenuto. È il tempo di caricamento della pagina. Il viaggio dell'utente più raffinato non significa nulla se non puoi portare i tuoi visitatori alla linea di partenza. E sui dispositivi mobili, circa il 53% dei visitatori abbandona una pagina che richiede più di 3 secondi per caricarsi.
Le PWA riducono il peso delle richieste di dati a una frazione del loro livello attuale. Gli adottanti PWA citano comunemente un miglioramento delle prestazioni del 300%. Per i siti che sono già ottimizzati per la velocità, ciò può portare a velocità di caricamento quasi istantanee, simili a quelle delle app native.
Anche senza integrare AMP, i PWA aiutano il caricamento della prima pagina dando la priorità alla prima pittura significativa e servendo un documento di shell leggera con risorse incorporate.
Vantaggi UX dei PWA
Storicamente, le app native hanno superato i siti Web mobili in termini di coinvolgimento degli utenti. Le PWA possono colmare questa lacuna con funzionalità precedentemente riservate alle app native, come nessun ricaricare quando si cambia pagina. (Quando si progetta un PWA, si consiglia di procedere come se si stesse progettando un'app nativa, non una pagina Web.)
Le PWA eliminano persino le app native in alcuni punti, come la loro eliminazione dell'attrito per l'installazione di app e la riduzione dei drop-off delle installazioni da web a app. Di seguito è riportato un esempio di UX da un normale sito Web (a sinistra) rispetto a un PWA (a destra):
Ecco altri sette vantaggi UX:
1. Salvataggio della schermata principale
In un ambiente sempre più orientato ai dispositivi mobili, l'immobile digitale più prezioso è la schermata iniziale di un utente, in precedenza posseduta quasi esclusivamente da app native. (L'aggiunta di siti Web alla schermata iniziale, in passato, è stata un processo in più passaggi. Chrome e altri browser moderni ora dispongono di una funzionalità integrata per il salvataggio della schermata iniziale con un tocco.)
Una presenza nella schermata principale mette il tuo logo in primo piano e il tuo sito a un clic di distanza.
2. Notifiche push
Il tecnico dell'assistenza rende possibili le notifiche push per il tuo sito Web mobile. Beyond the Rack ha ottenuto un aumento medio della spesa del 26% e il 72% in più di tempo speso in PWA dagli utenti che visitano tramite notifiche push. Carnival Cruise Line ha raggiunto un tasso di coinvolgimento del 42% con le sue notifiche push.
Lancio di campagne di marketing, informazioni sullo stato di avanzamento degli ordini, notizie sul marchio: è un canale di comunicazione unico per aiutare il tuo marchio a diventare parte del tuo utente ogni giorno (supponendo che usi saggiamente quel potere).
3. Modalità offline
La "modalità offline" non è un'esperienza offline completamente nativa (anche se potrebbe essere resa possibile, a un costo elevato per UX). Il tecnico dell'assistenza può sovrascrivere la gestione standard della cache del browser con regole personalizzate e l'archiviazione della cache è indipendente dal server remoto.
Ciò significa che, una volta interrotta la connessione, è possibile continuare la navigazione tramite l'addetto all'assistenza. Immagina di sfogliare il tuo negozio di abbigliamento preferito mentre fai il pendolare nella metropolitana di Londra o in una zona rurale con scarsa copertura.
Quando si preme il pulsante Indietro, anziché visualizzare un errore 404, il tecnico dell'assistenza consegna una pagina memorizzata nella cache con i dati recuperati in precedenza. La modalità offline è, in effetti, una soluzione sicura.
(Tecnicamente, è anche possibile effettuare il checkout offline; tuttavia, l'ordine verrà elaborato dopo il ripristino di una connessione.)
4. Distribuibile negli app store
Avere la tua app elencata negli app store è prezioso. È uno dei motivi per cui molte aziende investono nello sviluppo di app native (costose) per iOS e Android. Le PWA possono eludere tale necessità.
Grazie a tecnologie come Trusted Web Activity, che avvolge una scheda Web in un'applicazione, è possibile convertire qualsiasi app Web progressiva in un'app nativa in poche ore. (Esiste ancora una singola base di codice: l'app nativa è parzialmente una vista Web.)
È quindi possibile distribuirlo sia sull'App Store di Apple che su Google Play Store senza la necessità di sviluppare un'app nativa da zero.
5. Aggiornamenti automatici
Gli aggiornamenti sono un lavoro ingrato per gli utenti e una responsabilità per tutti i soggetti coinvolti. Le PWA non le richiedono, aggiornandosi attivamente in tempo reale, come un sito Web.
6. Agnosticismo sulla piattaforma
Ogni piattaforma ha vantaggi e svantaggi, lasciandoti il compito non invidiabile di superare i limiti specifici della piattaforma.
Le applicazioni indipendenti dalla piattaforma sono un'alternativa efficiente alla creazione e alla gestione di app native separate per iOS, Android e Web. Le PWA forniscono la stessa esperienza utente a quasi tutti (a seconda della disponibilità dei browser per il supporto del personale di servizio).
7. Linkability e indicizzazione
Come con qualsiasi sito Web, i PWA hanno URL e possono essere sottoposti a scansione e indicizzati dai motori di ricerca. A differenza delle app native, gli utenti possono trovare le pagine PWA direttamente nelle SERP. I tempi di caricamento più rapidi rendono felici i motori di ricerca e gli utenti.
Accessibilità
I rapidi tempi di caricamento di PWA supportano l'accessibilità per le aziende che operano nei mercati emergenti o devono fornire agli utenti un accesso coerente al sito in ogni momento.
Ad esempio, la rapida espansione di Uber nei nuovi mercati ha richiesto un'applicazione veloce e indipendente dal dispositivo che ha funzionato bene indipendentemente dalla posizione. Quindi, hanno optato per un PWA.
Le richieste sono arrivate a soli 50kb, consentendo al PWA di caricarsi in meno di 3 secondi su reti 2G.
Questi vantaggi sono accompagnati da alcune importanti sfide.
3 sfide PWA che riguardano gli esperti di marketing
Mentre un PWA potrebbe significare un'interfaccia utente familiare e una curva di apprendimento piatta per gli utenti, ci sono differenze significative nel back-end, che interessano gli sviluppatori e gli esperti di marketing.
Ci sono tre cose da tenere a mente:
- È facile interrompere la SEO.
- Le analisi PWA sono difficili da configurare e gestire.
- Il tuo team di sviluppo potrebbe non essere pronto per PWA.
1. È facile interrompere la SEO.
Ci sono idee sbagliate su PWA e SEO. Il più popolare afferma che "Google dà la priorità alle pagine PWA nei risultati di ricerca". Questo è falso.
Google non si preoccupa dei PWA, ma lo fa fa attenzione ai tempi di caricamento rapidi, che influenzano anche il comportamento dell'utente (e, a sua volta, restituiscono segnali a Google). In altre parole, semplicemente avere un PWA vinto‘ti aiuto con SEO, ma avendo un bene PWA può.
Ci sono altre idee sbagliate – e sfide – quando si tratta di PWA e SEO.
Perché SEO è una sfida?
I PWA sono siti basati su JavaScript. Le meccaniche di rendering per PWA differiscono da quelle dei siti Web standard basati su HTML. Per comprendere la differenza tra i due approcci, è necessario comprendere il rendering lato server e lato client:
- I siti Web standard utilizzano un metodo di rendering tradizionale chiamato Server-Side Rendering (SSR). Con SSR, il contenuto completo di una pagina viene pre-renderizzato sul lato server e trasmesso ogni volta che un utente richiede una pagina. Quindi, ogni volta che un utente visita una nuova pagina, l'intera pagina viene scaricata, anche se la differenza tra i due è minima.
- I siti Web basati su JavaScript utilizzano il rendering lato client (CSR). CSR esegue il rendering di un sito Web nel browser di un utente, da cui il nome. L'utente riceve un piccolo file JavaScript anziché un grande file HTML e il browser richiede solo gli elementi necessari quando si cambia pagina o si carica contenuto aggiuntivo. Questo è ciò che consente di caricare rapidamente i siti basati su JavaScript.
CSR è superiore dal punto di vista UX ma più complicato quando si tratta di SEO. Ti affidi ai motori di ricerca per rendere correttamente il tuo sito Web basato su JavaScript.
Di solito, quando un bot del motore di ricerca rileva una pagina, esegue la scansione del codice sorgente della pagina (ovvero HTML) e infine indicizza tutte le informazioni disponibili. Questo è facile per i siti Web che utilizzano HTML, poiché la maggior parte dei contenuti ricercati dai crawler è immediatamente disponibile. Ma poiché i PWA di solito hanno solo JavaScript nel codice sorgente, crea un livello aggiuntivo per l'analisi dei motori di ricerca.
I motori di ricerca recuperano il contenuto dai siti basati su JavaScript in ondate. Durante la prima ondata di indicizzazione, i motori di ricerca eseguono la scansione della pagina e indicizzano solo i contenuti non JavaScript. Man mano che diventano disponibili le risorse di rendering di un motore di ricerca, i crawler tornano alla tua pagina per finalizzare il processo.
Poiché si tratta di un processo che richiede molte risorse, anche per Google, potrebbero essere necessari alcuni giorni in più per l'indicizzazione dei contenuti. Per molte aziende Web, in particolare i siti di notizie, la velocità di indicizzazione dei contenuti è cruciale. Ciò può influire anche sui siti di e-commerce che hanno, ad esempio, campagne di marketing con offerte a tempo limitato.
C'è una soluzione, ma è traballante.
Esistono diverse soluzioni alternative. Il rendering dinamico, ad esempio, è il metodo raccomandato da Google. Con il rendering dinamico, combinate entrambi i metodi di rendering: i bot dei motori di ricerca ottengono la versione SSR; gli utenti umani ottengono la versione CSR.
(Conta come "occultamento", una comune tecnica SEO black hat per servire contenuti diversi ai motori di ricerca rispetto agli utenti? Secondo Google, No.)
I motori di ricerca, in particolare Google, hanno elogiato la tecnologia PWA, ma c'è poca comprensione della disponibilità dei motori di ricerca a gestire i siti JavaScript. Come ha ammesso Google:
Attualmente, è difficile elaborare JavaScript e non tutti i crawler dei motori di ricerca sono in grado di elaborarlo correttamente o immediatamente.
Altri principali motori di ricerca, come Bing e Yandex, non garantiscono una corretta indicizzazione dei siti Web basati su JavaScript.
Le migliori pratiche SEO rimangono invariate
Poiché la PWA non è un fattore di classificazione, tutte le best practice SEO tecniche, on-site e off-site si applicano anche alle PWA. Ecco alcuni dei soliti sospetti SEO che devi prendere in considerazione se stai migrando il tuo sito su un PWA:
- Implementa i canonici autoreferenziali per pagine uniche e canonicalizza i duplicati o imposta i meta robot su "noindex, nofollow". (Ciò è particolarmente importante se combini PWA e AMP.)
- Ogni pagina dovrebbe avere un URL univoco.
- Assicurati che i crawler possano accedere a contenuti preziosi nascosti in schede, scorrimento infinito, ecc. Se desideri che i crawler esplorino il contenuto dietro pulsanti, immagini, ecc., Utilizza un link HTML.
- Utilizza il markup Schema.org per aiutare i crawler a comprendere il contenuto della pagina e il markup Open Graph in modo che gli URL vengano condivisi correttamente sui social media.
- Non mostrare agli utenti contenuti diversi rispetto a quelli che mostri a Google (salvo per l'avvertenza sopra).
- Assicurati che la tua pagina superi il Test ottimizzato per dispositivi mobili di Google.
- Controlla le pagine per la velocità su Google Page Speed Insights.
2. L'implementazione di Analytics è complessa.
Ad esempio, supponi di aver implementato la navigazione offline e il checkout offline nel tuo PWA. In che modo i tuoi script di analisi e marketing di terze parti monitoreranno tali eventi?
La sfida principale per il tracciamento dei dati in un PWA è l'ecosistema ibrido di app Web. Dal momento che un PWA è un sito Web (lanciato in modo leggermente diverso), possono funzionare strumenti di tracciamento standard come Google Analytics.
Tracciamento di visualizzazione di pagina standard
Un PWA utilizza framework JavaScript come Angular o React, il che significa che il tracciamento standard delle visualizzazioni di pagina non funzionerà correttamente. Ad esempio, l'API Cronologia offre agli sviluppatori la possibilità di modificare l'URL di un sito Web senza un aggiornamento completo della pagina.
Poiché i PWA caricano dinamicamente il nuovo contenuto della pagina, il codice analitico viene attivato una sola volta. Quindi, come puoi monitorare il comportamento degli utenti su ogni pagina? L'implementazione di PWA richiede un codice di monitoraggio adeguato per garantire che le "visualizzazioni di pagina virtuali" vengano attivate al momento giusto.
L'implementazione del monitoraggio con Google Tag Manager o direttamente nel codice richiede test approfonditi e ponderati per evitare problemi comuni:
- Mancate corrispondenze tra percorsi / titoli di pagina e stato effettivo dell'applicazione;
- Visualizzazioni di pagina suddivise su più URL;
- Le visualizzazioni di pagina successive non vengono monitorate.
La complessità aumenta quando si tratta di e-commerce e altre implementazioni PWA avanzate. La sequenza di attivazione dei tag e il livello dati spingono frequentemente ostacoli; la governance a livello di dati è fondamentale.
Tracciamento delle caratteristiche uniche
In che modo è possibile tenere traccia delle caratteristiche uniche dei PWA (notifiche push, modalità offline, schermata di aggiunta alla home page, ecc.) Nell'analisi?
Eventi sulla pagina
Gli eventi on-page sono la parte più semplice. Non c'è differenza rispetto al normale monitoraggio web.
Le azioni dell'utente come l'abbonamento a notifiche push o l'aggiunta alla schermata iniziale sono facilmente tracciabili utilizzando i metodi standard di Google Analytics. Invia le informazioni al livello dati per l'evento personalizzato che desideri monitorare.
Assistere gli eventi dei lavoratori
Diventa più complicato quando la funzionalità viene avviata dal tuo addetto all'assistenza PWA, come la notifica push stessa.
Il tuo addetto all'assistenza PWA viene eseguito al di fuori dell'app principale, il che rende impossibile accedere alla coda di Google Analytics e inviare dati sulle notifiche attivate da PWA o dai dati di navigazione offline. In breve, significa che non è possibile tenere traccia del comportamento del lavoratore dell'assistenza tramite il normale codice di monitoraggio di Google Analytics. Al contrario, il tecnico dell'assistenza deve inviare gli hit direttamente a Google Analytics.
Ciò è possibile tramite il Measurement Protocol, che ignora il normale snippet analytics.js per inviare i dati direttamente dall'addetto al servizio a una specifica proprietà di Google Analytics.
Come è possibile? In definitiva, ciò che analytics.js fa è generare richieste POST personalizzate a una proprietà di Google Analytics in base al comportamento dell'utente sul posto. Nel caso del lavoratore dell'assistenza, lo stesso processo viene simulato manualmente.
Tracciamento modalità offline
Analytics, ovviamente, non funziona senza una connessione Internet. Tuttavia, esiste una soluzione alternativa.
Usando Fetch API, ottieni la capacità di ascoltare e rispondere alle richieste offline. L'operatore del servizio intercetta le richieste a Google Analytics e le riprova in seguito se la richiesta iniziale non riesce.
Per le visualizzazioni di pagina offline, è possibile che si desideri differenziare quali richieste sono avvenute mentre l'utente era offline rispetto a quelle che erano avvenute mentre l'utente era online. Puoi farlo con una dimensione personalizzata in Google Analytics che identifica per quanto tempo sono stati messi in coda gli hit (ovvero per quanto tempo l'utente è rimasto offline su una pagina specifica?).
Tutto ciò può essere fatto attraverso regolazioni del codice di monitoraggio, proprietà di analisi e una configurazione di Workbox.
3. Il tuo team di sviluppo potrebbe non essere pronto per PWA.
Lavorare con PWA richiede competenze in JavaScript, HTML, CSS e Chrome DevTools. Sebbene questi requisiti possano apparire di base, la maggior parte dei team ha personale a corto di personale. Un'analisi del settore ha dimostrato che gli ingegneri front-end sono la risorsa più limitata per i team IT.
Come prima sfida, il team di sviluppo deve riscrivere completamente il front-end del tuo sito Web per essere basato su JavaScript. Quel lavoro richiede esperienza in quadri specifici, come React.
In genere, stai cercando ingegneri front-end full-stack. Per consegnare un progetto PWA, devono essere:
- Professionista in JavaScript e framework come React.
- Esperienza con applicazioni a pagina singola (SPA).
- Sfrutta le conoscenze di DevOps per le infrastrutture, i lavoratori dell'assistenza e le configurazioni di rendering lato server.
- Ottima conoscenza dell'architettura PWA per il collegamento di tutti i componenti (ad es. Come le app mobili vengono inviate agli app store, come funziona la schermata aggiuntiva e come comunicano tra loro mobile e desktop).
- Comprensione delle analisi specifiche PWA e delle configurazioni SEO, gestione delle richieste dai componenti PWA back-end e front-end, impostazioni del livello di cache, ecc.
Le abilità sono facili da imparare ma difficili da padroneggiare, e niente meno che padronanza farà. JavaScript è stato il linguaggio di sviluppo più popolare nel 2018, con il framework React al primo posto in ciò che gli sviluppatori volevano imparare nel 2019.
Costi: siti Web, app e PWA
Come per ogni nuova iniziativa di marketing, spesso si pone una domanda centrale: quanto costerà? Indipendentemente dalla tua configurazione attuale, devi prima definire il tuo ecosistema web per capire un (potenziale) posto di PWA in esso.
Potresti avere un sito Web reattivo, un'app mobile e strumenti di supporto come widget, estensioni del browser, ecc. Ogni componente del tuo ecosistema web si impegna nello sviluppo e la pipeline di sviluppo del tuo team tecnico rispetto alla ripartizione dei costi potrebbe apparire come segue:
| Componente | Costo relativo |
|---|---|
| Sviluppo di siti Web reattivi e ricchi di funzionalità | $$$ |
| Ottimizzazione dell'esperienza mobile | $$ |
| Sviluppo di app mobili native Android | $$$$ |
| Sviluppo di app mobili native iOS | $$$$ |
Le PWA hanno il potenziale per ridurre i costi poiché un singolo investimento elimina la necessità di sviluppare app indipendenti:
| Componente | Costo relativo |
|---|---|
| Sviluppo di siti Web PWA con esperienza mobile simile a un'app | $$$ |
| Avvio dell'app PWA nell'App Store come app nativa | $ |
| Lancio dell'app PWA su Play Market come app nativa | $ |
Le app mobili native possono ancora esistere per i tuoi clienti abituali e fedeli (per ottenere il massimo dalla più stretta integrazione con l'hardware del telefono), ma il supporto di app mobili standalone può drenare risorse. In media, in base alla nostra esperienza nel mercato statunitense, i costi di sviluppo delle app native sono:
- Sviluppo di app native "Startup": $ 50K – 100K
- Sviluppo di app native "Enterprise": $ 500K +
Con una PWA, puoi ridurre questi costi utilizzando la stessa base di codice PWA per tutte le piattaforme: desktop, mobile e app.
Se hai già un negozio di e-commerce di successo, l'integrazione PWA richiede la riscrittura del front-end del tuo negozio. Questo di solito richiede 2-4 mesi di lavoro di sviluppo, a seconda della complessità del tuo negozio. Esistono framework PWA pronti all'uso come il tema Ionic e ScandiPWA per Magento, che possono integrare un PWA con il tuo sito in settimane, non mesi.
Se stai lanciando un nuovo sito web o un negozio di e-commerce, l'integrazione di un PWA all'inizio potrebbe offrire un valore maggiore. Per altre aziende, alcune domande chiave possono aiutare a determinare se una PWA merita considerazione. Se rispondi "No" a tutti e tre, un PWA non ha senso:
- Stai pensando di presentare un'app mobile?
- Il tuo sito è dovuto per un aggiornamento?
- Il traffico mobile sta dettando la domanda?
Conclusione
Le PWA hanno promesso di portare alcune delle migliori app native direttamente su un browser. Rispetto al web e sviluppo di app, i PWA sono più economici da creare e mantenere e sono indipendenti dalla piattaforma.
Gli esperti di marketing hanno voce in capitolo nelle riprogettazioni del sito. In molti casi, è la decisione più costosa (e più difficile da cambiare) che prenderanno. Oltre ai potenziali vantaggi, gli esperti di marketing sono saggi a ricordare le sfide e i requisiti SEO e di analisi prima di firmare un PWA.
Spetta anche agli esperti di marketing realizzare il potenziale dei PWA. Le notifiche push, ad esempio, non aiuteranno se gli esperti di marketing inviano spam ai potenziali acquirenti. Come con molte altre tecnologie, le PWA sono uno strumento: basta un artigiano esperto per creare valore con esso.
