Progressive Web Apps

36
ALEXANDRE TARIFA Progressive Web Apps

Transcript of Progressive Web Apps

Page 1: Progressive Web Apps

ALEXANDRE TARIFA

Progressive Web Apps

Page 2: Progressive Web Apps
Page 3: Progressive Web Apps
Page 4: Progressive Web Apps
Page 5: Progressive Web Apps
Page 6: Progressive Web Apps
Page 7: Progressive Web Apps

O QUE DEFINE O USO DE UMA TECNOLOGIA?

Page 8: Progressive Web Apps

PERFIL DE DESENVOLVEDOR? Técnico?

Quem é responsável pela inovação?

Pq o mercado corporativo não inova?

Dev web ou mobile?

Page 9: Progressive Web Apps
Page 10: Progressive Web Apps
Page 11: Progressive Web Apps

página 11

LATÊNCIA EM ALGUMAS ROTAS

Rota Distância Tempo – Luz no vácuo

Tempo – Luz na fibra

Round Trip Time (RTT) na fibra

New York to San Francisco 4,148 km 14 ms 21 ms 42 ms

New York to London 5,585 km 19 ms 28 ms 56 ms

New York to Sydney 15,993 km 53 ms 80 ms 160 ms

Page 12: Progressive Web Apps
Page 13: Progressive Web Apps

Performance e escalabilidade

Page 14: Progressive Web Apps
Page 15: Progressive Web Apps
Page 16: Progressive Web Apps

RESPONSIVO Tecnologia perfeita!?

Page 17: Progressive Web Apps
Page 18: Progressive Web Apps
Page 19: Progressive Web Apps

Performance!

EXPERIÊNCIA DO USUÁRIO

Page 20: Progressive Web Apps
Page 21: Progressive Web Apps
Page 22: Progressive Web Apps
Page 23: Progressive Web Apps

CENÁRIO

Page 24: Progressive Web Apps
Page 25: Progressive Web Apps

INSTANT APPS

Page 26: Progressive Web Apps

CONCEITO• Conjunto de técnicas para desenvolvimento de aplicações Web

Page 27: Progressive Web Apps
Page 28: Progressive Web Apps

O QUE É? Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.

Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low quality networks. App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.

Fresh - Always up-to-date thanks to the service worker update process. Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with. Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

Re-engageable - Make re-engagement easy through features like push notifications. Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable - Easily share via URL and not require complex installation.

Page 29: Progressive Web Apps

SERVICE WORKER É um worker como serviço que executa em background, fora da sua url/app

Principais funcionalidades: cache e push Assíncrono Js https only Eventos: Install, activate e fetch

Page 30: Progressive Web Apps
Page 31: Progressive Web Apps
Page 32: Progressive Web Apps

HOME SCREEN Web App Manifest Service Worker Https 2 visitas em menos de 5 minutos

Page 33: Progressive Web Apps
Page 34: Progressive Web Apps
Page 35: Progressive Web Apps
Page 36: Progressive Web Apps

MUITO OBRIGADO!

ALEXANDRE TARIFA