Curso online Progressive web apps

Curso online construindo uma PWA

Em meu canal no youtube iniciei um curso totalmente grátis sobre Progressive web apps(PWAs), inicialmente tinha a ideia de publicar alguns tutoriais sobre PWA mas o projeto foi evoluindo e agora posso chamar de curso.

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 em 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 de nossa aplicação, entender os pontos que devemos focar em nossa aplicação e como achar a documentação para solucionar os principais problemas de nossa aplicação.

Instalando service worker #03

Neste terceiro vídeo vamos ver como instalar um service worker em 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 no 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 em 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 pre-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 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 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 de 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 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 em nossa aplicação. Workbox é uma biblioteca mantida pelo Google, nesse vídeo vamos ver as diferente formas de utilizar workbox.

Conteúdo complementar: Introdução a workbox

Introdução Workbox CLI #16

Olá pessoal, continuando 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 em seu projeto.

Integrando Workbox com Webpack #17

Curso PWA #18 Adicionando Google fonts ao cache offline

Curso PWA #19 – Criando manifest.json com Webpack

Curso PWA #20 – Habilitando suporte a Dark Mode em aplicações web

Curso PWA #21 – Progressive web apps e iOS 2020

Curso PWA #22 – O Projeto 2020

Curso PWA #23 – API, Web API e Geolocation API

Curso PWA #24 – Prática Geolocation API

Curso PWA #25 – Geolocation API: watchPosition e tratamento de erros

Curso PWA #26 – Apresentando próximos capítulos do curso

Curso PWA #27 – Apresentando API Climacell

2 comentários

    1. Valeu Kleber pelo comentário. Nos últimos dias estou com meu tempo livre dedicado aos DevFest mas em breve vou subir mais vídeos relacionados ao curso.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *