No Chrome 73, adicionamos suporte para:
- Crie conteúdo portátil com mais facilidade com trocas HTTP assinadas.
- A mudança dinâmica de estilos fica muito mais fácil com as folhas de estilo construíveis.
- A compatibilidade com Progressive Web Apps é disponibilizada para Mac, oferecendo suporte a PWAs para todas as plataformas de computadores e dispositivos móveis, facilitando a criação de apps instaláveis fornecidos pela Web.
E tem muito mais!
Meu nome é Pete LePage. Vamos conferir as novidades para os desenvolvedores no Chrome 73.
Registro de alterações
Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 73.
- Lista de alterações do repositório de origem do Chromium
- Atualizações do ChromeStatus.com para o Chrome 73
- Descontinuações e remoções do Chrome 73
- Atualizações de mídia do Chrome 73
- Novidades do JavaScript no Chrome 73
Os Progressive Web Apps funcionam em qualquer lugar
Os Progressive Web Apps fornecem uma experiência instalável, semelhante a um app, criada e fornecida diretamente pela Web. No Chrome 73, adicionamos suporte para macOS, trazendo suporte para Progressive Web Apps em todas as plataformas de computador, Mac, Windows, ChromeOS e Linux, além de dispositivos móveis, simplificando o desenvolvimento de apps da Web.
Um Progressive Web App é rápido e confiável, ou seja, ele sempre carrega e funciona na mesma velocidade, independentemente da conexão de rede. Eles oferecem experiências avançadas e envolventes com recursos modernos da Web que aproveitam ao máximo os recursos do dispositivo.
Os usuários podem instalar seu PWA pelo menu de contexto do Chrome ou você pode promover
diretamente a experiência de instalação usando o evento
beforeinstallprompt
. Depois
de instalado, um PWA se integra ao SO para se comportar como um app nativo:
os usuários encontram e iniciam os apps no mesmo local que outros apps, eles são executados na
própria janela, aparecem no seletor de tarefas, os ícones podem mostrar
um selo de notificação e assim por diante.
Queremos diminuir a lacuna de recursos entre a Web e a nativa para fornecer uma base sólida a aplicativos modernos oferecidos na Web. Estamos trabalhando para adicionar novos recursos de plataforma da Web que ofereçam acesso a recursos como o sistema de arquivos, o wake lock, a adição de um selo de ambiente à barra de endereço para informar aos usuários que seu PWA pode ser instalado, a instalação de políticas para empresas e muito mais.
Se você já está criando um PWA para dispositivos móveis, o mesmo acontece com um PWA para computadores. Na verdade, se você usou o design responsivo, provavelmente já está pronto para começar. Sua única base de código funcionará em computadores e dispositivos móveis. Se você está começando a usar PWAs, vai se surpreender com a facilidade de criação deles.
Depois, itere a partir daí.
Trocas HTTP assinadas
Signed HTTP Exchanges (SXG), parte de uma tecnologia emergente chamada pacotes da Web, agora está disponível no Chrome 73. Um Signed HTTP Exchange possibilita a criação de conteúdo "portátil" que pode ser enviado por outras partes. Esse é o aspecto principal: ele mantém a integridade e a atribuição do site original.
Isso separa a origem do conteúdo do servidor que o entrega. Porém, o conteúdo está assinado, como se fosse entregue pelo servidor. Quando o navegador carrega essa troca assinada, ele pode mostrar com segurança seu URL na barra de endereço, porque a assinatura na troca indica que o conteúdo vem da sua origem.
As trocas HTTP assinadas permitem a entrega mais rápida de conteúdo para os usuários, possibilitando aproveitar os benefícios de uma CDN sem precisar ceder o controle da chave privada do certificado. A equipe de AMP está planejando usar trocas HTTP assinadas nas páginas de resultados da pesquisa do Google para melhorar os URLs de AMP e acelerar os cliques nos resultados da pesquisa.
Confira a postagem Signed HTTP Exchanges (em inglês) do Kinuko para detalhes sobre como começar.
Folhas de estilo edificáveis
As folhas de estilo construíveis, novidade do Chrome 73, oferecem uma nova maneira de criar e distribuir estilos reutilizáveis, o que é particularmente importante ao usar o Shadow DOM.
Sempre foi possível criar folhas de estilo usando JavaScript. Crie um
elemento <style>
usando document.createElement('style')
. Em seguida, acesse a propriedade da página para conseguir uma referência à instância CSSStyleSheet
subjacente e defina o estilo.
O uso desse método tende a levar a sobrecarga da folha de estilo. Pior ainda, ele causa um flash de conteúdo sem estilo. Com as folhas de estilo construtivas, é possível definir e preparar estilos CSS compartilhados e, em seguida, aplicá-los a várias raízes de sombra ou ao documento com facilidade e sem duplicação.
As atualizações para um CSSStyleSheet
compartilhado são aplicadas a todas as raízes em que ela foi adotada, e a adoção de uma folha de estilo é rápida e síncrona depois que a planilha é carregada.
Começar é simples: crie uma nova instância de CSSStyleSheet
e use replace
ou replaceSync
para atualizar as regras da folha de estilo.
const sheet = new CSSStyleSheet();
// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');
// this throws an exception:
try {
sheet.replaceSync('@import url("styles.css")');
} catch (err) {
console.error(err); // imports are not allowed
}
// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
.then(sheet => {
console.log('Styles loaded successfully');
})
.catch(err => {
console.error('Failed to load:', err);
});
Confira a publicação Construable Style Sheets: Entrecionar estilos reutilizáveis de Jason Miller para mais detalhes e exemplos de código (links em inglês).
E muito mais.
Essas são apenas algumas das mudanças no Chrome 73 para desenvolvedores. É claro, há muito mais.
matchAll()
, é um novo método de correspondência de expressão regular no protótipo de string e retorna uma matriz contendo as correspondências completas.- O elemento
<link>
agora oferece suporte às propriedadesimagesrcset
eimagesizes
para corresponder aos atributossrcset
esizes
deHTMLImageElement
. - A implementação do raio de desfoque da sombra do Blink, agora corresponde ao Firefox e ao Safari.
- O modo escuro para a interface do Chrome agora é compatível com Mac, e o suporte para Windows está a caminho. Além disso, há um trabalho em uma consulta de mídia CSS:
prefers-color-scheme
, que pode ser usada para detectar se o usuário solicitou que o sistema use um tema de cores claras ou escuras. O bug de acompanhamento é Adicionar suporte ao recurso de mídia CSSprefers-color-scheme
no Chrome e no Firefox.
Inscrever-se
Para ficar por dentro dos nossos vídeos, inscreva-se no canal de desenvolvedores do Chrome no YouTube. Você vai receber uma notificação por e-mail sempre que lançarmos um novo vídeo.
Eu sou Pete LePage e, assim que o Chrome 74 for lançado, terei aqui as novidades: