Skip to content

Latest commit

 

History

History
380 lines (263 loc) · 9.85 KB

deck.mdx

File metadata and controls

380 lines (263 loc) · 9.85 KB

import { Head, Image } from 'mdx-deck' export { future as theme } from 'mdx-deck/themes'

import { Box, Card, Heading, Text } from 'rebass'

import { Invert } from 'mdx-deck/layouts'

<title>Presentation Title</title>

Progressive Web Apps con

Ionic Framework

By [@IonicThemes][] [@IonicThemes]: https://twitter.com/ionicthemes

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.


export default Invert


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
- Conexión a internet: Depende de dónde vivas, puede que no percibas la dimensión de este problema, pero el 60% de la población mundial usa internet 2G.
- Webs que cargan lento: 53% de los usuarios abandonan el sitio si demora más de 3 segundos en cargar.
- Fricción: la gente no quiere instalarse apps nativas! En promedio la gente instala 0 apps por mes, compará esto con la cantidad de sitios webs que entrás por mes. Además pensá en la cantidad de apps nativas que te instalaste y usaste solo 1 o 2 veces.
- Engagement del usuario: si bien los sitios web responsive tienen mucho más alcance y audiencia que las aplicaciones nativas, las webs carecen de funcionalidades como push notifications y soporte offline. Esto resulta en que los niveles de user engagement de las responsive web apps sean muuucho menos que los de una app nativa.

export default Invert

Características de una PWA

- RESPONSIVE: se adapta a cualquier dispositivo
- CONNECTIVITY INDEPENDENT: Usa service workers para poder funcionar sin conexión.
- APP LIKE: Para el usuario se siente como una aplicación de verdad, de hecho puede tener navegaciones o interacciones iguales a las de una app.
- FRESH: Gracias a las técnicas de cache que emplean los service workers el contenido de nuestra app siempre va a estar actualizado.
- SAFE: Se sirve a través de https
- DISCOVERABLE: Los motores de busqueda pueden encontrar e indexar el contenido. Esto es re importante para SEO.
- Re-ENGANGABLE: push notifications.
- INSTALLABLE: Permite que los usuarios se guarden las apps que les gustaron en su home screen sin tener que pasar por el appstore.
- LINKABLE: Es posible compartir las URLs lo que favorece la distribución de la app.

export default Invert

Ventajas frente a una Web Responsive


export default Invert

Ventajas frente a una App Nativa

- LINKABLE: Gran ventaja frente a las apps nativas donde para compartir un link que te lleve adentro de la app hay que configurar los deeplinks y el otro usuario tiene que tener la app instalada.
- DISCOVERABLE: Esta es una clara ventaja ante las apps nativas que su contenido permanece oculto y encapsulado dentro de la app.

Beneficios de las PWA

Adquisición de Usuarios

  • Destinar espacio en el celular
  • Fricción de los App Store
  • Discoverability of the web (orgánico y democrático)
  • "In the moment" services
- Fricción: poder probar el servicio que ofrece la app a ver si te gusta o sirve
- In the momento: Ejemplo de Uber en aeropuertos, deliverys
-

Beneficios de las PWA

Performance

  • Brindan un experiencia "rápida"
  • Aprovechamiento del Cache
  • Soporte offline o con conexión pobre
- Experiencia rapida: desde el momento que te instalas la app hasta que empezas a interactuar con ella todo pasa muy rápido.
- Cache: Debido a que aprovechan el caché, los usos repetidos de la aplicación no tienen que volver a hacer el request, lo que resulta en una experiencia aún más rápida.

Beneficios de las PWA

Engagement

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.


Stats

https://www.pwastats.com/


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

  1. Framework Agnostic - Ionic PWA Toolkit

@ionic/core + Stencil + Workbox

  1. Con Angular - Ionic Angular PWA

@ionic/angular y @angular/pwa

- Sin depender de un framework frontend como Angular, React or Vue.
-Usa Stencil for compiling and building the app,
- Workbox to enforce best practices and easing the boilerplate needed when working with service workers and cache strategies
- Ionic Core for routing and all the reusable UI components Ionic is known for.
- Son 2 caminos diferentes, no se pueden combinar


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

export default Invert

Resultado #1

- Como podemos ver La primer corrida tiene malos resultados dado que estamos sirviendo la app de un dev server y que el código no está con los ajustes de producción como ser minificación.

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
- Este comando va a compilar el codigo para producción y el output lo va a tirar en la carpeta www

export default Invert

Resultado #2


Iteración 3

Add PWA Capabilities (@angular/pwa)

  • Service worker
  • Web Manifest
$ ng add @angular/pwa

- Los principales requerimientos de una PWA son Service worker y Web Manifest. Al agregar el paquete @angular/pwa nos los agrega al proyecto automagicamente.

- Service Workers: es un script que corre en un thread separado que el resto de la app y que puede hacer ciertas tareas en background como por ejemplo manejar las push notifications y las distintas estrategias de Cache.

- Web Manifest: es un json que tiene la info de la app como titulo, icono, descripción


Test again

$ ionic build --prod

$ http-server ./www -p 8888

$ lighthouse http://localhost:8888 --view

export default Invert

Resultado #3

- Miren como mejoramos el puntaje de PWA drásticamente
- Estamos en 92 y no en 100 porque estamos sirviendo la app desde http y no https que si recuerdan era uno de los principios de PWA.

Iteración 4

Deploy the app

$ lighthouse https://pwa-talk-meetup.firebaseapp.com --view

export default Invert

Resultado #4


GIVE ME THE CODE

Repo completo con Push notifications y Firebase deploy: https://github.com/agustinhaller/pwa-talk

PWA: https://pwa-talk-meetup.firebaseapp.com/


Gracias

@dayujabif

@agustinhaller

@ionicthemes