Progressive Web Apps

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

23 al 27 de Octubre 2017.NET Conf UY v2017
Progressive Web Apps
Nicolás Bello Camilletti
Lead Developer
SOUTHWORKS

23 al 27 de Octubre 2017.NET Conf UY v2017

PROGRESSIVEWEBAPP
Es un conjunto de conceptos/herramientas/etc.

WEBCOMONATIVO
No es un concepto nuevo

native web

native web

WEBAPPSENWINDOWS
Pinned Sites
Windows 7

WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8

WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8
Hosted Web Apps
Windows 10

WEBAPPSENWINDOWS
Pinned Sites
Windows 7
Packaged Web Apps
Windows 8
Progressive Web Apps
Windows 10
Hosted Web Apps
Window...

PROGRESSIVEWEBAPP
a.k.a. “PWA”

PWA&ANDROID

Lyft
ride.lyft.com

Lyft
ride.lyft.com

BENEFICIOSDEWEBAPPS

WEBAPPSANDAN
ENCUALQUIERLUGAR!

ONECODEBASETORULETHEMALL…

PWAS=MENORCOSTO(&TIEMPO)
App core
iPhone iPad Publicar en App Store
Android
Phone
Android
Tablet Publicar en Play Store
Wi...

PWAS=MENORCOSTO(&TIEMPO)
PWA
Publicar en los App store es opcional (o por única vez)
Host
Free
Nativa
Es requerido publica...

PRINCIPIOSDEPWA

PWASSONSIMPLEMENTEWEBAPPS…

PWASSONSIMPLEMENTEWEBAPPS…
¡QUEPROVEENDEUNAEXCELENTE
EXPERIENCIADEUSUARIO!

PWAES

PWAES
Progressive

PROGRESSIVE

¿QUÉESPROGRESSIVEENHANCEMENT?
Mono

¿QUÉESPROGRESSIVEENHANCEMENT?
Stereo

¿QUÉESPROGRESSIVEENHANCEMENT?
Surround Sound

¿QUÉESPROGRESSIVEENHANCEMENT?
5.1 Channel
Surround Sound

¿QUÉESPROGRESSIVEENHANCEMENT?
7.1 Channel
Surround Sound

¿QUÉESPROGRESSIVEENHANCEMENT?
16.2 Channel Surround Sound

¿QUÉESPROGRESSIVEENHANCEMENT?
A veces, mono es
la única opción

¿QUÉESPROGRESSIVEENHANCEMENT?
Objectivo &
tareas principales

¿QUÉESPROGRESSIVEENHANCEMENT?
Capacidades
Experiencia

PESEASEGURADEQUELOSUSUARIOS
PUEDANUSARTUPRODUCTO
SINIMPORTARELCONTEXTO.

PROGRESSIVEENHANCEMENTWEB

PROGRESSIVEENHANCEMENTWEB
type="email"
Deltas de experiencia
1. ¿Soporta input para email?
2. ¿Algoritmo de validación imp...

PROGRESSIVEENHANCEMENTWEB
required
Deltas de experiencia
1. ¿Soporta validación HTML?

PROGRESSIVEENHANCEMENTWEB
aria-required="true"
Deltas de experiencia
1. ¿El navegador expone la propiedad aria-required ?
...

required validation
email validation
dedicated keyboard
PROGRESSIVEENHANCEMENTWEB
Capabilities
Experience
text input requi...

PESEASEGURADEQUELOSUSUARIOS
PUEDANUSARTUPRODUCTO
SINIMPORTARELCONTEXTO.

PWAES
Progressive Responsive

PWAES
Network
Independent
Progressive Responsive

PWAES
Network
Independent
Progressive Responsive App-Like

PWAOAPPNATIVA?

PWAES
Network
Independent
Progressive Responsive App-Like Fresh

PWAES
Network
Independent
Segura
Progressive Responsive App-Like Fresh

PWAES
Discoverable
Network
Independent
Segura
Progressive Responsive App-Like Fresh

PWAES
Discoverable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

PWAES
Discoverable Instalable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

LAAPPVAASEGUIRANDANDOENEL
BROWSER.SÓLOPODRÍAHACERMÁSCOSAS
CUANDOSE“INSTALE”.

WHATWEBCANDO.TODAY

PWAES
Discoverable Instalable Linkeable
Network
Independent
Segura Re-engageable
Progressive Responsive App-Like Fresh

${ "lang": "en", "short_name": "My App", "name": "My Totally Awesome App", "icons": [ { "src": "img/launcher-icon-2x.png", ...$

SERVICEWORKER
Actua como servidor proxy entre la web
app, el browser y la conexión (cuando
está disponible)

Solo HTTPS
No tiene acceso al DOM
Solo se aceptan request asyncronicos
Ejecuta separado del sitio
Un solo service worker p...

PERO…PUEDOUSARLO?

1. if ('serviceWorker' in navigator) {
2. navigator.serviceWorker.register('/service-worker.js')
3. .then(registration => ...

CICLODEVIDA

Service Worker Lifecycle
Inicia la registraciónInstalling

1. self.addEventListener('install', event => {
2. event.waitUntil(
3. caches.open('static-v1').then(cache => {
4. return c...

Service Worker Lifecycle
Inicia la registraciónInstalling

Service Worker Lifecycle
Inicia la registraciónInstalling
Se completó la registraciónInstalled

Service Worker Lifecycle
Inicia la registraciónActivating
Inicia la registraciónInstalling
Se completó la registraciónInst...

1. self.addEventListener('activate', event => {
2. var keepList = ['assets-v1'];
3.
4. event.waitUntil(
5. caches.keys().t...

Service Worker Lifecycle
Inicia la registraciónActivating
Ya se pueden escuchar eventosActivated
Inicia la registraciónIns...

Service Worker Lifecycle
Inicia la registraciónActivating
Ya se pueden escuchar eventosActivated
Inicia la registraciónIns...

1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. caches.match(event.request).then(response => {
4. re...

FETCH!

EXPUESTOAJAVASCRIPT
FETCH(),REQUESTYRESPONSE

1. fetch('weather.json')
2. .then(function(response) {
3. if (response.headers.get('content-type') == 'application/json') ...

1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

1. self.addEventListener('fetch', event => {
2. event.respondWith(
3. fetch(event.request)
4. );
5. }
sw.js

CACHEAPIS

CACHES API
ANATOMY
REQUEST (URL) RESPONSE
https://weather.app/index.html <!doctype html>
https://weather.app/script.js con...

Cache API
URL-addressable resources
-----or -----
Indexed DB
Other data

PUSHNOTIFICATIONS

1. navigator.serviceWorker.register('sw.js')
2. .then(reg => {
3. return reg.pushManager.getSubscription().then(subscripti...

1. self.addEventListener('push', event => {
2. var payload = event.data ? event.data.text() : 'no payload';
3. event.waitU...

1. self.addEventListener('notificationclick', event => {
2. event.notification.close();
3. event.waitUntil(clients.openWin...

PROGRESSIVEWEBAPPS
ENWINDOWS

¿COMOHACEUNUSUARIOPARAENCONTRAR
UNAPROGRESSIVEWEBAPP?

AHORAMISMO:STORE&BING

PROGRESSIVEWEBAPPS
¿¡¿ENWINDOWSSTORE?!?

PWASENWINDOWSSTORE
• Presentación activa

PWASENWINDOWSSTORE
• Presentación activa
• Ingestión Pasiva
No hacer nada y Microsoft va a agregar tu PWA automaticamente ...

PWAINGESTIONPROCESS(PASSIVE)

ANULANDOLAINGESTIÓNCONROBOTS.TXT

PWASIN
THESTORE
app.manifest
popula la entrada:
1. name
2. description
3. icons
4. screenshots

DESDELAPERSPECTIVADELUSUARIO,
UNAPWAVAASERUNAAPP.

¡ANUESTROSUSUARIOSNOLES
INTERESAQUETECNOLOGIAUSAMOS!
Quieren usar nuestra app

UNAPWAESSUPERSIMPLEDEHACERY
LOSBENEFICIOSSONIMPORTANTES.

BIT.LY/PWA-WORKSHOP-NETCONF
Github: https://github.com/PWA-espanol/workshop

¡MUCHASGRACIAS!
@nbellocam
10/26/17 11423 al 27 de Octubre 2017.NET Conf UY v2017

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1036216 views
Storytelling For The Web: Integrate... by Chiara Aliotta 948112 views
Artificial Intelligence, Data and C... by OECD Directorate ... 870219 views
How to Leverage AI to Boost Employe... by SocialHRCamp 365506 views
2024 State of Marketing Report – by... by Marius Sescu 207694 views
Everything You Need To Know About C... by Expeed Software 227895 views

View on Slideshare

1 of 114 Ad

View on Slideshare

1 of 114 Ad