Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 89

Pete LePage

O Chrome 89 está começando a ser lançado para a versão estável.

Veja o que é necessário saber:

WebHID, WebNFC e Web Serial fizeram upgrade dos testes de origem e agora estão disponíveis na versão estável.
Estamos resolvendo uma brecha que alguns desenvolvedores costumavam contornar as verificações de instalação do PWA.
O compartilhamento da Web e o destino de compartilhamento da Web chegam ao computador.
E há muitos outros.

Sou Pete LePage, trabalhando e gravando em casa. Vamos conferir as novidades para desenvolvedores no Chrome 89.

WebHID, WebNFC e Web Serial

Estou muito empolgado com o WebHID, a WebNFC e o Web Serial. Eles abrem novos cenários para os usuários que nunca foram possíveis antes, interagindo com hardware do mundo real.

Elas permitem que os fabricantes se conectem a apps de videoconferência divertidos e peculiares para usar os botões de telefonia dedicados em alto-falantes especializados. ou qualquer número de outros casos de uso.

Usando o Web Serial e cerca de 60 linhas de código, @AndreBan criou uma página que pode interagir com o REPL do MicroPython em um Raspberry Pi Pico. O Web Serial também é usado pela Espruino no ambiente de desenvolvimento integrado baseado na Web (link em inglês).

Na CDS 2019, Francois escreveu um jogo divertido com estilo de memória usando Web NFC. Era necessário colocar o smartphone no cartão certo, na ordem certa.

StreamDeck com tapete Daft Punk

E minha favorita, @bramus, usou o WebHID para se conectar a um StreamDeck, criando uma bateria do Daft Punk (link em inglês). Se você não tem um StreamDeck, confira o vídeo de demonstração dele no YouTube e confira o código no GitHub (link em inglês).

Seja o site que interage com o hardware ou o hardware que pode interagir com muitos sites, os usuários ganham porque não precisam instalar drivers ou softwares especiais.

Saiba mais sobre alguns dos dispositivos aos quais você pode se conectar em web.dev/devices ou confira os guias iniciais para WebHID, WebNFC e Web Serial.

Mudanças nos critérios de instalação do PWA

O suporte off-line tem sido uma parte fundamental dos critérios de instalação dos Progressive Web App desde o início. Assim como acontece com outros apps instalados, os usuários esperam que ele funcione de maneira confiável. Deve ser rápido e eles nunca mais verão o dinossauro off-line.

Ainda este ano, planejamos superar uma brecha que permitia que alguns sites passassem pelos critérios de instalação, sem ter uma experiência off-line. Se o PWA já tiver uma experiência off-line, está tudo pronto. Você não precisa fazer nada, mas, se não fizer isso, está na hora de adicionar uma.

A partir do Chrome 89, se o PWA não fornecer uma resposta válida quando off-line, você verá um aviso no DevTools na guia "Problemas", e o Lighthouse indicará que há um problema. A aplicação começará no Chrome 93, ainda este ano.

DevTools mostrando uma mensagem de aviso no Console. — Mensagem de aviso no Console do Chrome DevTools.

DevTools mostrando uma mensagem de aviso na guia "Application". — Mensagem de aviso na guia "Aplicativo" > "Manifesto" > "Instalação".

Você pode decidir que tipo de experiência off-line quer oferecer. O ideal é que você ofereça o máximo possível de experiências. Mas, no mínimo, ela pode ser tão simples quanto uma página substituta off-line.

Você pode encontrar mais detalhes sobre a mudança e o motivo dessa mudança em Aprimoramento da detecção do suporte off-line para Progressive Web App.

Se você não souber por onde começar, confira o Workbox. Ele tem um conjunto de bibliotecas que podem potencializar um service worker pronto para produção para seu PWA. Como alternativa, para uma página substituta off-line simples, o artigo Criar uma página substituta off-line tem todo o código necessário, e você pode copiar e colar diretamente no site.

Compartilhamento da Web e destino de compartilhamento da Web para computador

Caso seu site permita que usuários criem, editem ou interajam com arquivos, você precisa usar as APIs Web Share e Web Share Target. Essas APIs estão disponíveis em dispositivos móveis há algum tempo, mas agora podem ser usadas no ChromeOS e no Windows.

Com o Web Share, os usuários podem enviar arquivos ou dados a outros apps instalados no dispositivo, como o compartilhamento de uma foto do Google Fotos no Twitter.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
}

Para se registrar como um destino para que outros apps possam compartilhar arquivos ou dados com você, use a API Web Share Target.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
},

Para guias iniciais, consulte Integrar com a interface de compartilhamento do SO com a API Web Share e Como receber dados compartilhados com a API Web Share Target.

E mais

E, claro, há muito mais.

O Chrome agora permite o nível superior await em módulos JavaScript.

Para reduzir a confusão para os usuários, atualizamos o ícone mostrado na omnibox para PWAs instaláveis.

Se você usou uma Atividade confiável na Web para disponibilizar seu PWA na Play Store para ChromeOS, inscreva-se para o teste de origem da API Digital Goods.

Créditos

A foto do Raspberry Pis e do Arduino é de Harrison Broadbent no Unsplash.