Recursos

Os Progressive Web Apps podem fazer mais do que apenas renderizar conteúdo na tela ou conectar-se a serviços da Web. Os PWAs lidam com arquivos do sistema de arquivos, interagem com a área de transferência do sistema, acessam hardwares conectados ao dispositivo e muito mais. Todas as APIs da Web estão disponíveis para seu PWA, e algumas outras APIs ficam disponíveis quando o app é instalado.

Use What Web Can Do Today para saber o que é possível em cada plataforma. Para APIs ou recursos individuais, você pode usar Posso usar ou as tabelas de compatibilidade de navegadores no MDN.

Sempre verifique o suporte a recursos

A primeira letra em PWA significa "progressivo" e vem da ideia de aprimoramento progressivo e detecção de recursos. Você não espera que seu app funcione da mesma forma em todos os dispositivos. A diversidade de contextos e recursos em bilhões de dispositivos em diferentes países faz dos PWAs uma plataforma excelente, graças à progressão de cada um.

Isso significa que você precisa desenvolver o app em camadas que podem não estar disponíveis em todos os dispositivos e verificar a disponibilidade antes do uso.

Antes de usar a API, é necessário verificar com o JavaScript se ela existe ou perguntar a ela se um serviço está disponível no dispositivo em questão.

Web potente

A Web é muito poderosa hoje em dia. Exemplo:

É possível criar um app de chat por vídeo hiperlocal com WebRTC, geolocalização e mensagens push.
É possível tornar um app instalável.
Você pode adicionar efeitos de vídeo com o WebAssembly.
Você pode até colocá-lo em realidade virtual com o WebGL e o WebXR.

Capacitar seu PWA

Vamos dividir as APIs de recursos de PWA em quatro grupos:

Verde: APIs disponíveis em todos os navegadores e plataformas, quando tecnicamente possível. A maioria deles já foi enviada há muitos anos, é considerada madura e pode ser usada com segurança. Um exemplo de API desse grupo é a API Geolocation.
Verde-claro: as APIs estão disponíveis apenas em alguns navegadores. Considerando a falta de suporte em algumas plataformas, eles amadurecem dentro do subgrupo de navegadores suportado para que você possa usar o recurso com confiança neles. Um exemplo de API desse grupo é a WebUSB.
Amarelo: APIs experimentais. Essas APIs ainda não estão consolidadas. Elas estão disponíveis somente em alguns navegadores e dentro de testes ou testes. Falamos um pouco sobre esses recursos no capítulo experimental.
Vermelho: o grupo de APIs que não podem ser usadas em um PWA e onde os planos para adicioná-las ainda são de longo prazo. Um exemplo de API desse grupo é a fronteira geográfica virtual.

Recursos sustentáveis

Veja abaixo uma lista dos recursos mais importantes que você pode usar no PWA.

Princípios básicos

Como armazenar arquivos em cache localmente usando a API Cache, conforme visto no capítulo Como armazenar em cache.
Executar tarefas em linhas de execução usando workers da Web, como no capítulo "Gerenciamento de complexidade".
Como gerenciar solicitações de rede com diferentes estratégias em um service worker, conforme visto no capítulo Service workers.
2D Canvas para renderizar gráficos 2D na tela usando a API Canvas.
Canvas de alto desempenho 2D e 3D ou WebGL (link em inglês), para renderizar gráficos 3D.
WebAssembly, ou WASM, para executar código compilado de baixo nível para melhorar o desempenho.
Comunicação em tempo real usando a API WebRTC.
Web Performance para avaliar e ajudar a fornecer uma experiência melhor. Consulte o guia da API Performance para mais informações.
Armazene dados localmente com o IndexedDB e o gerenciamento de armazenamento para consultar cotas e solicitar armazenamento permanente, conforme visto no capítulo Dados off-line.
Áudio de baixo nível graças à API Web Audio.
Detecção em primeiro plano usando a API Page Visibility.
Comunicação de rede usando a API Fetch e a API WebSocket.

Hardware e sensores

A geolocalização acessa o local do usuário usando diferentes provedores, como satélite ou Wi-Fi, usando a API Geolocation.
A câmera e o microfone recebem streams de mídia de câmeras e microfones usando a interface Dispositivos de mídia.
Os sensores coletam informações em tempo real do acelerômetro, do giroscópio, do magnetômetro e de outros elementos usando a API Sensors ou interfaces mais antigas, como DeviceMotionEvent e DeviceOrientationEvent. No Safari, é necessário usar uma solicitação de caixa de diálogo de permissão não padrão para usá-los.
Toque e ponteiro: acesse informações sobre todos os toques e cliques baseados em ponteiro que você fizer com o dedo, o mouse, um trackpad ou uma caneta, graças aos eventos de ponteiro e de toque.

Gamepads para ler informações provenientes de gamepads e joysticks padrão conectados ao dispositivo usando a API Gamepad.
Autenticação biométrica (como reconhecimento facial ou de impressão digital) usando Web Authentication ou WebAuthn.

Integração com sistemas operacionais

A síntese de fala e o reconhecimento de voz usam as vozes instaladas na plataforma para falar com o usuário e reconhecer o que ele diz, graças à API Web Speech.
Compartilhe conteúdo do PWA com outros apps e lugares no dispositivo usando a API Web Share, como veremos no capítulo "Integração do SO".
Acesse a área de transferência para salvar e recuperar conteúdo da área de transferência em formatos diferentes, graças à API Clipboard, conforme mostrado no capítulo de integração do SO.
Gerencie as credenciais e senhas dos usuários usando a API Credential Management.
Ative a reprodução de vídeos picture-in-picture no SO usando a API picture-in-picture.
Renderize conteúdo em tela cheia graças à API Fullscreen, como mostrei no capítulo Windows.

Recursos verde-claro

Veja uma lista dos recursos mais importantes que podem ser usados no PWA, com a ressalva de que eles podem não estar disponíveis em todos os navegadores.

Conceitos básicos

WebGL 2.0, a nova versão da especificação WebGL para corresponder ao OpenGL 3.0.
Codecs, acesso de baixo nível aos frames individuais de um stream de vídeo e blocos de áudio; útil para aplicativos da Web que exigem controle total sobre a forma como a mídia é processada por meio da API Web Codecs.

Hardware e sensores

Controles avançados da câmera para acessar os controles de panorâmica, inclinação e zoom, além das APIs Media.
O Bluetooth LE se comunica com dispositivos Bluetooth de baixa energia perto do usuário usando a API Web Bluetooth. Confira Como se comunicar com dispositivos Bluetooth por JavaScript para mais informações.
Comunicação a curta distância (NFC, na sigla em inglês) para troca de dados via NFC por mensagens de formato leve de troca de dados (NDEF, na sigla em inglês) NFC, como uma tag NFC ou um cartão usando a API WebNFC. Leia também Interagir com dispositivos NFC no Google Chrome para Android para mais detalhes.
Periférico serial: para acesso de baixo nível a dispositivos conectados ao dispositivo usando uma porta serial, USB ou serial via Bluetooth usando o WPI serial da Web. No link a seguir, aprenda a ler e gravar em uma porta serial.
Acesso ao dispositivo USB para se comunicar com dispositivos conectados via API WebUSB USB. Confira acesso a dispositivos USB na Web para mais informações.
Os dispositivos de interface humana permitem que o PWA interaja com qualquer tipo de dispositivo preparado para interação humana incomum usando a API WebHID. Confira este guia sobre como se conectar a dispositivos HID incomuns.

A opção Ambient Light lê o nível de luz atual ou a iluminação da luz ambiente ao redor do dispositivo, além da API Sensors.
A Vibração fornece ao usuário um retorno tátil quando algo acontece, se o dispositivo for compatível, com a API Vibration.
A gravação de mídia captura os dados gerados por um objeto MediaStream ou HTMLMediaElement (como uma tag <video>) para análise, processamento ou salvamento em disco, graças à API MediaRecorder.
Com a API Screen Wake Lock, a aplicação de um wake lock impede que o dispositivo escureça ou bloqueie a tela quando o PWA precisar continuar em execução.
A realidade virtual permite o uso de fones de ouvido e outros dispositivos no PWA, graças à API WebXR Device.
A realidade aumentada pode ser alcançada no seu PWA de várias maneiras, como usando a API WebXR Device ou o app Safari Quick Look para conteúdo de RA.
Detecte usuários inativos com a API Idle Detection.
Graças à API Screen Orientation ou à propriedade orientation do Manifesto de apps da Web para apps instalados, o bloqueio de orientação bloqueia a orientação para retrato ou paisagem enquanto o PWA está na tela.
Apresentar conteúdo em projetores e telas secundárias graças à API Presentation.
Bloqueie um ponteiro para receber informações de movimento delta de ponteiros (mouse, trackpads e ponteiros) em vez de valores de posição (útil para alguns jogos), graças à API Pointer Lock.

Integração com sistemas operacionais

Leia e grave arquivos no dispositivo graças à API File System Access, como você aprendeu no capítulo Integração do SO.
Acesse conteúdo de outros apps graças ao recurso Web Share Target, como mostrei no capítulo Integração do SO.
Receba dados de contato usando a API Contact Picker, conforme mostrado no capítulo Integração com o SO.
Sincronização em segundo plano enquanto o PWA não é usado, graças à API Background Synchronization.
Programação de tarefas enquanto o PWA não está em uso, graças à API Web Periodic Background Synchronization.
Envie notificações usando Push na Web e APIs Web Notifications.
Transfira arquivos em segundo plano enquanto o usuário não estiver usando o PWA, graças à API Background Fetch.
Integre a reprodução de mídia ao sistema operacional usando a API Media Session.
Gerencie pagamentos no seu PWA usando a API Payment Request. A Apple também oferece uma biblioteca JavaScript do Apple Pay, além da API Payment Request.
Consulte o status da rede, como o tipo de conexão (4G, Wi-Fi) e uma flag para salvar dados usando a API Network Information.
Capture a tela do usuário para screencast ou compartilhamento de tela usando a API Screen Capture.
Detecte formas usando detectores acelerados por hardware no dispositivo, incluindo códigos de barras (rostos humanos e OCR de texto ainda estão em desenvolvimento) usando a API Shape Detection.
Consulte a memória de um dispositivo usando a interface de memória do dispositivo.
As senhas únicas por SMS permitem que você receba automaticamente um código por SMS enviado do seu servidor usando a API WebOTP. O Safari implementa um subconjunto de solução com base no elemento <input>. Leia mais sobre isso no blog do WebKit (em inglês).
Gerencie o teclado virtual que aparece nas telas de dispositivos móveis usando a API Virtual Keyboard.