PROGRESSIVE WEB APPSNicolás Bello Camilletti

@nbellocam

SOUTHWORKS

PROGRESSIVE WEB APP

Es un conjunto de

conceptos/herramientas/etc.

WEB COMO NATIVO

No es un concepto nuevo

native web

native web

WEB APPS EN WINDOWS

Pinned SitesWindows 7

WEB APPS EN WINDOWS

Pinned SitesWindows 7

Packaged WAWindows 8

WEB APPS EN WINDOWS

Pinned SitesWindows 7

Packaged WAWindows 8

Hosted Web AppsWindows 10

WEB APPS EN WINDOWS

Pinned SitesWindows 7

Packaged WAWindows 8

PWAWindows 10

Hosted Web AppsWindows 10

PROGRESSIVE WEB APPa.k.a. “PWA”

PWA & ANDROID

Lyftride.lyft.com

Lyftride.lyft.com

BENEFICIOS DE WEB APPS

WEB APPS ANDAN

EN CUALQUIER LUGAR!

ONE CODEBASE

TO RULE THEM ALL…

PWAS = MENOR COSTO (& TIEMPO)

App core

iPhone iPad Publicar en App Store

Android Phone

Android Tablet Publicar en Play Store

Windows Publicar en Windows Store

MacOS Publicar en Mac App Store

Web Host

NativaEs requerido publicar en los App store

PWAS = MENOR COSTO (& TIEMPO)PWAPublicar en los App store es opcional (o por única vez)

Host

Gratis

App core

iPhone iPad

Android Phone

Android Tablet

Windows

MacOS

Web

Other PWA-capable

PRINCIPIOS DE PWA

PWAS SON SIMPLEMENTE WEB APPS…

PWAS SON SIMPLEMENTE WEB APPS…

¡QUE PROVEEN DE UNA EXCELENTE

EXPERIENCIA DE USUARIO!

PWA ES

PWA ES

Progressive

PROGRESSIVE WEB APP

PROGRESSIVE ENHANCEMENT

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

Mono

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

Stereo

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

Surround Sound

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

5.1 ChannelSurround Sound

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

7.1 ChannelSurround Sound

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

16.2 Channel Surround Sound

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

A veces, mono esla única opción

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

Objectivo &tareas principales

¿QUÉ ES PROGRESSIVE ENHANCEMENT?

Capacidades

Exp

erie

ncia

PE SE ASEGURA DE QUE LOS

USUARIOS PUEDAN USAR TU

PRODUCTO SIN IMPORTAR EL

CONTEXTO.

PROGRESSIVE ENHANCEMENT WEB

PROGRESSIVE ENHANCEMENT WEB

type="email"

Deltasdeexperiencia1. ¿Soporta input para email?2. ¿Algoritmo devalidación

implementado?3. ¿Teclado virtual?

PROGRESSIVE ENHANCEMENT WEB

required

Deltasdeexperiencia1. ¿Soporta validación HTML?

PROGRESSIVE ENHANCEMENT WEB

aria-required="true"

Deltasdeexperiencia1. ¿El navegador expone la propiedad aria-required ?2. ¿Tiene implementado la asistencia para aria-required?

required validation

email validation

dedicated keyboard

Capabilities

Expe

rienc

e

text input required notification

PROGRESSIVE ENHANCEMENT WEB

PE SE ASEGURA DE QUE LOS

USUARIOS PUEDAN USAR TU

PRODUCTO SIN IMPORTAR EL

CONTEXTO.

PWA ES

Progressive Responsive

PWA ES

NetworkIndependent

Progressive Responsive

PWA ES

NetworkIndependent

Progressive Responsive App-Like

PWA O APP NATIVA?

PWA ES

NetworkIndependent

Progressive Responsive App-Like Fresh

PWA ES

NetworkIndependent

Segura

Progressive Responsive App-Like Fresh

PWA ES

Discoverable

NetworkIndependent

Segura

Progressive Responsive App-Like Fresh

PWA ES

Discoverable

NetworkIndependent

Segura Re-engageable

Progressive Responsive App-Like Fresh

PWA ES

Discoverable Instalable

NetworkIndependent

Segura Re-engageable

Progressive Responsive App-Like Fresh

LA APP VA A SEGUIR ANDANDO EN EL

BROWSER. SÓLO PODRÍA HACER MÁS

COSAS CUANDO SE “INSTALE”.

WHATWEBCANDO.TODAY

PWA ES

Discoverable Instalable Linkeable

NetworkIndependent

Segura Re-engageable

Progressive Responsive App-Like Fresh

PERO… ¿COMO LO LOGRAMOS?

PERO… ¿COMO LO LOGRAMOS?

{

"lang": "en",

"short_name": "My App",

"name": "My Totally Awesome App",

"icons": [

{

"src": "img/launcher-icon-2x.png",

"sizes": "96x96",

"type": "image/png"

}, {

"src": "img/launcher-icon-4x.png",

"sizes": "192x192",

"type": "image/png"

}

],

"start_url": "/pwa/?utm_source=homescreen",

"display": "standalone",

"orientation": "portrait",

"background_color": "black"

}

WEB APP

MANIFESTMeta Tags 2.0

SERVICE

WORKERActua como servidor proxy

entre la web app, el browser

y la conexión (cuando está

disponible)

Solo HTTPS

No tiene acceso al DOM

Solo request asyncronicos

Ejecuta separado del sitio

Un service worker por alcance

SERVICE WORKERS

PROPIEDADES

PERO… ¿PUEDO USARLO?

PERO… ¿PUEDO USARLO?

1. if ('serviceWorker' in navigator) {2. navigator.serviceWorker.register('/service-worker.js')3. .then(registration => {4. console.log('Registered:', registration);5. })6. .catch(error => {7. console.log('Registration failed: ', error);8. });9. }

index.html

CICLO DE VIDA

CICLO DE VIDA

1. self.addEventListener('install', event => {2. event.waitUntil(3. caches.open('static-v1').then(cache => {4. return cache.addAll([5. '/',6. '/index.html',7. '/styles.css',8. '/main.js',9. '/fallback.html'10. ]);11. })12. );13. }

sw.js

CICLO DE VIDA

CICLO DE VIDA

1. self.addEventListener('activate', event => {2. var keepList = ['assets-v1'];3.4. event.waitUntil(5. caches.keys().then(cacheNameList => {6. return Promise.all(cacheNameList7. .map(cacheName => { 8. if (keepList.indexOf(cacheName) === -1) {9. return caches.delete(cacheName);10. }11. }));12. })13. );14. }

sw.js

CICLO DE VIDA

CICLO DE VIDA

1. self.addEventListener('fetch', event => {2. event.respondWith(3. caches.match(event.request).then(response => {4. return response || fetch(event.request)5. .catch(() => {6. return caches.match('/fallback.htm1');7. });8. })9. );10. }

sw.js

CACHE APIS

CACHES API

ANATOMY

REQUEST(URL) RESPONSE

https://wea.app/index.html <!doctype html>

https://wea.app/script.js console.log('hi')

...

key / value storage

Cache APIURL-addressable resources

-----or -----

Indexed DBOther data

PUSH NOTIFICATIONS

1. navigator.serviceWorker.register('sw.js')2. .then(reg => {3. return reg.pushManager.getSubscription()4. .then(subscription => {5. if (subscription) return subscription;

6. return registration.pushManager.subscribe({7. userVisibleOnly: true, 8. applicationServerKey: appPubkey9. });10. });11. })

index.html

1. self.addEventListener('push', event => {2. var payload = event.data ?3. event.data.text() : 'no payload';4. event.waitUntil(5. registration.showNotification('WEATHER ADVISORY', {6. body: payload,7. icon: 'icon.png'8. })9. );10. }

sw.js

1. self.addEventListener('notificationclick', event => {2. event.notification.close();3. event.waitUntil(clients4. .openWindow('https://wea.app/advisory'));5. }

sw.js

PROGRESSIVE WEB APPS

EN WINDOWS

¿COMO HACE UN USUARIO PARA

ENCONTRAR UNA PROGRESSIVE

WEB APP?

AHORA MISMO: STORE & BING

PROGRESSIVE WEB APPS

¿¡¿EN WINDOWS STORE?!?

PROGRESSIVE WEB APPS

¿¡¿EN WINDOWS STORE?!?

PWAS EN WINDOWS STORE

• Presentación activa

PWAS EN WINDOWS STORE

• Presentación activa

• Ingestión Pasiva

No hacer nada y Microsoft va a agregar tu PWA

automaticamente *

* Se puede no hacerlo usando robots.txt

ANULANDO CON ROBOTS.TXT

PWAS EN LOS STORES

app.manifest

popula la

entrada:

1. name

2. description

3. icons

4. screenshots

DESDE LA PERSPECTIVA DEL

USUARIO,

UNA PWA VA A SER UNA APP.

¡A NUESTROS USUARIOS NO LES

INTERESA QUE TECNOLOGIA

USAMOS!

Quieren usar nuestra app

UNA PWA ES SUPER SIMPLE DE

HACER Y LOS BENEFICIOS SON

IMPORTANTES.

BIT.LY/

PWA-WORKSHOP-NETCONFGithub: https://github.com/PWA-espanol/workshop

¡MUCHAS GRACIAS!@nbellocam

¿Preguntas?