Qué es una PWA?
Es una aplicación creada con tecnologías web que, sin empaquetarla ni firmarla, puede funcionar sin conexión y, opcionalmente, puede instalarse en el sistema operativo donde se verá y actuará como cualquier otra aplicación.
Qué es una PWA?
No es un framework ni una tecnología, sino un set de buenas prácticas para hacer que una aplicación web funcione cómo una aplicación móvil.
Qué es una PWA?
Tienen el look and feel de las aplicaciones nativas. Se ubican en la home screen del celular, envían push notifications y tienen acceso a algunas funcionalidades del dispositivo, al igual que las aplicaciones nativas.
The Web is for audience reach and native apps are for rich experiences.
Both are strategic.
Both are valuable.
So when it comes to mobile, it’s not Web vs Native.
It’s both.
Instalate la PWA de esta charla
https://pwa-talk-meetup.firebaseapp.com/
Abrila desde tu celular.
Si usas iOS que sea desde Safari.
Las PWAs buscan ser y ofrecer lo mejor de los 2 mundos:
Webs Responsive
Y
Apps Nativas
Las PWAs pretenden solucionar los problemas causados por:
- Conexión a internet lenta
- Webs que cargan lento
- Fricción al instalar apps nativas
- Bajo engagement del usuario en web
Características de una PWA
Ventajas frente a una Web Responsive
Ventajas frente a una App Nativa
Beneficios de las PWA
- Destinar espacio en el celular
- Fricción de los App Store
- Discoverability of the web (orgánico y democrático)
- "In the moment" services
Beneficios de las PWA
- Brindan un experiencia "rápida"
- Aprovechamiento del Cache
- Soporte offline o con conexión pobre
Beneficios de las PWA
Engaging is not only about push notifications, is to have an unobtrusive way for users to try the service and taste the potential value of your product early on.
Tinder:
- Tiempo de carga pasó de 11.91 a 4.69 seg.
- 90% más liviana que la app nativa de android
- User engagement subió
Pinterest:
- User engagement subió 60%
- 44% más de ganancias por mostrar ads
- Tiempo en la app subió 40%
Flipkart:
- Driving 50% of its new customer acquisition
- El 60% de los usuarios de la PWA desinstaló la nativa para ahorrar espacio
Infobae:
- Sesiones 230% más largas
- 3x más pageviews que la app nativa
La combinación de costos de adquisición de usuarios más baratos, mejores conversiones y métricas de engagement, hace muy atractivo crear una PWA. Más aún si se garantiza que la UX está a la par con la de las apps nativas.
PWAs con Ionic 4
- Framework Agnostic - Ionic PWA Toolkit
@ionic/core + Stencil + Workbox
- Con Angular - Ionic Angular PWA
@ionic/angular y @angular/pwa
A programar!
<Code Time />
Start a new Ionic App
$ ionic start pwaTalk sidemenu --type=angular
Iteración 1
Test it with Ionic built in development server
$ ionic serve
Run PWA checklist with Lighthouse
$ npm install -g lighthouse $ lighthouse http://localhost:8100 --view
Resultado #1
Iteración 2
Test the Ionic App with a production server
$ ionic build --prod $ npm install -g http-server $ http-server ./www -p 8888 $ lighthouse http://localhost:8888 --view
Resultado #2
Iteración 3
Add PWA Capabilities (@angular/pwa)
- Service worker
- Web Manifest
$ ng add @angular/pwa
Test again
$ ionic build --prod $ http-server ./www -p 8888 $ lighthouse http://localhost:8888 --view
Resultado #3
Iteración 4
Deploy the app
$ lighthouse https://pwa-talk-meetup.firebaseapp.com --view
Resultado #4
GIVE ME THE CODE
Repo completo con Push notifications y Firebase deploy: https://github.com/agustinhaller/pwa-talk