Categorias

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

2 respostas em “Curso online Progressive web apps”

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 uma resposta

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