Os Progressive Web Apps (PWAs) para computador são uma ótima maneira de criar apps em várias plataformas e navegadores com um modelo de segurança que prioriza a segurança e a privacidade do usuário, além de compartilhamento integrado com a capacidade de vinculação inerente da Web. Crie ou melhore seu app da Web atual com APIs modernas para oferecer recursos, confiabilidade e capacidade de instalação semelhantes aos de apps para computador. Os PWAs são a melhor maneira de disponibilizar seu app da Web para o ChromeOS.
No ChromeOS, o poder da plataforma da Web é o foco principal, e os apps da Web são um recurso essencial da plataforma. Os PWAs instalados aparecem no iniciador do ChromeOS, podem ser fixados na barra e se integram profundamente ao restante do SO.
Comece revisando a lista de verificação de PWA e confira se seu app da Web passa na lista principal. Use o PWABuilder para fornecer uma página off-line personalizada e permitir a instalação do app. Em seguida, use estas recomendações para destacar seu PWA no ChromeOS.
Facilite a instalação
Uma das grandes vantagens dos PWAs em relação aos apps da Web comuns é a capacidade de serem instalados, assim como os apps tradicionais para computador. O caminho do App Web Progressivo no web.dev tem uma seção dedicada a tornar seu PWA instalável. Use essa seção para começar. Para que um PWA seja identificado como instalável no ChromeOS, os seguintes critérios precisam ser atendidos, o que pode ser verificado usando a auditoria instalável do Lighthouse:
- Ele precisa ter um manifesto de app da Web válido.
-
Ele precisa atender aos critérios de instalação do Chrome.
- Para PWAs no ChromeOS, um aviso de instalação vai aparecer na omnibox sem que um limite heurístico de engajamento do usuário seja atingido.
Os ícones são uma parte importante da identidade do seu PWA. Por isso, eles precisam ser interessantes e exclusivos. Eles podem até incluir transparência. Como os PWAs têm uma base de código compartilhada em todas as plataformas, verifique se você tem um ícone mascarável disponível. Inclua também ícones normais para sistemas operacionais que não são compatíveis com ícones mascaráveis.
Com o PWA instalável, ele vai aparecer no ChromeOS, do iniciador à barra. Ter o PWA instalado também abre algumas capacidades extras para deixar seu app ainda melhor.
Observação sobre trabalhar off-line
Há muitas vantagens de capacidade, usabilidade e capacidade de descoberta simplesmente tornando seu app instalável. Tornar seu PWA instalável não significa que toda a experiência precisa funcionar off-line. No entanto, para que um web app instalado pareça um app tradicional, ele precisa ter alguma forma de funcionalidade off-line. Uma página off-line personalizada básica é suficiente para começar. Os usuários esperam que os apps instalados não falhem quando o status da conexão muda. Assim como um app tradicional nunca mostra uma página em branco quando está off-line, os PWAs nunca devem mostrar a página off-line padrão do navegador. As páginas off-line personalizadas podem variar de uma mensagem informando ao usuário que ele precisa de uma conexão para um jogo até uma forma de passar o tempo até que ele se conecte novamente. Oferecer essa experiência off-line personalizada para páginas ou recursos não armazenados em cache que exigem uma conexão ajuda a diminuir a diferença entre a experiência do usuário e o app.
É possível criar uma página off-line simples durante um evento install de um service worker fazendo o pré-cache da página desejada para uso posterior e respondendo com ela se um usuário estiver off-line. Siga nosso exemplo de página off-line personalizada para ver um exemplo disso em ação e aprender a implementar por conta própria.
Se quiser oferecer uma experiência mais robusta, além da API Cache Storage, use recursos como IndexedDB para armazenamento NoSQL no navegador e sincronização em segundo plano para permitir que os usuários realizem ações off-line e adiem a comunicação com o servidor até que tenham uma conexão estável novamente. Você também pode implementar padrões como sessões seguras e de longa duração para manter os usuários autenticados e telas de esqueleto para informar rapidamente aos usuários que você está carregando conteúdo que pode voltar ao conteúdo em cache ou a um indicador off-line, se necessário.
Deixe-o sensível ao toque
Quase todos os dispositivos ChromeOS são compatíveis com toque e muitos também com stylus. Por isso, é necessário garantir que seu app funcione perfeitamente com as duas entradas, além do teclado e mouse normais. A API Pointer Events foi projetada especificamente para lidar com isso. Alguns eventos fundamentais relacionados ao ponteiro provavelmente não precisarão ser alterados, como os eventos click. Outros eventos, como mouseup ou touchstart, precisam ser migrados para os eventos de ponteiro correspondentes para funcionar sem problemas em qualquer tipo de ponteiro. Você pode até gerenciar diferentes tipos de entrada separadamente, se quiser. Para apps e jogos que dependem muito da entrada tátil do usuário, a migração para a API Pointer Events fará uma grande diferença em dispositivos ChromeOS.
Desenho suave na Web
Se você estiver criando um app em que os usuários desenham com os dedos ou com uma stylus, manter a latência entre a entrada e a saída rápida o suficiente para parecer fluida sempre foi difícil. Ao criar esses tipos de apps para ChromeOS com tecnologia da API Canvas, recomendamos usar a dica desynchronized para canvas.getContext() e oferecer renderização de baixa latência. Para usar a dica desynchronized em uma tela, faça o seguinte:
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
Considerações sobre o design para toque
É importante considerar a compatibilidade com toque e stylus ao criar seus web apps. Interações que você pode considerar garantidas, como passar o cursor, não funcionam bem, se é que funcionam, para outros métodos de entrada. Confira algumas práticas recomendadas para criar interfaces compatíveis com toque e stylus:
- Não faça suposições de entrada com base no tamanho da tela. Em vez disso, use a detecção de recursos, de preferência no momento da entrada, para determinar como responder. No ChromeOS, os usuários podem alternar entre mouse, toque e stylus em uma única sessão.
- Verifique se os elementos que você espera que um usuário toque têm um tamanho mínimo de destino grande o suficiente para que os elementos ao redor não sejam atingidos por engano.
- Trate o passar o cursor como melhoria progressiva e garanta que a interação possa ser realizada por outros meios para toque e stylus (um toque longo ou um toque simples, por exemplo).
- Os usuários de dispositivos touch esperam poder interagir diretamente com os elementos na tela, por exemplo, usar o gesto de pinça para aumentar o zoom em mapas em vez de usar os botões de zoom in/out. Adicionar gestos de toque comuns, quando apropriado, pode ajudar muito a tornar seu app natural.
Deixe tudo pronto
Embora alguns recursos de PWAs sejam conhecidos, como a API Notifications, que permite que um web app receba e publique notificações da plataforma, há vários recursos novos e futuros que estão chegando à Web para turbinar seus apps. O projeto de recursos da Web do Chromium, também conhecido como Projeto Fugu 🐡, é uma iniciativa para ativar padrões da Web novos e avançados, preservando o que torna a Web única: segurança centrada no usuário, baixa fricção e compatibilidade entre plataformas.
Observação:esses recursos estão em vários estados de conclusão, desde em consideração até enviados, e podem ser segmentados apenas para computadores ou dispositivos móveis, não ambos. Embora os usuários do ChromeOS provavelmente recebam recursos direcionados para computadores assim que eles forem disponibilizados, o suporte multiplataforma, mesmo o suporte estável no ChromeOS, às vezes pode ser um processo de vários anos.