Todas as ferramentas disponíveis para desenvolvimento na Web também são úteis para o Progressive Web App, incluindo bibliotecas, frameworks, editores de código, criadores, ferramentas para desenvolvedores, depuradores e muito mais. Mas, ao trabalhar com recursos específicos de PWA, como facilidade de instalação, service workers, suporte off-line e muito mais, algumas ferramentas de PWA são muito úteis. Vamos conferir como eles funcionam.
Simuladores e dispositivos
Como mencionado no capítulo "Fundamentos", você precisa usar padrões de design independentes para oferecer a melhor experiência a todos os usuários em todos os contextos. No entanto, é recomendável testar suas experiências em dispositivos diferentes.
Você provavelmente não terá dezenas de dispositivos físicos, incluindo iPhones, telefones Android, tablets e desktops ou laptops com sistemas operacionais diferentes. É por isso que existem simuladores e emuladores.
Simuladores simples
A maioria das ferramentas para desenvolvedores em navegadores permite testar seus PWAs em diferentes tamanhos de tela ou condições de rede usando um único mecanismo de navegador para computador. Algumas dessas ferramentas também podem forçar um user agent diferente nessas simulações.
Alguns simuladores disponíveis são:
- Chromium DevTools: Device Mode, limitação de rede e várias simulações de sensores disponíveis
- Ferramentas para desenvolvedores do Firefox: Modo de design responsivo
- Safari Web Inspector: Modo de design responsivo
Algumas soluções comerciais e sem custo financeiro são otimizadas para desenvolvedores e designers, como o app de código aberto Responsivo.
Simuladores da Apple
A Apple oferece o app Simulator (anteriormente conhecido como iOS Simulator), que permite testar seu app da Web em diferentes iPhones e iPads em diversas versões do sistema operacional.
O app Simulator está disponível apenas para computadores macOS e vem com o [Xcode, disponível na AppStore]. Ele simula o iOS e o iPadOS com diferentes configurações de dispositivos. Ele inclui o app Safari para dispositivos móveis e o Web.app Engine usados quando o PWA é instalado na tela inicial. Portanto, a experiência final que você vê é bastante representativa de um dispositivo real.
Para iniciar o app, depois de instalar o Xcode, abra o Simulator no menu Xcode selecionando Open Developer Tools e, em seguida, Simulator. No simulador, você pode abrir o Safari como se estivesse em um iPhone ou iPad real. Para abrir outros dispositivos, selecione File e o menu Open Simulator.
Estes são alguns atalhos úteis para desenvolvedores da Web que usam o Simulator para testar PWAs:
Command-Shift-H: acesse a tela inicial.Control-Command-Shift-H: acessar o seletor de apps.Command-RighteCommand-Left: gire o dispositivo.
O Simulator não é uma máquina virtual, mas um app executado no macOS que se parece com um iPhone ou iPad. Por isso, ele não tem a própria pilha TCP. Portanto, se você usar localhost no Simulator, o Safari vai apontar para o dispositivo localhost do macOS.
Por padrão, o Xcode instala apenas a versão mais recente do iOS, mas você pode acessar o Xcode, usar o menu Preferences e fazer o download de simuladores mais antigos na guia Components.
É recomendável testar o PWA na versão mais recente do iOS, na versão secundária anterior e em pelo menos uma versão principal anterior.
Emuladores do Android
O ecossistema do Android oferece diferentes emuladores, mas os disponíveis no SDK do Android são os mais usados.
Como desenvolvedor de PWA, você também precisa de navegadores no Android Emulator, o que adiciona uma camada de complexidade aos testes, porque o AOSP (Android Open Source Project) não inclui o Google Chrome ou a Play Store para fazer o download de navegadores. Portanto, nem todo emulador Android é útil para testes de PWA.
O SDK do Android vem com duas ferramentas úteis para emulação:
- SDK Manager: faz o download e atualiza diferentes versões do sistema operacional e plug-ins.
- AVD Manager: adiciona, edita e exclui dispositivos virtuais Android (AVDs), cada um representando um dispositivo com um SO Android instalado, semelhante a uma instância de máquina virtual.
Com os emuladores, só é possível instalar o Android SDK ou o Android Studio, um ambiente de desenvolvimento integrado sem custo financeiro. Com o SDK, você vai precisar usar a linha de comando para abrir e configurar seus emuladores. Com o Android Studio, é possível abrir as ferramentas necessárias no menu da tela de boas-vindas. No AVD Manager, você pode criar quantos dispositivos quiser, com diferentes combinações de tamanho de tela, habilidades e versão do sistema operacional Android.
Com um Android Emulator, é possível conferir o suporte à instalação de PWA, toda a experiência do usuário e se as habilidades que você está usando estão funcionando como esperado.
Uso do Google Chrome
Para usar o Google Chrome no Android Emulator, você precisa criar um AVD com o Play Services. Para isso, verifique se o SDK usado para o AVD tem o ícone Reproduzir, como você pode ver na seguinte imagem:
Os AVDs com o Google Play Services também incluem a Play Store. Assim, você pode atualizar o Chrome para a versão mais recente depois de configurar sua conta com a Conta do Google.
Como usar outros navegadores
Se você usa um AVD com o Google Play Services, também é possível fazer o download de navegadores da Play Store.
A maioria dos navegadores disponíveis para Android, incluindo Samsung Internet, Microsoft Edge, Opera, Firefox e Brave, está disponível como APKs (pacotes Android). Se você tiver o APK para o navegador que quer testar, basta arrastar o arquivo para o emulador ou instalá-lo usando a linha de comando usando o ADB.
Emuladores para computador
A emulação de um computador desktop diferente normalmente é feita por um sistema de máquina virtual, como o VirtualBox ou VMWare. Mesmo com essas ferramentas, a emulação de alguns ambientes é impossível, como emular o macOS no Windows ou no Linux, e algumas outras opções podem exigir uma licença, como a emulação do Windows no macOS ou no Windows.
Usar dispositivos físicos
Também é uma boa ideia usar dispositivos reais para testar o PWA. Não precisamos ter vários dispositivos, pois existem algumas soluções baseadas na nuvem nas quais é possível usar dispositivos físicos remotamente. Existem algumas soluções sem custo financeiro e soluções comerciais com um Nível sem custo financeiro disponível.
Uma das soluções disponíveis é o Samsung Remote Test Lab, uma solução sem custo financeiro para testar seu PWA em dispositivos Samsung, incluindo smartphones, tablets e dispositivos dobráveis.
Inspeção remota
Para depurar um App Web Progressivo em um dispositivo real, simulador ou emulador, é recomendável conectar uma sessão de inspeção remota com as ferramentas de navegador do computador.
Existem ferramentas comerciais disponíveis, mas todos os navegadores também oferecem maneiras de fazer isso, incluindo:
- WebKit Remote Inspector para se conectar ao Safari e a PWAs instalados em simuladores e dispositivos conectados a iOS e iPadOS.
- Depuração remota do Chromium DevTools para se conectar ao Chrome, Edge, Samsung Internet e outros navegadores baseados no Chromium no Android e PWAs instalados a partir desses navegadores, incluindo dispositivos físicos e emuladores conectados.
- Depuração remota do Firefox para se conectar ao Firefox para Android em emuladores e dispositivos reais conectados.
Encaminhamento de portas para Android
Ao testar PWAs disponíveis no localhost em dispositivos físicos ou emuladores Android, você vai ter um problema, já que localhost vai apontar para a pilha TCP do Android, não para a máquina de desenvolvimento.
Você pode usar seu endereço IP local como substituto de localhost, mas isso não é uma boa ideia, já que service workers e muitas capacidades só funcionam com conexões HTTPS, com exceção de localhost. Por isso, seu PWA não funciona off-line ou atende aos critérios de PWA.
Você pode resolver o problema ativando o encaminhamento de portas em um navegador Chromium no seu computador desktop. Nesse caso, é possível transmitir uma porta no localhost no dispositivo Android para qualquer origem e porta do computador host, incluindo o localhost do computador de desenvolvimento. Consulte este guia para mais informações.
Navegadores Chromium
Os navegadores Chromium oferecem muitas ferramentas para depurar e testar Progressive Web Apps, começando pelo DevTools.
A maioria dos navegadores baseados no Chromium, incluindo Samsung Internet, Microsoft Edge e Google Chrome, oferece canais diferentes, como Stable, Beta e Canary. Você pode instalar versões separadas no computador e no Android para testar o PWA em versões futuras do navegador. Isso permite criar e testar recursos que ainda não estão amplamente disponíveis ou testar descontinuações e mudanças, além de descobrir como o app vai se comportar nas versões mais recentes.
Com a inspeção remota, você pode usar todas essas ferramentas para depurar e testar o PWA em computadores e dispositivos Android.
Ferramentas de service worker
O Chromium DevTools tem um conjunto completo de ferramentas para depurar service workers e a guia "Application" de suas APIs. Na seção "Service Workers", é possível:
- Veja o status de instalação e o ciclo de vida dos service workers.
- Atualize e cancele o registro do service worker.
- Siga o ciclo de atualização.
- Veja os clientes atuais dos service workers.
- Enviar uma mensagem push para um service worker.
- Registra operações de sincronização em segundo plano e sincronização periódica em segundo plano.
Leia mais sobre essas ferramentas.
Ferramentas de armazenamento
No Application e depois em Storage, você pode conferir, visualizar, atualizar e excluir dados da sua origem, como entradas do Web Storage ou armazenamentos do IndexedDB.
Dentro de Application, Cache e Cache Storage, é possível ver todos os caches armazenados na origem atual, visualizar conteúdo e excluir entradas. Leia mais sobre a ferramenta de cache.
Além disso, selecionando Application e depois Storage, é possível ver a cota atual usada, simular o armazenamento de cota personalizada e limpar todos os seus dados, incluindo o registro do service worker, usando Clear site data.
Serviços em segundo plano
O Chromium DevTools também tem um conjunto de ferramentas para gravação de eventos de serviços em segundo plano. Para isso, clique em Application e depois em Background Services. Isso permite que você veja o que acontece com alguns eventos em segundo plano sobre a API dos service workers. Leia mais sobre essas ferramentas.
Ferramentas de manifesto de app da Web
O Chromium DevTools tem uma seção para o manifesto do app da Web e critérios de instalação em Application, Manifest. Nesta seção, é possível conferir se o manifesto foi carregado corretamente, os valores do manifesto, a aparência dos ícones, o ID do app e um verificador rápido de ícones mascaráveis.
Avisos e erros relacionados a problemas de critérios de instalação também são exibidos nessa seção.
Leia mais sobre essas ferramentas.
Depuração da instalação
Em dispositivos Android que usam o modo de instalação WebAPK, você pode acessar uma lista dos apps instalados navegando até about:webapk nos navegadores Chromium.
Você vai encontrar o status atual da atualização e solicitar uma atualização do WebAPK aqui.
Em computadores desktop, você pode ver uma lista fácil de usar de PWAs instalados navegando até about:apps e uma versão de depuração navegando até about:app-service-internals.
Safari
Até a data deste artigo, o Safari tinha um conjunto mais limitado de ferramentas disponíveis para teste e depuração de PWA. Não há ferramentas para ver e depurar o estado e o ciclo de vida dos service workers, nenhum inspetor para o conteúdo do cache e nenhuma ferramenta para suporte ao manifesto de app da Web e capacidade de instalação no iOS e no iPadOS.
O Safari está disponível apenas na versão estável, enquanto a prévia da tecnologia Safari, disponível para macOS, só permitirá que você teste as capacidades de versões futuras do Safari com antecedência. Às vezes, os programas Beta para iOS e iPadOS incluem novas versões do Safari que podem ser usadas para testes.
Ferramentas de service worker
O que você pode fazer no Safari (no macOS e remotamente para iOS e iPadOS) é abrir uma janela do inspetor para um service worker em execução.
No Safari no macOS, o menu Develop, Service Workers lista todas as sessões do service worker em execução no momento. Você precisa selecionar o dispositivo a ser inspecionado no menu Develop para inspeção remota. Os contextos dos service workers aparecerão no mesmo submenu que os contextos da janela no nome instalado da origem ou do PWA.
Se você selecionar um deles, o Safari vai abrir uma nova janela com um inspetor restrito, incluindo apenas Consoles, Sources e Network Tabs.
Firefox
O Firefox oferece suporte a service workers em todas as plataformas e ao manifesto do app para instalação somente no Android. Você pode acessar as ferramentas para PWAs no computador e no Android por uma sessão de inspeção remota USB.
Você pode usar a versão para computador, conhecida como Firefox Developer Edition. Assim como o navegador Chromium, o Firefox tem versões em diferentes canais para computador e Android, incluindo as versões estável, Beta e Dev.
Ferramentas para PWAs
O service worker Inspector no Firefox é uma ferramenta básica disponível nas Ferramentas para desenvolvedores em Application, Service Workers. Isso permite que você veja o service worker registrado no momento, verifique o status de execução e cancele o registro dele. A depuração do código do service worker pode estar disponível apenas em algumas versões de desenvolvedor do Firefox.
A ferramenta de manifesto está disponível em Application, Manifest e só renderiza os valores do manifesto com uma visualização dos ícones.
Em Storage, é possível gerenciar o armazenamento da origem, incluindo o IndexedDB e o armazenamento em cache.
Leia mais sobre as ferramentas para desenvolvedores do Firefox para apps da Web.