Um curso que detalha todos os aspectos do desenvolvimento moderno de um Progressive Web App.
Este curso aborda os conceitos básicos do desenvolvimento de Progressive Web App em partes fáceis de entender. Nos módulos a seguir, você aprenderá o que é um App Web Progressivo, como criar um ou atualizar seu conteúdo da Web existente e como adicionar todas as partes de um app instalável off-line. Use o painel de menu para navegar pelos módulos. Ele fica à esquerda no computador ou atrás do menu de navegação nos dispositivos móveis.
Você aprenderá os fundamentos do PWA, como o manifesto do app da Web, service workers, como projetar pensando em um app e como usar outras ferramentas para testar e depurar seu PWA. Depois desses conceitos básicos, você aprenderá sobre a integração com a plataforma e o sistema operacional, como melhorar a experiência de instalação e uso do PWA e como oferecer uma experiência off-line.
Cada módulo inclui demonstrações interativas e autoavaliações para você testar seu conhecimento. Você poderá testar e experimentar demonstrações em seu smartphone, tablet ou laptop enquanto usa código para entender os fundamentos de um Progressive Web App.
Este curso foi criado para desenvolvedores da Web iniciantes e avançados. Você pode percorrer a série do início ao fim para ter um entendimento geral do PWA ou usar como referência para assuntos específicos. Para iniciantes em desenvolvimento da web, você precisará de um conhecimento básico em HTML, CSS e JavaScript para acompanhar. Confira o curso Aprender sobre CSS e os cursos de HTML e JavaScript no MDN.
Você aprenderá a fazer o seguinte:
Vamos começar
Se você quer criar um Progressive Web App, talvez esteja se perguntando por onde começar, se é possível fazer upgrade de um site para um PWA sem começar do zero ou como migrar de um app específico da plataforma para um PWA. Este artigo ajudará você a responder a essas perguntas.
Princípios básicos
Todos os Progressive Web Apps são sites modernos. Por isso, é importante que seu site tenha uma base sólida em design responsivo, dispositivos móveis e tudo em primeiro lugar, design intrínseco e desempenho da Web.
Design do app
Uma das principais diferenças entre os Progressive Web Apps e os sites e apps da Web clássicos é a possibilidade de instalação. Isso cria uma experiência independente mais integrada à plataforma e ao sistema operacional. A instalação proporciona nova flexibilidade e responsabilidade, já que não teremos uma interface do usuário de navegador para nosso conteúdo.
Recursos e dados
Um Progressive Web App é um site. Todos os recursos são iguais aos da Web, mas com novas ferramentas para que eles carreguem rapidamente quando on-line e disponíveis off-line.
Service workers
Os service workers são parte fundamental de um PWA. Eles permitem o carregamento rápido (independentemente da rede), o acesso off-line, as notificações push e outros recursos.
Armazenamento em cache
Use a API Cache Storage para fazer o download, armazenar, excluir ou atualizar recursos no dispositivo. Assim, esses recursos podem ser veiculados no dispositivo sem precisar de uma solicitação de rede.
Veiculação
Com o evento de busca do service worker, é possível interceptar solicitações de rede e exibir uma resposta usando técnicas diferentes.
Caixa de trabalho
A Workbox é um conjunto de módulos que simplifica as interações comuns do service worker, como roteamento e armazenamento em cache. Cada módulo aborda um aspecto específico do desenvolvimento de um service worker. O Workbox visa facilitar ao máximo o uso de service workers, permitindo flexibilidade para acomodar requisitos complexos de aplicativos quando necessário.
Dados off-line
Para criar uma experiência off-line sólida, você precisa implementar o gerenciamento do armazenamento. Ferramentas como IndexedDB, Cache, Gerenciador de Armazenamento, Armazenamento Persistente e Indexação de conteúdo podem ajudar.
Instalação
Os aplicativos instalados são fáceis de acessar e podem aproveitar integrações mais profundas com o SO. Saiba como tornar seu PWA instalável e ter esses benefícios.
Manifesto do app da Web
O manifesto do app da Web é um arquivo JSON que define como o PWA deve ser tratado como um aplicativo instalado, incluindo a aparência e o comportamento básico no sistema operacional.
Solicitação de instalação
Em sites que atendem aos critérios de instalação do PWA, o navegador aciona um evento para solicitar que o usuário faça a instalação. A boa notícia é que você pode usar esse evento para personalizar sua solicitação e convidar os usuários a instalar o app.
Atualizar
É provável que seu PWA precise ser atualizado. Este capítulo fornece as ferramentas para atualizar diferentes partes do PWA, de recursos a metadados.
Melhorias
Seu usuário espera uma boa experiência. Neste capítulo, você vai aprender a melhorar seu PWA com telas de apresentação, atalhos de apps e como as sessões funcionam.
Detecção
Identificar como os usuários interagem com seu app é útil para personalizar e melhorar a experiência do usuário. Por exemplo, é possível conferir se o app já está instalado no dispositivo do usuário e implementar recursos, como a transferência da navegação do navegador para o app independente.
Integração com o SO
Seu PWA agora funciona fora do navegador. Este capítulo aborda como fazer outras integrações com o sistema operacional depois que os usuários instalarem o app.
Gerenciamento de janelas
Um PWA fora do navegador gerencia a própria janela. Neste capítulo, você vai conhecer as APIs e os recursos para gerenciar uma janela no sistema operacional.
Recursos experimentais
Existem recursos de PWA que ainda estão em construção, e você pode fazer parte do desenvolvimento deles. Neste capítulo, você aprenderá sobre o projeto Fugu, como se inscrever em um teste de origem e como usar APIs experimentais
Ferramentas e depuração
Exploraremos as ferramentas disponíveis para desenvolver, depurar e testar seus Progressive Web Apps.
Arquitetura
Você toma algumas decisões ao desenvolver um PWA, como criar um aplicativo de página única ou um aplicativo de várias páginas e se ele será hospedado na raiz do seu domínio ou em uma pasta.
Gerenciamento da complexidade
Manter um aplicativo da web simples pode ser surpreendentemente complicado. Neste módulo, você vai aprender como as APIs da Web funcionam com linhas de execução e como usar isso para padrões comuns de PWA, como o gerenciamento de estado.
Recursos
Os PWAs não são apenas vinculados à tela. Este capítulo é sobre os recursos que um PWA tem hoje em termos de hardware, sensores e uso da plataforma.
Conclusão
Próximas etapas e recursos.
Tudo pronto para aprender a usar o PWA?