Progressive Web Apps
https://goo.gl/CppxC1
Quem sou?
• Microsoft MVP desde 2013
• Desenvolvedor Web desde 2005
• Atuação em projetos nacionais e internacionais
• Atuação em projetos pequenos, médios e grandes
• Consultor independente desde 2012
• Fundador do balta.io
http://andrebaltieri.net/
contato@andrebaltieri.net
http://balta.io/
http://bit.ly/asp-net-cast
http://bit.ly/software-em-contexto
http://mvp.microsoft.com
Agenda
• O que são as PWA?
• Ionic Framework
• Otimizando o App Progressivamente
Progressive Web Apps
O que são? Como nascem? O que comem?
• Não é um Framework ou uma Tool
• Uma aplicação Web
• Utilizando Recursos mais modernos do Browser
• Trabalhar Offline
• Adicionar ao Desktop
• Vibrar
• Push Notification
• Geolocalização
• Camera
• Experiência mais “nativa”
• Aplicação melhora progressivamente
PWA
REFLEXÃO
Por que mantivemos a Web assim tanto tempo?
• Trabalhar Offline
• Possível há um bom tempo, com uso do Application Cache do HTML 5
• Adicionar ao Desktop
• Possível há um bom tempo, mesmo antes do Manifest.json
• Vibrar
• Possível manualmente, basta segurar seu telefone ou laptop e sacudir
• Push Notification
• Também não é tão novo
• Geolocalização
• Possível há um bom tempo com HTMl 5
• Camera
• Possível há um bom tempo com HTML 5
Futuro ou Presente?
Já usamos isto antes…
• Alguns recursos até já utilizamos
PWA
União dos poderes…
• É tudo Web (Dev e Deploy são fáceis)
• SEO e Indexação
• Linkável
• Atualização tranquila
• Funciona no Mobile/Desktop
• Recursos citados anteriormente (Push, Offline, etc)
Quais as vantagens
• Geolocalização
• Câmera
• Microfone
• Vibração
• Orientação de tela
• Acesso ao acelerômetro e búlsola
• Bateria
• Rede
Recursos (Cada vez chegando mais)
Progressive Web Apps
O lado ruim
• Você não está nas lojas
• Suporte dos Navegadores
• Nem todos recursos do device disponíveis
• iOS limitado
• Comunicação com weareables e outros devices externos
Pontos negativos
Progressive Web Apps
O futuro
• Cada dia devices com maiores capacidades
• Cada dia browser (Leia Chrome) com novas capacidades
• Aguardando a Apple melhorar o suporte...
O futuro
• Não tem suporte a gestos
• Não tem feeling nativo
• É apenas uma adaptação
É responsivo mas…
• Roda offline
• Adiciona a tela inicial
• Suporta Desktop/Mobile
Porém…
Ionic
A framework to rule them all
• Inicialmente um framework Mobile
• Suporte a Desktop
• Cria Apps Híbridas (APK)
• Cria Apps Web
• Feeling mobile na Web
Ionic
• Ótimo “feeling” de um App Mobile
• Service Worker
• Manifest
Ionic e PWA
• npm install –g ionic cordova
• ionic start tdc blank
• cd tdc
• ionic cordova platform add browser
• ionic serve --lab
• ionic build --prod --aot
Startup
DEMO
Entregando uma melhor experiência na UI
DEMO
Manifest
DEMO
Adicionando a Tela Inicial
DEMO
Geolocalização
DEMO
Câmera
Um service worker é um script que seu navegador
executa em segundo plano, separado da página da
Web, possibilitando recursos que não precisam de
uma página da Web ou de interação do usuário.
Matt Gaunt
https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=pt-br
Service Workers
DEMO
Push Notification
http://balta.io/
http://bit.ly/baltaio-curso-aspnetcore
Obrigado
Progressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundo
Progressive Web Apps: Um novo mundo

Progressive Web Apps: Um novo mundo