Content
- L’ascens de PWAs
- PWA en acció avui
- Instal·lació
- Fora de línia i llançament immediat
- Experiència de primera classe
- Botigues d'aplicacions
- Integració de plataformes
- Disseny i reptes UX
- L’any de les PWA
De la mateixa manera que el disseny web sensible va tancar la bretxa entre els llocs d’escriptori i els mòbils fa uns anys, les tècniques d’aplicacions web progressives tanquen actualment la bretxa entre el web i el món de les aplicacions. Amb les experiències dels usuaris des d’escriptori fins a aplicacions mòbils que convergeixen ràpidament, sembla que evoluciona una Internet molt més elegant i eficient, tot i que inevitablement no sense alguns canvis significatius en el seu codi genètic subjacent.
- Com es crea una aplicació web progressiva
Evidentment, hi ha algunes pressions selectives significatives que condueixen això. Primer de tot, crear aplicacions natives per a cada nínxol no és necessàriament un ús eficient dels recursos: els usuaris acaben amb centenars d’aplicacions grans que malgasten amplada de banda i espai de disc valuós i les empreses gasten una gran quantitat de diners creant aplicacions només per abandonar-les. després de les seves primeres versions. I la majoria d’aquestes aplicacions només es basen en contingut web: informació provinent de serveis web o d’un sistema de gestió de contingut.
La definició d’una aplicació web progressiva no és concreta. Una PWA és només una aplicació web que utilitza diverses API i habilitats noves a la plataforma web que utilitzen millores progressives per oferir una experiència similar a una aplicació en totes les plataformes amb la mateixa base de codi. És més un conjunt de pràctiques recomanades i d’ús d’API que crea una excel·lent experiència d’aplicació per als vostres usuaris, de manera que no és com si teniu o no tingueu una PWA; és més com si el vostre lloc fos més o menys PWA.
Esteu a punt de començar a construir un lloc nou? Proveu d’utilitzar un creador de llocs web. I assegureu-vos d’obtenir el suport que necessiteu d’un servei d’allotjament web decent. O per a alguna cosa lleugerament diferent, consulteu la nostra guia sobre el millor emmagatzematge al núvol.
L’ascens de PWAs
Tot i que el nom PWA es va encunyar el 2015 a l’article Escaping Tabs Without Losing our Soul d’Alex Russell que treballava a Google per a l’equip de Chrome, en realitat el seu viatge no va començar aquí. Abans teníem aplicacions HTML (HTA), que van ser creades per Microsoft el 1999, juntament amb moltes altres plataformes d'aplicacions web de Nokia, BlackBerry i altres empreses. Aleshores, el 2007, Steve Jobs va presentar la que en aquell moment era l’única manera de crear aplicacions per a l’iPhone original: PWA, tot i que amb un nom diferent. Chrome va començar a partir d’aquí, va millorar les API uns anys més tard i va inventar el nom PWA.
Amb tantes experiències anteriors fallides que intenten portar contingut web al món de les aplicacions, per què creiem que funcionarà ara? En primer lloc, depèn de les empreses que ara treballen i promocionen les tecnologies darrere de PWA, com Microsoft, Google, Apple i Mozilla, per citar només algunes. A més, el rendiment de la plataforma web va arribar a un punt en què no es percep cap diferència quan es compara un PWA ben dissenyat amb una aplicació nativa. Aquestes condicions no han existit mai abans i és per això que la comunitat web ha decidit que ha arribat el moment de les PWA.
PWA en acció avui
Avui els PWA són totalment funcionals i instal·lables a:
- Android amb la majoria de navegadors, amb Chrome que ofereix la millor experiència
- iOS amb Safari
- Chromebook
- Windows 10 de Microsoft Store
- Inclou telèfons amb KaiOS, una bifurcació de Firefox OS, que actualment està disponible per a milions d’usuaris, principalment a l’Índia
A finals d’aquest any també s’oferirà assistència a macOS, Windows i Linux a través de Chrome. Avui està disponible com a senyal experimental 'Desktop PWA' si voleu provar-ho ara. La instal·lació a Windows on Edge sense l'ús de la botiga també arribarà més endavant, tot i que no es defineix un període de temps específic.
Si rellegiu la llista, podreu veure que totes les plataformes tenen o estan a punt de tenir suport per a PWA totalment instal·lables durant els mesos següents. I com que un PWA és només un lloc web amb funcions a la part superior que només s’activaran en navegadors compatibles, fins i tot podem dir que és compatible amb tots els navegadors des de la seva funcionalitat bàsica.
A més, actualment s’estan generant PWAs des de la majoria de CLI per a diferents marcs, inclosos l’angular 6+ CLI, React Create App, PWA Starter Kit de Polymer i Preact CLI. Finalment, a l’equip de Ionic Framework se li va ocórrer la idea de Capacitor, un recanvi de codi obert de Còrdova que fa possible les PWA natives a totes les botigues d’aplicacions.
Instal·lació
Un dels aspectes crítics d’un PWA és la instal·lació de l’aplicació. Aquest procés es realitza en dos passos opcionals: la descàrrega i l’emmagatzematge fora de línia dels fitxers de l’aplicació i la instal·lació d’icones al sistema operatiu. Com que tots dos passos són opcionals, podeu oferir una experiència fora de línia al navegador o podeu oferir una icona sense instal·lació fora de línia. Però un PWA autèntic hauria d’incloure tots dos: s’ha de publicar amb TLS sota HTTPS i l’usuari decidirà si l’utilitzarà al navegador o dins de la seva pròpia icona instal·lada.
Fora de línia i llançament immediat
El cervell d’una PWA és el treballador del servei, un fitxer JavaScript instal·lat al dispositiu de l’usuari que s’encarrega de descarregar els fitxers de l’aplicació, emmagatzemar-los en una memòria cau i, posteriorment, servir-los quan sigui necessari. Un cop instal·lat el treballador del servei, actua com un servidor intermediari de xarxa per a tots els recursos que necessita l’aplicació web: pot decidir recuperar-lo de la xarxa o lliurar-lo des de la memòria cau local, cosa que fa que l’aplicació estigui disponible fora de línia i també un parell de mil·lisegons, fins i tot si l’usuari té connexió, emulant un llançament d’aplicacions natives.
Per instal·lar un treballador del servei, el vostre document HTML haurà d'incloure alguna cosa com:
if (‘serviceWorker’ al navegador) navigator.serviceWorker.register ("sw.js");
Això instal·larà el fitxer "sw.js" als dispositius dels usuaris per a la carpeta actual del domini actual, un concepte conegut com l'abast. Després d'instal·lar-lo, el treballador del servei gestionarà les properes visites a qualsevol URL del seu àmbit.
Suposem que tenim un PWA amb quatre fitxers: index.html, app.js, app.css i logo.png. El primer és instal·lar aquests fitxers a la memòria cau del fitxer sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; jo mateix. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
A continuació, perquè el PWA es publiqui sempre des de la memòria cau, hem d’escoltar l’esdeveniment de recuperació del treballador del servei i decidir la política de memòria cau que s’utilitzarà, com ara la memòria cau primer amb el fragment següent.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
En aquest cas, cada vegada que l'usuari accedeix a la PWA (des d'un navegador o des d'una icona instal·lada), el motor obtindrà els fitxers de la memòria cau. Un avantatge dels PWA en comparació amb les aplicacions natives és que els dispositius no han de tornar a baixar tots els fitxers quan hi ha un canvi, només el fitxer que ha canviat amb un procés transparent. A més, encara podem baixar parts de l'aplicació sota demanda.
Però el repte és com saps quins fitxers es van actualitzar al servidor per poder substituir-los a la memòria cau? Si no voleu escriure un treballador de serveis de baix nivell per gestionar-lo, podeu utilitzar la caixa de treball de la biblioteca de codi obert, que us ajudarà amb la generació del treballador de serveis i el manifest de recursos per actualitzar el paquet instal·lat.
Tingueu en compte que els fitxers de la vostra PWA se suprimiran si hi ha pressió d'emmagatzematge al dispositiu, tret que sol·liciteu emmagatzematge permanent si està disponible:
if ('emmagatzematge' al navegador && 'persistir' a navigator.storage) navigator.storage.persist ();
A Chrome i a la majoria de navegadors Android, la vostra aplicació no pot utilitzar més del cinc per cent de l’espai disponible; a iOS és de 50 MB (prop de 50 MB) només per host; a Edge és variable segons la mida total de la memòria i a Windows Store és il·limitat.
Experiència de primera classe
Tenim el cervell i ara és hora del cor: el manifest de l’aplicació web. El propòsit de convertir un lloc web en un PWA no és només garantir que estigui disponible ràpidament o sense connexió, sinó també permetre que tingui la seva pròpia icona al sistema operatiu i oferir una experiència totalment independent com qualsevol altra aplicació instal·lada.
El manifest és un fitxer JSON que defineix les metadades del PWA que utilitza un navegador o una botiga d’aplicacions per tal de definir el comportament de la instal·lació.
El fitxer defineix diverses propietats com a metadades per al vostre PWA. Cada sistema operatiu llegirà aquestes propietats i farà tot el possible per coincidir amb l’experiència que preferiu. Per exemple, Android llegirà "display: standalone" i crearà una experiència d'aplicació normal. Amb 'display: minimal-ui', es crearà una experiència amb un URL visible i un certificat TLS, útil per a aplicacions sensibles a la seguretat. Amb "pantalla: pantalla completa" crea aplicacions totalment immersives sense barra d'estat ni botó de retrocés visible. Un conjunt d’icones i colors defineix com quedaran les pantalles de presentació o les barres de títol a la finestra de la vostra aplicació.
Hi ha alguns generadors de manifest, com ara el generador de manifest d'aplicacions web o el PWA Builder, que també canviaran la mida de la icona en diferents resolucions si en proporcioneu una d'alta resolució (mínim 512 píxels).
Quan tingueu el fitxer de manifest enllaçat al document HTML, els usuaris podran instal·lar l’aplicació mitjançant diferents tècniques en funció del navegador, normalment anomenat Afegeix a la pantalla d’inici, Instal·la o simplement Afegeix. Si Bing pot rastrejar el vostre PWA, Microsoft l’afegirà automàticament a Microsoft Store perquè els usuaris de Windows 10 el puguin instal·lar des d’allà.
En alguns sistemes operatius, el vostre PWA tindrà la possibilitat de capturar enllaços. Això vol dir que, després que l’usuari hagi instal·lat l’aplicació, qualsevol URL que estigui dins del vostre manifest s’obrirà dins dels límits de l’aplicació i no al navegador, independentment de si apareix al navegador o a altres aplicacions com WhatsApp, Facebook o un correu electrònic.
Si supereu els requisits PWA que definim aquí, algunes plataformes oferiran insígnies ambientals (una petita icona generalment a la barra d’URL que especifica que el web és instal·lable) o un bàner d’aplicacions web. Si ho preferiu, també podeu afegir el vostre propi botó d'instal·lació personalitzat mitjançant el fragment següent:
window.addEventListener ("beforeinstallpr ompt", funció (e) {e.prompt (); // mostrarà la sol·licitud nativa d'instal·lació})
Si s’instal·la el PWA, l’esdeveniment «instal·lat» es dispararà a l’objecte de la finestra perquè pugueu fer un seguiment de les estadístiques que l’escolten.
Botigues d'aplicacions
Un dels avantatges principals d’instal·lar des d’un navegador és poder evitar el procés d’aprovació de la botiga d’aplicacions o haver de pagar per ser editor. Això comporta avantatges evidents, com ara la publicació instantània, la creació d’aplicacions privades per a empreses o aplicacions que no s’han d’acceptar a les botigues.
Però algunes empreses volen estar a la botiga. A dia d’avui, les úniques botigues que accepten oficialment PWA són Windows Store i kaiOS Store. Afortunadament, amb eines com Capacitor (actualment a Alpha) o PWA Builder, també podem crear i signar paquets natius per a altres plataformes.
Hi ha alguns PWA ja publicats a Google Play Store, com ara Twitter Lite i Google Maps Go, actualment amb implementacions personalitzades. Chrome oferirà una solució des de Chrome 68 mitjançant activitats web de confiança. A partir d’aquest moment, podrem crear un paquet Android (APK) amb un llançador al nostre PWA i penjar-lo a la botiga. Per a Microsoft Store a Windows 10, el lloc PWA Builder està ajudant actualment amb la generació d’un paquet APPX Windows 10. Amb una visualització web, és possible que pugueu crear manualment una aplicació per a iOS per a l’App Store, però tingueu molta cura amb les regles de la botiga.
Integració de plataformes
Mitjançant la implementació de tècniques de millora progressiva, podreu utilitzar moltes funcions, com ara notificacions automàtiques, accés a càmeres i micròfons, geolocalització, sensors, pagaments, diàlegs compartits i emmagatzematge fora de línia. Totes aquestes funcions s’executen directament dins del model de seguretat del navegador, inclosos els diàlegs de permisos.
També podem comunicar-nos amb altres aplicacions mitjançant esquemes d’URI, com ara obrir Twitter, YouTube o WhatsApp a través de les seves URL o URI personalitzats, com ara WhatsApp: //.
Finalment, en crear PWA natius que es publiquin a la botiga mitjançant Capacitor o al Microsoft Store, podrem establir un pont a les API natives que ens permetran executar pràcticament qualsevol codi natiu. Aquesta integració amb Windows 10 inclou l'accés al maquinari, però també la integració amb el sistema operatiu, que ofereix opcions com Pin to Start. Per exemple, Twitter PWA us permet fixar qualsevol usuari a la pantalla inicial.
Disseny i reptes UX
Dissenyar PWA té reptes únics, per la qual cosa és important dedicar un temps a investigar, provar el màxim possible i tenir en compte el següent:
- Els usuaris esperaran experiències semblants a les aplicacions.
- El procés d’instal·lació encara és nou, per tant, hem de fer un esforç addicional per explicar com instal·lar l’aplicació.
- Actualitzar l’aplicació en segon pla sense la interacció de l’usuari és fantàstic, però també suposa alguns reptes per a la UX.
- A l’escriptori, el disseny web sensible té una nova frontera, ja que les finestres PWA poden ser petites, molt més petites que una finestra gràfica per a mòbils. Això significa que hem de crear visualitzacions específiques o petits ginys per a aquest format, tal com es veu avui a Chrome OS.
- Les notificacions automàtiques haurien d’afegir valor només a l’usuari, així que apreneu a preguntar en el moment adequat i no desaprofiteu l’oportunitat d’enviar missatges que no siguin útils ni interessants.
- Hem de dissenyar per al rendiment web i per a l'accés fora de línia.
L’any de les PWA
Amb l'addició d'iOS i ordinadors d'escriptori aquest any, els PWA estan a tot arreu avui dia. Però hem de recordar que el seu viatge tot just comença, així que espereu canvis freqüents i assegureu-vos de mantenir-vos al dia amb les últimes tècniques i idees per oferir una experiència d’usuari excel·lent mentre la plataforma evoluciona.
Aquest article es va publicar originalment al número 308 de net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs. Compra el número 308 aquí o bé subscriu-te aquí.
