Vés al contingut

Aplicació web progressiva

De la Viquipèdia, l'enciclopèdia lliure
Logotip

Una aplicació web progressiva (per les sigles en anglès, PWA, o progressive web application) és un tipus d'aplicació web que es pot instal·lar en un dispositiu com a aplicació independent, suposant un híbrid entre una pàgina web i una aplicació web tradicional.[1] La seva característica clau és que pot funcionar sense connexió a Internet (o amb una connexió de mala qualitat), ja que desa la informació essencial directament al teu dispositiu utilitzant la tecnologia del navegador.

Les PWA es van introduir a partir del 2016 com a alternativa a les aplicacions natives (específiques del dispositiu) per determinats recursos web, amb l'avantatge que no requereixen un agrupament o distribució separats per a diferents plataformes. Es poden utilitzar en una gamma de sistemes diferents, inclosos dispositius d'escriptori i mòbils. La publicació de l'aplicació en sistemes de distribució digital, com ara l'Apple App Store, Google Play o la Microsoft Store a Windows és opcional.

Com que una PWA es lliura en forma de pàgina web o lloc web creat amb tecnologies web comunes com HTML, CSS, JavaScript i WebAssembly, pot funcionar en qualsevol plataforma amb un navegador compatible amb PWA. A partir del 2025, les funcions de la PWA són compatibles en diversos graus amb Google Chrome, Apple Safari, Brave, Firefox per a Windows i Android i Microsoft Edge.[2][3]

Història

[modifica]

Predecessors

[modifica]

A la Conferència Mundial de Desenvolupadors d'Apple del 2007, Steve Jobs va anunciar que l'iPhone "executaria aplicacions creades amb els estàndards d'Internet Web 2.0". No es requeria cap kit de desenvolupament de programari (SDK) i les aplicacions s'integrarien completament al dispositiu a través del motor del navegador Safari. Aquest model es va canviar posteriorment a l'App Store, com a mitjà per apaivagar els desenvolupadors frustrats.[4] A l'octubre de 2007, Jobs va anunciar que es llançaria un SDK l'any següent.[5] Com a resultat, tot i que Apple va continuar donant suport a aplicacions web, la gran majoria d'aplicacions d'iOS es van desplaçar cap a l'App Store.

A principis de la dècada de 2010, les pàgines web dinàmiques van permetre utilitzar tecnologies web per crear aplicacions web interactives . El disseny web responsiu i la flexibilitat de mida de pantalla que proporciona han fet que el desenvolupament de PWA sigui més accessible. Les millores contínues a HTML, CSS i JavaScript van permetre a les aplicacions web incorporar nivells més alts d'interactivitat, fent possibles experiències semblants a les natives en un lloc web.[6]

El 2013, Mozilla va llançar Firefox OS. Estava pensat com un sistema operatiu de codi obert per executar aplicacions web com a aplicacions natives en dispositius mòbils. Firefox OS es basava en el motor de renderització Gecko amb una interfície d'usuari anomenada Gaia, escrita en HTML5. El desenvolupament de Firefox OS va acabar el 2016,[7] i el projecte es va suspendre completament el 2017,[8] tot i que es va utilitzar una bifurcació de Firefox OS com a base de KaiOS, una plataforma de telèfons amb funcions bàsiques.[9]

Introducció inicial

[modifica]

El 2015, la dissenyadora Frances Berriman i l'enginyer de Google Chrome Alex Russell van encunyar el terme "Aplicacions Web Progressives" (PWA, en anglès)[10] per descriure les aplicacions que aprofiten les noves funcions compatibles amb els navegadors moderns, inclosos els service workers i els manifests d'aplicacions web (en anglès, web app manifests), que permeten als usuaris actualitzar les aplicacions web a aplicacions web progressives al seu sistema operatiu (SO) natiu. Aleshores, Google va fer esforços significatius per promoure el desenvolupament de PWA per a Android.[11] Firefox va introduir la compatibilitat amb els service workers el 2016, i Microsoft Edge i Apple Safari ho van seguir el 2018,[12] fent que els service workers estiguessin disponibles en tots els sistemes principals.

El 2019, les PWA ja eren compatibles amb les versions d'escriptori d'alguns navegadors, com ara Microsoft Edge[13] (a Windows) i Google Chrome[14] (a Windows, macOS, ChromeOS i Linux).

El desembre de 2020, Firefox, en la seva versió per a escriptori, va abandonar la implementació de les PWA (en concret, va eliminar la configuració prototip de "navegador específic del lloc", que havia estat disponible com a funció experimental). Un arquitecte de Firefox va assenyalar: "El senyal que espero que enviem és que la compatibilitat amb les PWA no arribarà aviat al Firefox per a escriptori".[15] Mozilla admet les PWA a Android i té previst continuar donant-hi suport.[16] La versió 143.0 de Firefox, publicada el setembre de 2025, va afegir compatibilitat amb les PWA a Windows.[17]

Compatibilitat amb el navegador

[modifica]
Navegador Suport Comentari
Windows macOS Linux Android iOS i iPadOS
Navegadors basats en Chromium Sí Sí Sí Sí N/A Inclou Google Chrome, Microsoft Edge,[13] Brave, Opera, Vivaldi,[18] i d'altres.
Firefox Sí No No Parcialment No
Safari N/A Parcialment N/A N/A Parcialment

Característiques

[modifica]

Les aplicacions web progressives estan dissenyades per funcionar en qualsevol navegador que compleixi els estàndards web adequats. Com passa amb altres solucions multiplataforma, l'objectiu és ajudar els desenvolupadors a crear aplicacions multiplataforma més fàcilment que el què suposa crear aplicacions natives per cada sistema. Les aplicacions web progressives utilitzen l'estratègia de desenvolupament web de millora progressiva.

Algunes aplicacions web progressives utilitzen un enfocament arquitectònic anomenat Model App Shell.[19] En aquest model, els treballadors de servei emmagatzemen la interfície d'usuari bàsica o "shell" de l'aplicació web de disseny web responsiu a la memòria cau fora de línia del navegador. Aquest model permet que les PWA mantinguin un ús similar al natiu amb o sense connectivitat web. Això pot millorar el temps de càrrega, proporcionant un marc estàtic inicial, un disseny o arquitectura en què el contingut es pot carregar progressivament i dinàmicament.[20]

Criteris tècnics

[modifica]

Els criteris tècnics bàsics perquè un lloc web es consideri una aplicació web progressiva i, per tant, pugui ser instal·lada pels navegadors, van ser descrits per Russell el 2016[21] i actualitzats des d'aleshores:[22][23]

  • Originar-se des d'un origen segur. Fent servir TLS i sense contingut mixt actiu. Les aplicacions web progressives s'han de fer servir mitjançant HTTPS per garantir la privadesa, la seguretat i l'autenticitat del contingut de l'usuari.
  • Registrar un service worker amb un gestor de fetch. Les aplicacions web progressives han d'utilitzar service workers per crear memòries cau de contingut programables. A diferència de la memòria cau web HTTP normal, que emmagatzema el contingut a la memòria cau després del primer ús i després es basa en diverses heurístiques per endevinar quan ja no es necessita el contingut, les memòries cau programables poden precarregar explícitament el contingut abans que s'utilitzi per primera vegada, descartant-lo explícitament quan ja no es necessita.[24] Aquest requisit ajuda a que les pàgines siguin accessibles fora de línia o en xarxes de baixa qualitat.
  • Referenciar un manifest d'aplicació web. El manifest ha de contenir com a mínim les cinc propietats clau: name, o short_name, start_url, i display (amb un valor de standalone, fullscreen o minimal-ui ), i icons (amb 192px i un 512px). La informació continguda al manifest fa que les PWA es puguin compartir fàcilment a través d'una URL, que els motors de cerca les puguin descobrir i alleuja els procediments d'instal·lació complexos (però les PWA encara poden aparèixer a una botiga d'aplicacions de tercers). A més a més, les PWA admeten interaccions i navegació natives d'estil d'aplicació, com ara afegir-les a la pantalla d'inici, mostrar pantalles de benvinguda, etc.

Tecnologies

[modifica]

Hi ha moltes tecnologies que s'utilitzen habitualment per a crear aplicacions web progressives. Una aplicació web es considera una PWA si compleix els criteris d'instal·lació, per tant, pot funcionar fora de línia i es pot afegir a la pantalla d'inici del dispositiu. Per complir aquesta definició, totes les PWA requereixen com a mínim un manifest i un service worker.[25][26][27] Es poden utilitzar altres tecnologies per emmagatzemar dades, comunicar-se amb servidors o executar codi.

Manifest

[modifica]

El manifest d'aplicacions web[28] és una especificació del World Wide Web Consortium (W3C) que defineix un manifest basat en JSON (normalment anomenat manifest.json) per proporcionar als desenvolupadors un lloc centralitzat on posar les metadades associades a una aplicació web, incloent-hi:

  • El nom de l'aplicació web
  • Enllaços a les icones de l'aplicació web o als objectes de tipus imatge
  • L'URL preferida per iniciar o obrir l'aplicació web
  • Dades de configuració de l'aplicació web
  • Orientació predeterminada de l'aplicació web
  • L'opció per definir el mode de visualització, per exemple, en pantalla completa

Aquestes metadades són crucials perquè una aplicació s'afegeixi a la pantalla d'inici o que aparegui a la llista juntament amb les aplicacions natives.

Suport per a iOS

[modifica]

El Safari per a iOS implementa parcialment els manifests, mentre que la majoria de les metadades de la PWA es poden definir mitjançant extensions específiques d'Apple a les metaetiquetes. Aquestes etiquetes permeten als desenvolupadors habilitar la visualització a pantalla completa, definir icones i pantalles de presentació i especificar un nom per a l'aplicació.[29][30]

Service workers (Treballadors de servei)

[modifica]

Un treballador de servei és un treballador web que implementa un proxy de xarxa programable que pot respondre a sol·licituds web HTTP del document principal. És capaç de comprovar la disponibilitat d'un servidor remot, emmagatzemar contingut a la memòria cau quan aquest servidor està disponible i servir aquest contingut al document més tard. Els treballadors de servei, com qualsevol altre treballador web, treballen per separat del context del document principal. Els treballadors de servei poden gestionar notificacions push i sincronitzar dades en segon pla, emmagatzemar o recuperar sol·licituds de recursos, interceptar sol·licituds de xarxa i rebre actualitzacions centralitzades independentment del document que les va registrar, fins i tot quan aquest document no està carregat.

Els treballadors de servei passen per un cicle de vida de tres passos: registre, instal·lació i activació. El registre implica indicar al navegador la ubicació del treballador de servei com a preparació per a la instal·lació. La instal·lació es produeix quan no hi ha cap treballador de servei instal·lat al navegador per a l'aplicació web o si hi ha una actualització del treballador de servei. L'activació es produeix quan totes les pàgines de la PWA es tanquen, de manera que no hi hagi conflictes entre la versió anterior i l'actualitzada. El cicle de vida també ajuda a mantenir la coherència en canviar entre versions d'un treballador de servei, ja que només un únic treballador de servei pot estar actiu per a un domini.

WebAssembly

[modifica]

WebAssembly permet que el codi precompilat s'executi en un navegador web, a una velocitat gairebé nativa.[31] Així, es poden afegir biblioteques escrites en llenguatges com C a les aplicacions web. Anunciat el 2015 i publicat per primera vegada el març de 2017, WebAssembly es va convertir en una recomanació del W3C el 5 de desembre de 2019[32][33] i va rebre el Premi de Programari de Llenguatges de Programació d'ACM SIGPLAN el 2021.[34]

Emmagatzematge de dades

[modifica]

Els entorns d'execució de les aplicacions web progressives es descarreguen sempre que és possible, de manera que les aplicacions web progressives han d'emmagatzemar la major part del seu estat intern a llarg termini (dades d'usuari, recursos de l'aplicació carregats dinàmicament) d'una de les maneres següents:

Emmagatzematge web
L'emmagatzematge web és una API estàndard del W3C que permet l'emmagatzematge de valor-clau en navegadors moderns. L'API consta de dos objectes, sessionStorage (que permet l'emmagatzematge només de sessió que s'esborra en finalitzar la sessió del navegador) i localStorage (que permet l'emmagatzematge que persisteix entre sessions).[35]
API de bases de dades indexades
L' API de bases de dades indexades és una API de bases de dades estàndard del W3C disponible a tots els navegadors principals. L'API és compatible amb els navegadors moderns i permet l'emmagatzematge d'objectes JSON i qualsevol estructura representable com a cadena.[36] L'API de bases de dades indexades es pot utilitzar amb una biblioteca contenidora que proporciona construccions addicionals al seu voltant.

Comparació amb aplicacions natives

[modifica]

El 2017, Twitter va llançar Twitter Lite, una alternativa PWA a les aplicacions natives oficials d'Android i iOS. Segons Twitter, Twitter Lite només consumia entre l'1 i el 3% de la mida de les aplicacions natives.[37] Starbucks ofereix una PWA que és un 99,84% més petita que la seva aplicació equivalent per a iOS. Després de desplegar la seva PWA, Starbucks va duplicar el nombre de comandes en línia, i els usuaris d'escriptori van fer comandes aproximadament al mateix ritme que els usuaris d'aplicacions mòbils.[38]

Una revisió del 2018 publicada per Forbes va descobrir que els usuaris de la PWA de Pinterest passaven un 40% més de temps al lloc web en comparació amb el lloc web mòbil anterior. Les taxes d'ingressos publicitaris també van augmentar un 44% i les interaccions principals un 60%.[39] Flipkart va veure que el 60% dels clients que havien desinstal·lat la seva aplicació nativa van tornar a utilitzar la PWA de Flipkart. Lancôme va veure una disminució del 84% en el temps fins que la pàgina és interactiva, cosa que va comportar un augment del 17% en les conversions i un augment del 53% en les sessions mòbils a iOS amb la seva PWA.[40]

Llançament a través de botigues d'aplicacions

[modifica]

Com que una PWA no requereix una agrupació o distribució separada per a diferents plataformes i està disponible per als usuaris a través del web, no cal que els desenvolupadors la publiquin a través de sistemes de distribució digital com l'Apple App Store, Google Play, Microsoft Store o la Samsung Galaxy Store. Les principals botigues d'aplicacions admeten la publicació de PWA en diversos graus.[41] Google Play, Microsoft Store[42] i Samsung Galaxy Store admeten les PWA, però Apple App Store no. Microsoft Store publica algunes PWA qualificades automàticament (fins i tot sense sol·licituds dels autors de l'aplicació) després de descobrir-les mitjançant la indexació del Bing.[43]

Vegeu també

[modifica]
  • Google Lighthouse, una eina d'auditoria de codi obert per a PWA desenvolupada per Google.

Referències

[modifica]
  1. ↑ «What are Progressive Web Apps? PWA Guide for Beginners» (en anglès). freeCodeCamp.org, 18-01-2024. [Consulta: 6 maig 2024].
  2. ↑ «Can I use pwa?». CanIUse. [Consulta: 27 gener 2021].
  3. ↑ «Is Service Worker Ready?». Jake Archibald.
  4. ↑ «Jobs' original vision for the iPhone: No third-party native apps». 9to5Mac, 21-10-2011. [Consulta: 22 maig 2019].
  5. ↑ Ritchie, Rene. «App Store Year Zero: Unsweet web apps drove iPhone to an SDK» (en anglès). iMore, 05-03-2018. [Consulta: 23 maig 2019].
  6. ↑ Marcotte, Ethan. «Responsive Web Design». A List Apart, 25-05-2010. [Consulta: 25 maig 2010].
  7. ↑ «Mozilla ends commercial Firefox OS development - gHacks Tech News» (en anglès americà). gHacks Technology News, 27-09-2016. [Consulta: 5 maig 2022].
  8. ↑ Hoffman, Chris. «Mozilla is stopping all commercial development on Firefox OS» (en anglès). PCWorld, 28-09-2016. [Consulta: 17 març 2021].
  9. ↑ «KaiOS, a feature phone platform built on the ashes of Firefox OS, adds Facebook, Twitter and Google apps» (en anglès americà). TechCrunch, 26-02-2018. [Consulta: 17 març 2021].
  10. ↑ Russell, Alex. «Progressive Web Apps: Escaping Tabs Without Losing Our Soul», 15-06-2015. [Consulta: 15 juny 2015].
  11. ↑ Ladage, Aaron. «Progressive Web Apps Are Here and They're Changing Everything». DEG, 17-04-2018. [Consulta: 23 maig 2019].
  12. ↑ «Can I use... Support tables for HTML5, CSS3, etc». caniuse.com. [Consulta: 16 maig 2021].
  13. 1 2 «Progressive Web Apps on Windows overview» (en anglès). Microsoft Edge Documentation, 13-03-2021. [Consulta: 13 març 2021].
  14. ↑ LePage, Pete. «Progressive Web Apps on Desktop» (en anglès). Google Developers, 04-06-2019. [Consulta: 13 setembre 2019].
  15. ↑ Newman, Jared. «Firefox just walked away from a key piece of the open web» (en anglès americà). Fast Company, 26-01-2021. [Consulta: 27 gener 2021].
  16. ↑ «eBay PWA». Mozilla. [Consulta: 25 desembre 2024].
  17. ↑ «Firefox 143.0, See All New Features, Updates and Fixes», 16-09-2025. [Consulta: 2 novembre 2025].
  18. ↑ «Get your PWA on» (en anglès). Vivaldi Browser, 07-10-2021. [Consulta: 11 octubre 2021].
  19. ↑ «The App Shell Model».
  20. ↑ Osmani, Addi. «The App Shell Model | Web Fundamentals» (en anglès). Google Developers. [Consulta: 23 maig 2019].
  21. ↑ Russell, Alex. «What, Exactly, Makes a Progressive Web App», 12-09-2016. [Consulta: 18 octubre 2016].
  22. ↑ «What does it take to be installable?» (en anglès). web.dev. [Consulta: 19 maig 2021].
  23. ↑ «Progressive Web App». web.dev. [Consulta: 15 juny 2015].
  24. ↑ «Service worker caching and HTTP caching» (en anglès). web.dev. [Consulta: 19 maig 2021].
  25. ↑ «Discoverable» (en anglès americà). Mozilla Developer Network. [Consulta: 24 abril 2017].
  26. ↑ «Network independent» (en anglès americà). Mozilla Developer Network. [Consulta: 24 abril 2017].
  27. ↑ «Instant Loading Web Apps with an Application Shell Architecture» (en anglès). Google Developers. [Consulta: 24 abril 2017].
  28. ↑ «Web Manifest Docs on MDN». MDN Web Docs, 08-08-2025.
  29. ↑ «What's new on iOS 12.2 for Progressive Web Apps». Medium, 27-03-2019.
  30. ↑ «Configuring Web Applications». Safari Web Content Guide.
  31. ↑ «WebAssembly Concepts». MDN. [Consulta: 14 agost 2018].
  32. ↑ World Wide Web Consortium. «WebAssembly Core Specification». World Wide Web Consortium (W3). [Consulta: 6 maig 2024].
  33. ↑ «WebAssembly 1.0 Becomes a W3C Recommendation and the Fourth Language to Run Natively in Browsers» (en anglès). InfoQ. [Consulta: 6 maig 2024].
  34. ↑ «Programming Languages Software Award». www.sigplan.org. [Consulta: 6 maig 2024].
  35. ↑ «Web Storage API». MDN. [Consulta: 14 agost 2018].
  36. ↑ «Concepts behind IndexedDB». MDN. [Consulta: 14 agost 2018].
  37. ↑ Shankland, Stephen. «Twitter's app is helping stop phones from strangling the web». CNET, 30-07-2020. [Consulta: 11 febrer 2023].
  38. ↑ «12 Best Examples of Progressive Web Apps (PWAs) in 2021» (en anglès americà). SimiCart, 22-02-2021. [Consulta: 16 maig 2021].
  39. ↑ Osmani, Addy. «A Pinterest Progressive Web App Performance Case Study». ChromiumDev team, 30-11-2017. [Consulta: 10 febrer 2023].
  40. ↑ Gazdecki, Andrew. «Why Progressive Web Apps Will Replace Native Mobile Apps». Forbes, 09-03-2018. [Consulta: 10 febrer 2023].
  41. ↑ «Progressive Web Apps | Software AG». techradar.softwareag.com. Arxivat de l'original el 2020-11-13. [Consulta: 25 setembre 2020].
  42. ↑ MSEdgeTeam. «Publish your Progressive Web App to the Microsoft Store - Microsoft Edge Development» (en anglès americà). docs.microsoft.com. Arxivat de l'original el 2021-05-15. [Consulta: 16 maig 2021].
  43. ↑ «The first batch of Windows 10 Progressive Web Apps is here». Windows Central, 07-04-2018. [Consulta: 16 maig 2021].

Enllaços externs

[modifica]
Obtingut de «https://ca.wikipedia.org/w/index.php?title=Aplicació_web_progressiva&oldid=37865413»