No meu canal no YouTube iniciei um curso de Progressive web apps totalmente grátis, inicialmente tinha a ideia de publicar alguns tutoriais sobre PWA, mas o projeto foi evoluindo e agora posso chamar de curso.
O que é uma PWA?
Progressive Web Apps – PWA (aplicações web progressivas) são desenvolvidas e aprimoradas com o que há de mais moderno referente a desenvolvimento web, elas fornecem confiabilidade e capacidade de instalação, ao mesmo tempo que alcançam qualquer pessoa, em qualquer lugar, em qualquer dispositivo com uma única base de código.
O que é precisa para desenvolver uma PWA?
Um PWA nada mais é que uma aplicação web, mesmo ambiente de desenvolvimento que você usa para desenvolver aplicações web será utilizado para criação de PWAs.
- Editor de Texto indico o Visual Code
- Browser para testar as suas aplicações
- Dispositivo móvel(Opcional)
Requisitos técnicos para o curso de PWA
Para acompanhar esse curso você irá precisa de conhecimentos básicos nas seguintes tecnologias e ferramentas:
- HTML
- CSS
- JavaScript
- Terminal de linha de comando
Lista de aulas do curso de Progressive Web Apps
O conteúdo é publicado semanalmente com processo para a construção e teste de uma PWA do início ao fim. Atualmente temos os seguintes tópicos publicados:
Apresentação do projeto #01
No primeiro vídeo série vamos apresentar o nosso projeto base que será utilizado nos próximos vídeos, além de entender porque trabalhar com PWA e ter uma visão geral sobre o conteúdo que iremos abordar no nosso curso.
Trabalhando com Lighthouse e Devtools #02
No segundo vídeo do curso de progressive web apps vamos ver como trabalhar com o Google Chrome Devtools e o Lighthouse para fazer a auditoria da nossa aplicação, entender os pontos que devemos focar na nossa aplicação e como achar a documentação para solucionar os principais problemas da nossa aplicação.
Instalando service worker #03
Neste terceiro vídeo vamos ver como instalar um service worker na nossa aplicação.
Introdução a Service Worker #04
Nesse vídeo vamos falar um pouco mais sobre Service Worker. No vídeo anterior da série tratamos de forma mais prática, agora vamos abordar o assunto num modo mais teórico. Como o service worker é instalado, como ele é executado em segundo plano e como funciona o seu ciclo de vida.
Post complementar : Introdução a service worker
Adicionando versão offline #05
Nesse vídeo vemos como implementar uma versão offline para nossa aplicação utilizando a estratégia cache first.
Teoria sobre web app manifest #06
Nesse tutorial iremos entender os conceitos sobre o web app manifest, os requisitos necessários para exibir o prompt para instalação da nossa PWA. Quais os passos devemos tomar o nosso código JavaScript.
Criando manifest.json #07
Vamos abordar como adicionar a nossa aplicação o manifest.json arquivo responsável por definir a instruções para nossa Progressive Web App torna-se instalável.
Novidades do Chrome 73, ativando o pop-up de instalação e PWAs no Mac OS #08
Nesse vídeo vamos ver as novidades nos relatórios do Lighthouse no Chrome 73, os passos necessários para exibir o pop-up de instalação, os eventos JavaScripts que podemos utilizar nesses fluxo e por fim ver a instalação do de uma PWA no Mac OS.
Progressive web apps: 08 iOS vs. PWA #09
Nesse vídeo iremos ver como o iOS trabalha com PWAs, os updates recentes feito na versão 12.2, como, por exemplo, suporte a web share API e os principais bugs corrigidos. Por fim iremos ver como adicionar suporte a instalação do seu app a tela inicial do iOS.
Configurando ícones para tela inicial do iOS #10
Nesse vídeo vamos ver como configurar os ícones e título para nossa aplicação ser adicionada na tela principal do iOS. A plataforma iOS na sua versão 12.2 ainda não dá suporte ao Web app manifest, mas desde a primeira versão do iOS podemos incluir no nosso HTML tags específicas para informar o sistema operacional como adicionar a nossa aplicação na tela inicial de um dispositivo iOS.
Utilizando web share API #11
Saiba como utilizar a web share api recurso agora disponível na plataforma #Android e #iOS, a web share API faz a chamada do card nativo de compartilhamento do dispositivo móvel. Além de adicionar o recurso vemos quais são os pré-requisitos necessários para fazer o uso deste recurso.
Conteúdo complementar: Introdução a web share API
Criando media queries para PWAs #12
Veja nesse vídeo do curso progressive web apps, como criar media queries para tratar a nossa interface quando o usuário estiver executando nossa aplicação em modo fullscreen. Além de identificar diferentes plataformas como iOS ou Android, por fim iremos utilizar javaScript para controlar o conteúdo que será exibido.
Conteúdo complementar: Media queries para Progressive web apps
Badging API #13
Após uma série de lançamentos no último Google I/O 2019, nesse vídeo vamos continuar a nossa série sobre PWAs, dessa vez vamos falar sobre como utilizar a Badging API, recurso atualmente em modo experimental, mas serve como uma alternativa menos intrusiva que o push notifications.
Conteúdo complementar: Badging API
Estratégias de cache #14
Agora vamos falar das principais técnicas de cache para PWA, O Service Worker tem a capacidade de interceptar as requisições da nossa aplicação além de possibilitar o suporte a aplicações offline. Com isso conseguimos aplicar estratégias de cache para diferentes casos onde iremos ver nesse vídeo.
Conteúdo complementar: Estratégias de cache para PWAs
Introdução a Workbox 4 #15
Continuando a nossa série sobre #PWA nesse vídeo vamos ver uma introdução sobre workbox, biblioteca que irá reduzir a complexidade para implementar estratégias de cache na nossa aplicação. Workbox é uma biblioteca mantida pelo Google, nesse vídeo vamos ver as diferentes formas de utilizar workbox.
Conteúdo complementar: Introdução a workbox
Introdução Workbox CLI #16
Olá pessoal, continuando o nosso curso sobre PWA nesse vídeo vamos falar como é configurar o Workbox utilizando o seu CLI nesse vídeo prático você irá acompanhar passo-a-passo como adicionar precaching com workbox no seu projeto.
Deixe um comentário