Aplicações Web Progressivas

Introdução #

• O que são Progressive Web Apps?
• Como os Progressive Web Apps podem impulsionar o sucesso dos negócios
• O que torna um Progressive Web App bom?

Faça com que seja instalável #

• O que é necessário para ser instalável?
• Como definir sua estratégia de instalação

Forneça uma experiência instalável #

• Add a web app manifest
• Crie uma página substituta off-line
• Como fornecer sua própria experiência de instalação in-app
• Padrões para promover a instalação de PWAs
• Como usar um PWA em seu aplicativo Android

Codelabs #

• Torne-o instalável

Crie uma experiência de usuário semelhante à de uma aplicação #

• Faça seu PWA parecer mais um aplicativo
• Progressively enhance your Progressive Web App

Recursos exclusivos das PWA #

• Faça tudo rapidamente com os atalhos de aplicativo
• Suporte de ícones adaptáveis em PWAs com ícones mascaráveis
• Experiências offline mais ricas com a API Periodic Background Sync
• Customize the window controls overlay of your PWA's title bar

Mais maneiras de melhorar sua experiência de usuário #

• Is your app installed? getInstalledRelatedApps() will tell you!
• Integre com a IU de compartilhamento do sistema operacional através da API Web Share

Tópicos avançados #

• How Chrome handles updates to the web app manifest
• Progressive Web Apps in multi-origin sites
• Building multiple Progressive Web Apps on the same domain
• Diretrizes de design UX offline

Estudos de caso #

• Deprecating Excalidraw Electron in favor of the web version
• Clipchamp's video editor PWA installs see a 97% monthly growth
• PWA users are 2.5x more likely to purchase Gravit Designer PRO
• JD.ID improves their mobile conversion rate by 53% with caching strategies, installation, and push notifications
• Rakuten 24’s investment in PWA increases user retention by 450%
• How ZDF created a video PWA with offline and dark mode
• How Goibibo's PWA improved conversions by 60%
• Construindo um PWA no Google, parte 1