Novidades do Chrome 93

Pete LePage

Veja o que é necessário saber:

Meu nome é Pete LePage, e estou trabalhando e gravando de casa. Vamos conferir as novidades para desenvolvedores no Chrome 93.

CSS Module Scripts

Agora é possível carregar folhas de estilo CSS com instruções import, assim como módulos JavaScript. As folhas de estilo podem ser aplicadas ao documento ou raízes de sombra da mesma maneira que as folhas de estilo configuráveis.

O novo recurso de scripts de módulo CSS é ótimo para elementos personalizados. E, ao contrário de outras maneiras de aplicar CSS do JavaScript, não é necessário criar elementos ou mexer com strings JavaScript de texto CSS.

Para usá-lo, importe a folha de estilo com assert {type: 'css'} e aplique-a ao document ou shadowRoot chamando adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Mas cuidado, se você deixar o assert de fora, o arquivo será tratado como JavaScript e não vai funcionar.

Confira Como usar scripts de módulo CSS para importar folhas de estilo no web.dev para saber todos os detalhes.

API Multi-Screen Window Placement

Para alguns apps, abrir novas janelas e colocá-las em lugares ou telas específicos é um recurso importante. Por exemplo, ao usar o Apresentações Google para apresentar, quero que os slides apareçam em tela cheia na tela principal e que minhas anotações de orador apareçam na outra tela.

A API Multi-Screen Window Placement permite enumerar as telas conectadas à máquina do usuário e posicionar janelas em telas específicas. Este é o segundo teste de origem, e fizemos várias mudanças com base no seu feedback.

É possível verificar rapidamente se há mais de uma tela conectada ao dispositivo:

const isExtended = window.screen.isExtended;
// returns true/false

No entanto, a funcionalidade principal está em window.getScreens(), que fornece todos os detalhes sobre as telas anexadas.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Por exemplo, é possível determinar a tela principal e usar requestFullscreen() para mostrar um elemento nela.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

E oferece uma maneira de detectar mudanças, por exemplo, se uma nova tela for conectada ou removida.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Confira o artigo do Tom sobre como gerenciar várias telas com a API Multi-Screen Window Placement no web.dev para saber mais.

Ciclo de lançamento reduzido

Em março, anunciamos nossos planos de encurtar o ciclo de lançamento e lançar uma nova versão do Chrome a cada quatro semanas.

Esse momento chegou, e vamos lançar o Chrome 94 em 21 de setembro. Você pode encontrar as datas de lançamento planejadas para cada versão no Calendário do Chrome.

Novos recursos de PWA

Se você estiver criando um app da Web progressivo, há dois novos testes de origem que valem a pena conferir.

Gerenciadores de URL para PWAs

Se você tiver um PWA instalado e clicar em um link para ele, provavelmente quer que ele seja aberto no PWA, não em uma guia do navegador.

Ao especificar url_handlers no manifesto do app da Web e adicionar um arquivo web-app-origin-association ao diretório .well-known/, você pode informar ao navegador que, se um usuário clicar em um link para o PWA, ele será aberto no PWA instalado.

Exemplo de url_handlers no arquivo manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

Exemplo de arquivo web-app-origin-association:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Com uma pequena verificação extra, você pode até mesmo fazer com que o PWA processe links de outras origens que você possui.

Todos os detalhes sobre o teste de origem estão em PWAs como gerenciadores de URL no web.dev.

Sobreposição dos controles da janela

A sobreposição de controles da janela estende a área do cliente para cobrir toda a janela, incluindo a barra de título e os botões de controle da janela, como os botões de fechar, maximizar e minimizar.

Use esse recurso para deixar o PWA instalado mais parecido com outros apps instalados.

Para mais informações sobre o teste de origem, consulte Personalizar a sobreposição de controles da janela da barra de título do PWA.

PWA Summit

O PWA Summit será em outubro. É uma conferência on-line sem custo financeiro focada em ajudar todos a ter sucesso com Progressive Web Apps. O PWA Summit é uma colaboração entre pessoas de várias empresas diferentes envolvidas na criação de tecnologias de PWA: Google, Intel, Microsoft e Samsung.

Há muitas palestras e conteúdos incríveis. Saiba mais e faça sua inscrição em PWASummit.org.

E muito mais.

Claro que há muito mais.

  • Os itens flexbox e flexbox receberam suporte às palavras-chave de alinhamento: start, end, self-start, self-end, left e right.
  • A API de lixeira assíncrona agora oferece suporte a arquivos SVG.
  • Além disso, o atributo media será respeitado ao definir meta theme-color, para que você possa especificar cores de tema diferentes para os modos claro e escuro.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira as mudanças adicionais no Chrome 93 nos links abaixo.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e assim que o Chrome 94 for lançado, estarei aqui para contar as novidades do Chrome.