Què són les aplicacions web progressives i com puc instal·lar-ne una?

Què són les aplicacions web progressives i com puc instal·lar-ne una?

Les aplicacions dominen el vostre telèfon. Durant molt de temps, les aplicacions no van influir de la mateixa manera a l’escriptori ni al navegador. Això ha canviat en els darrers anys. Les aplicacions web progressives (PWA) estan creixent en estatura i alteren les nostres interaccions amb tot tipus de llocs web.





Però, què és exactament una aplicació web progressiva? Què fa un PWA que no faci un lloc web? Això és el que heu de saber sobre les aplicacions web progressives.



Què és una aplicació web progressiva?

Les aplicacions web progressives són aplicacions web que ofereixen un lloc habitual als usuaris, però que apareixen com una aplicació mòbil nativa. Els PWA intenten aportar la usabilitat d’una aplicació mòbil nativa al modern conjunt de funcions del navegador, tot aprofitant els avenços en ambdues àrees de desenvolupament.





Què defineix, doncs, un PWA?

  • universal : un PWA ha de funcionar perfectament (bé, gairebé) per a cada usuari, independentment del seu navegador.
  • Responsiu : Els PWA haurien de funcionar amb qualsevol dispositiu, com ara el portàtil, la tauleta, el telèfon intel·ligent, etc.
  • Disseny : el disseny ha d’imitar les aplicacions mòbils natives, és a dir, menús simplificats i fàcils de trobar, amb una interactivitat senzilla per a funcions avançades.
  • Caixa forta : Els PWA haurien d’utilitzar HTTPS per mantenir segures les dades dels usuaris.
  • Descoberta: els usuaris poden trobar PWA i són fàcilment identificables com a aplicació (en lloc de com a 'lloc').
  • Compromís: un PWA ha de tenir accés a funcions d'interacció natives com les notificacions push.
  • Actualitzacions: Els PWA es mantenen actualitzats i publiquen les darreres versions d’un servei o lloc.
  • Instal·lació: permetre als usuaris 'instal·lar' fàcilment el PWA a la pantalla d'inici sense necessitat d'una botiga d'aplicacions.
  • Compartir: Els PWA només requereixen un URL únic per compartir, sense cap instal·lació.

Com podeu veure, els PWA tenen com a objectiu proporcionar als usuaris una experiència completa del lloc web amb les funcions simplificades i el disseny d’interfícies d’una aplicació nativa.



Com funciona una aplicació web progressiva?

La clau de les aplicacions web progressives són els treballadors del servei de navegació.

Un treballador del servei és un script que s’executa al fons del navegador, “separat d’una pàgina web, obrint la porta a funcions que no necessiten una pàgina web ni la interacció de l’usuari”. Podeu utilitzar treballadors de serveis com notificacions automàtiques i sincronització en segon pla de moment, però el futur immediat de PWA dóna a aquests scripts una major potència.



Com a tal, els treballadors del servei constitueixen la base de l'estàndard PWA, utilitzant la memòria cau web per obtenir resultats gairebé instantanis.

Abans dels treballadors del servei, l’escriptura de memòria cau del navegador inicial era Application Cache (o App Cache). Les funcions de memòria cau d'aplicacions en una àmplia gamma de serveis sense connexió, però amb una certa probabilitat d'error. A més, App Cache té diverses limitacions conegudes, com ara Una llista a part explica.



Però el principal problema dels desenvolupadors és la manca d’interacció directa amb exactament el funcionament d’AppCache, que impedeix als desenvolupadors solucionar amb precisió els problemes a mesura que sorgeixen. Al seu torn, els llocs web i serveis amb funcionalitat fora de línia completa van ser una opció arriscada.

Els treballadors del servei, però, només duren el temps que es requereixi la seva acció. En un PWA, quan feu clic a alguna cosa o utilitzeu una funció, un treballador del servei comença a actuar. El treballador del servei (recordeu, és un script) processa l'esdeveniment i decideix si la memòria cau fora de línia pot completar la sol·licitud. La idea és que hi hagi diverses memòries cau fora de línia on triar el PWA, cosa que proporciona una gamma molt més àmplia de funcionalitats fora de línia.

A més, la memòria cau no és només per augmentar la velocitat fora de línia. Per exemple, us dirigiu a un PWA, però la vostra connexió és extremadament irregular. El treballador del servei ofereix una memòria cau prèvia, que funciona completament, sense interrompre la vostra experiència.

Suport del navegador d'aplicacions web progressiu

Hi ha dos requisits per utilitzar una aplicació web progressiva: un navegador compatible i un servei compatible amb PWA.

En primer lloc, vegem els navegadors. Teniu dues opcions per comprovar el suport del navegador PWA. El primer és el de Jake Archibald Està a punt el treballador de serveis ? que mostra fàcilment l'estat de PWA-ready dels principals navegadors, a més d'Internet de Samsung.

Per obtenir una visió general més detallada del suport del navegador PWA, consulteu-ho Puc utilitzar , un lloc web especialitzat en llistar la implementació de diverses tecnologies web i de navegadors per versió de navegador. Per exemple, si introduïu 'treballadors del servei' a la barra de cerca, trobareu una taula que mostra el número de versió amb què cada navegador implementava els treballadors del servei PWA.

La taula Can I Use Service Workers confirma que tots els principals navegadors admeten PWA. També il·lustra el suport de PWA per a diversos navegadors d’escriptori alternatius i navegadors mòbils.

Desglossant-ho una mica més:

  • Navegador d'escriptori (suport complet): Chrome, Firefox, Opera, Edge, Safari
  • Navegador d'escriptori (suport parcial / versió obsoleta): Navegador QQ, Naidu Naidu
  • Navegador mòbil (suport complet): Chrome, Firefox, Safari, navegador UC, Internet Samsung, navegador Mint, Wechat
  • Navegador mòbil (suport parcial / versió obsoleta): Navegador QQ, Navegador Android, Opera Mobile

Per tant, tots els principals navegadors admeten PWA. Microsoft Edge i Safari són les incorporacions més recents a la llista d'assistència completa. Per contra, el navegador QQ i Baidu ara utilitzen versions obsoletes i, per tant, han caigut al segon nivell.

Com trobar i instal·lar una aplicació web progressiva

Ara que ja sabeu quin navegador heu d’utilitzar, podeu pensar a buscar i instal·lar un PWA. Per a aquest exemple, faré servir un Samsung Galaxy S8 amb Google Chrome.

Les aplicacions web progressives són a tot arreu. Moltes empreses han adaptat els seus llocs i serveis per oferir una versió Progressive Web App. En molts casos, primer us trobareu amb un PWA quan aneu a la pàgina d'inici o al lloc de servei per a mòbils, que activa el Afegeix a la pantalla d'inici Caixa de diàleg.

Mireu el vídeo següent per veure què passa quan visiteu el Lloc mòbil de Twitter .

Per descomptat, no és útil visitar infinitat de llocs i esperar veure el disparador de la pantalla d’inici. De fet, consumeix molt de temps. Afortunadament, no cal fer-ho, ja que hi ha un parell de llocs dedicats a catalogar PWA.

Primer, proveu-ho outweb . Enumera una gamma bastant decent de PWA, amb freqüència que apareixen noves opcions. A continuació, proveu pwa.rocks. Té una selecció més petita, però alguns PWA útils que voldreu afegir al dispositiu.

A més, el gener de 2019, Chrome 72 per a Android es va enviar amb Trusted Web Activity (TWA). TWA permet obrir les pestanyes de Chrome en mode autònom. Al seu torn, això permet que els PWA apareguin a la botiga d'aplicacions de Google Play. Els primers PWA a aparèixer a Google Play van ser Twitter Lite , Instagram Lite i Google Maps Go , amb més configuracions per aparèixer al llarg del temps.

Galeria d'imatges (2 imatges) Amplia Amplia Tanca

Les aplicacions web progressives substituiran les aplicacions natives?

Les aplicacions web progressives són un pas híbrid excel·lent entre el navegador i una aplicació mòbil nativa. Els PWA substituiran completament les aplicacions natives? És un no difícil per a mi. Els PWA són excel·lents com a oferta lleugera, però, atès que actualment se centren principalment en la reproducció de llocs i serveis existents, no substituiran les aplicacions natives.

Almenys, de moment no.

es pot connectar airpods a Android

Els PWA sí que funcionen. Les dades disponibles a PWA Stats també ho fan. A continuació, es mostren alguns números interessants que il·lustren com els PWA estan alterant les nostres interaccions amb llocs web d’ús habitual:

  • Trivago va experimentar un augment del 150% de compromís entre els usuaris que van afegir la seva PWA a la pantalla inicial.
  • La pàgina d'inici 'PWA' de Forbes es carrega completament en només 0,8 segons, mentre que les impressions per visita augmenten un 10%. La PWA de Forbes també va duplicar la durada de la sessió de l'usuari.
  • Twitter Lite va registrar un augment del 65% de pàgines per sessió, amb un augment massiu del 75% en els tweets. També és interactiu 'en menys de 5 segons amb 3G'.
  • Alibaba va registrar un augment del 76% de les conversions mòbils.

Els PWA encara no són principals. Però amb l’enorme ventall d’avantatges que ofereixen, com ara l’estalvi d’espai al dispositiu, en sabreu més coses en el futur.

Compartir Compartir Tweet Correu electrònic Una guia per a principiants d’animació de la parla

Animar la parla pot ser un repte. Si esteu preparat per començar a afegir diàlegs al vostre projecte, us desglossarem el procés.

Llegiu a continuació Temes relacionats Sobre l'autor Gavin Phillips(945 articles publicats)

Gavin és l'editor júnior de Windows and Technology Explained, col·laborador habitual del Podcast Really Useful i revisor de productes habitual. Té un BA (Hons) Contemporary Writing with Digital Art Practices saquejat des dels turons de Devon, així com més d’una dècada d’experiència en escriptura professional. Li agrada una gran quantitat de te, jocs de taula i futbol.

Més de Gavin Phillips

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us