Curso online Progressive web apps

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 – Curso Progressive Web Apps #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.

Analisando projeto com Lighthouse – Curso Progressive web apps #02

Nesse tutorial vamos analisar o nosso projeto com lighthouse e ver os recurso que precisamos implementar para converter nossa aplicação em uma #pwa

Instalando service worker – Curso Progressive Web Apps #03

Neste terceiro vídeo vamos ver como instalar um service worker em nossa aplicação.

Introdução a Service Worker – Curso Progressive Web Apps #3.1

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 – Curso Progressive Web Apps #04

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 – Curso Progressive Web Apps #05

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 – Curso Progressive web apps #06

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 – Curso PWA #07

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 – Curso Progressive web apps #08

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 – Curso Progressive Web Apps #09

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 Vídeo também começo com um agradecimento especial para todos que estão compartilhando e apoiando este projeto.

Utilizando web share API – curso Progressive web apps #10

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 – Curso Progressive web apps #11

Veja 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 – Curso Progressive Web Apps #12

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 para PWA – Curso Progressive web apps #13

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 – Curso Progressive web apps #14

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

Deixe um comentário

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