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 #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

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 *