Progressive Web Apps

 Compartiu 

https://github.com/bstavroulakis/vue-wordpress-pwa

Progressive Web App (PWA) és un terme utilitzar per fer referència una metodologia de desenvolupaments de software que a diferència de les aplicacions tradicionals les PWA són aplicacions híbrides entre web pages (pàgines web) i mobile apps.

Llegiu abans/vegeu també Hybrid apps.

Introducció

L'objectiu d'aquesta nova metodologia és combinar les característiques de les aplicacions web (amb navegadors moderns) i els beneficis de la mobile experience. El terme PWA va ser creat al 2015 pe Frances Berriman i Alex Russell (i molt promogut per Google) i s'utilitzava per descriure aquelles aplicacions que aprofitaven les noves funcionalitats dels navegadors moderns (vegeu el següent apartat) per tal que les aplicacions web ser aplicacions first-class en sistemes operatius natius com Android o iOS.

https://developer.mozilla.org/en-US/Apps/Progressive

Característiques generals:

• Progressive: funcionen per a tots els usuaris independentment del navegador que utilitzin activant per tant només de forma progressiva aquelles característiques que estan disponibles.
• Responsive: s'adapten a qualsevol form factor: escriptori/desktop, mobile, tablet, or altres formats. Vegeu Responsive web design
• Connectivity independent: Permetent el treball online via Service workers i treballant correctament en xarxes de poca qualitat
• App-like/Mobile Friendly: semblen una app nativa en el seu estil (User Interface), navegació i User Experience. Vegeu el test de Google https://search.google.com/search-console/mobile-friendly
• Fresh: estan sempre actualitzades mitjançant service worker update process.
• Safe: servides via HTTPS (condició obligatòria per tal d'utilitzar Service Workers en explotació)
• Discoverable: són identificables com aplicacions gràcies als W3C manifests i el service worker registration fent que pugin ser descobertes pels motors de cerca com Google o altres.
• Re-engageable: Faciliten el re-engagement utilitzant push notifications.
• Installable: permet als usuaris mantenir aquelles aplicacions més útils com instal·lades al seu escriptori sense la necessitat d'utilitzar un app store o repositori de apps.
• Linkable: es poden compartir fàcilment mitjançant una URL

Checklist condicions per tenir una aplicació PWA

A la web de developers de Google podeu trobar una llista:

https://developers.google.com/web/progressive-web-apps/checklist

També es molt útil el plugin Lighthouse que genera un informe indicant quins components de la llista implementem i quins no

Tecnologies

Service Workers

Vegeu Service Worker

Web App Manifest

Vegeu Web App Manifest

APIs

Offline support

Vegeu Service Workers

Apis accés sistema natiu

Multimedia

Vegeu Web Audio API/Audio microfon: grabant del microfon: https://developers.google.com/web/fundamentals/native-hardware/recording-audio/

• Imatges: https://developers.google.com/web/fundamentals/native-hardware/capturing-images/
• Click to call: https://developers.google.com/web/fundamentals/native-hardware/click-to-call/

Sharing/Social Sharing/Social Discovery

Vegeu Social Discovery

Web workers

Vegeu Web workers

Web sockets

Vegeu Web sockets i SocketIO

Sensors

Ambient Light Events

Battery/Battery Status API Page Visibility API Fullscreen API Network Information API

Eines

Chrome developer tools

Chrome developer tools té algunes ajudes per treballar amb apps PWA.

Lighthouse

És una app de chrome que serveix per auditar el nivell de compliment de PWA

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

També hi ha un client npm:

$ npm install -g lighthouse

I podeu:

$ lighthouse https://airhorner.com/

Recursos:

• https://github.com/GoogleChrome/lighthouse

Vegeu també

• HTML5
• Service Workers
• HTTPS/Let's encrypt
• Lighthouse [1]
• Service Workers
• Web App Manifest
• Responsive Web Design
• Push Notifications

Enllaços externs

• https://www.getopensocial.com/blog/progressive-web-apps
• Lighthouse [2]
• https://gist.github.com/vanbrabantf/76586a7d069d0e42922123c4046c1286
• https://blog.madewithlove.be/post/improved_pwa_score/