fbpx

O que há de novo no EdgeHTML 18 para desenvolvedores

Além dos novos recursos e aprimoramentos feitos no Microsoft Edge para usuários finais na ultima atualização de recursos do Windows 10. A Microsoft também divulgou os novos recursos no EdgeHTML 18 para os desenvolvedores Web.

O que há de novo no EdgeHTML 18?

A atualização de outubro de 2018 inclui o EdgeHTML 18, a revisão mais recente do mecanismo de renderização do Microsoft Edge e da plataforma Windows.

Autenticação Web

Microsoft Edge agora inclui suporte para a nova API de autenticação Web (também conhecida como WebAuthN). Autenticação Web oferece uma solução aberta, escalonável e interoperável para simplificar a autenticação, permitindo experiências de usuário melhores e mais seguras, substituindo as senhas por credenciais vinculadas a hardware mais fortes. A implementação no Microsoft Edge permite o uso do Windows Hello , permitindo que os usuários façam logon com sua face, impressão digital ou PIN, além de autenticadores externos, como chaves de segurança FIDO2 ou chaves de segurança FIDO U2F, para autenticar com segurança em sites.

Animação mostrando uma compra usando autenticação da Web via Windows Hello

Animação mostrando uma compra usando autenticação da Web via Windows Hello.

Para mais informações, clique aqui.

Novas políticas de reprodução automática

Com a Atualização de outubro de 2018 do Windows 10, o Microsoft Edge oferece aos clientes a capacidade de personalizar suas preferências de navegação em sites que reproduzem mídia com som para minimizar distrações na Web e economizar largura de banda. Os usuários podem personalizar o comportamento da mídia com controles de reprodução automática globais e por site. Além disso, o Microsoft Edge suprime automaticamente a reprodução automática de mídia nas guias de plano de fundo.

Os desenvolvedores devem conferir o guia de políticas de reprodução automática para obter detalhes e práticas recomendadas para garantir uma boa experiência do usuário com a mídia hospedada em seu site.

Atualizações do Service Worker

Para uma atualização sobre o que são os Service Workers e como eles funcionam, confira o resumo da Service Worker API escrito por nossos parceiros no MDN. Fizemos várias atualizações no suporte ao Service Worker no EdgeHTML 18. O que fetchEvent permite que o Service Worker use preloadResponse para prometer uma resposta e resultingClientId para retornar o ID do Cliente que o trabalhador de serviço atual está controlando. A NavigationPreloadManagerinterface fornece métodos para gerenciar o pré-carregamento de recursos, permitindo que você faça uma solicitação em paralelo enquanto um trabalhador de serviço está inicializando, evitando qualquer atraso de tempo. Confira as propriedades de API recém-suportadas para pré-carregar recursos com um Service Worker.

Máscara CSS, mesclagem de plano de fundo e excesso de rolagem

EdgeHTML 18 melhora o suporte para CSS Masking. Esta implementação suporta ainda mais a CSS máscara-image propriedade com suporte aperfeiçoado WebKit, incluindo webkitMask, webkitMaskComposite, webkitMaskImage, webkitMaskPosition, webkitMaskPositionX, webkitMaskPositionY, webkitMaskRepeat, webkitMaskSize, bem como suporte a padrões mais completa, acrescentando maskComposite, maskPosition, maskPositionX, maskPositionY, e maskRepeat.

Determinar como as imagens de plano de fundo de um elemento devem se mesclar e receber uma atualização baseada em padrões nesta versão, background-blend-mode agora será habilitado por padrão.

Melhorias CSS também pode ser encontrada na forma como Microsoft Edge lida com o que acontece quando o limite de uma área de rolagem é alcançado, agora apoiando overscroll-behavior, inclusive overscroll-behavior-x, overscroll-behavior-ye overflow-wrap.

Melhorias dos Chakras

EdgeHTML 18 inclui melhorias no mecanismo Chakra JavaScript para suportar novos recursos ES e WASM, melhorar o desempenho e melhorar a interoperabilidade. Procure por um post separado no final do mês, recapitulando todas as melhorias dos Chakras em mais detalhes.

Ferramentas de desenvolvimento

A atualização mais recente do Microsoft Edge DevTools adiciona várias conveniências à interface do usuário, incluindo novos painéis dedicados para Service Workers and Storage, ferramentas de pesquisa de arquivos de origem no Debugger e novos domínios Edge DevTools Protocol para depuração de estilo / layout e consola APIs. Nós estaremos cobrindo as melhorias para o Microsoft Edge DevTools em mais detalhes em um post separado em breve – fique atento!

Propriedades de Notificação Web

Quatro novas propriedades são agora suportadas para as notificações web: actions, badge, image, e maxActions, melhorar a nossa capacidade de criar notificações na web que são compatíveis com os sistemas de notificação existentes, mantendo-se independente de plataforma.

Ouvindo seu feedback

Por demanda popular, implementamos o suporte para várias APIs comumente solicitadas no EdgeHTML 18, incluindo o método DataTransfer.setDragImage() usado para definir uma imagem personalizada ao arrastar e soltar e secureConnectionStart uma propriedade da API de tempo de recursos de desempenho, que pode ser usada para Retornar um timestamp imediatamente antes de o navegador iniciar o processo de handshake para proteger a conexão atual.

Além disso, ninguém gosta de enumerar a coleção de atributos, então adicionamos suporte para Element.getAttributeNames retornar os nomes de atributos do elemento como uma matriz de strings, bem como Element.toggleAttribute alternar um atributo booleano (removendo se presente e adicionando se não) .

Com base em nossos principais melhorias de acessibilidade em versões anteriores, nós adicionamos suporte para três novos papéis ARIA para permitir que os usuários de tecnologias assistivas para obter significado semântico ao atravessar elementos SVG que são mapeados para esses papéis (graphics-document, graphics-object, e graphics-symbol).

Também adicionamos suporte para imagens WebP, melhorando a interoperabilidade com sites que as atendem pela web.

Progressive Web App

Os aplicativos JavaScript do Windows 10 (aplicativos da web em execução em um processo WWAHost.exe ) agora suportam um script de plano de fundo opcional por aplicativo que é iniciado antes de qualquer exibição ser ativada e executada durante o processo. Com isso, você pode monitorar e modificar navegações, rastrear o estado em todas as navegações, monitorar erros de navegação e executar código antes que as exibições sejam ativadas.

Quando especificado como StartPage na sua aplicação manifest, cada um dos pontos de vista do aplicativo (janelas) estão expostos para o script como instâncias da nova classe WebUIView, fornecendo os mesmos eventos, propriedades e métodos como um general (Win32) WebView. Seu script pode escutar o NewWebUIViewCreated evento para interceptar o controle da navegação para uma nova visualização:

Windows.UI.WebUI.WebUIApplication.addEventListener(<span class="hljs-string">"newwebuiviewcreated"</span>, newWebUIViewCreatedEventHandler);

Qualquer ativação de aplicativo com o script de segundo plano, como o StartPagedependerá do próprio script para navegação.

WebView

Service workers

Service workers agora são suportados no controle WebView, além do navegador Microsoft Edge e dos aplicativos JavaScript do Windows 10. Todos os tipos de visão da Web do Microsoft Edge (PWA, UWP, Win32) dão suporte aos trabalhadores de serviços. No entanto, esteja ciente de que a API Push ainda não está disponível para as versões UWP e Win32.

As arquiteturas de aplicativo x64 exigem pacotes Neutro (qualquer CPU) ou x64 , pois os operadores de serviço não são suportados nos processos do WoW64. (Para economizar espaço em disco, a versão do WoW das DLLs necessárias não está nativamente incluída no Windows.)

Atualizações do Win32 WebView

O EdgeHTML WebViewControl para Windows desktop (Win32) aplicativos foi atualizado com vários novos recursos, incluindo a capacidade de injetar script no carregamento da página antes de quaisquer outros scripts na página são executados (AddInitializeScript) e saber quando um determinado WebViewControl recebe ou perde o foco (GotFocus/LostFocus).

Além disso, agora você pode criar um novo WebViewControl como a janela aberta de window.open. O NewWindowRequested evento ainda notifica um aplicativo quando o script dentro do WebViewControl chama window.open como sempre foi, mas com EdgeHTML 18 NewWindowRequestedEventArgs inclui a capacidade de (GetDeferral) adiar um deferral (NewWindow) para definir um novo WebViewControl como o destino da janela. aberto:

WebViewControlProcess wvProc;
WebViewControl webView;

void OnWebViewControlNewWindowRequested(WebViewControl sender, WebViewControlNewWindowRequestedEventArgs args)
{

if (args.Uri.Domain == “mydomain.com”)
{
using deferral = args.GetDeferral();
args.NewWindow = await wvProc.CreateWebViewControlAsync(
parentWindow, targetWebViewBounds);
deferral.Complete();
}
else
{
// Prevent WebView from launching in the default browser.
args.Handled = true;
}
}

String htmlContent = “<html><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Ewindow.open(%E2%80%98http%3A%2F%2Fmydomain.com%E2%80%99)%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><body></body></html>”;

webView.NavigateToString(htmlContent);

WebDriver

Continuamos a melhorar a interoperabilidade e a integralidade de nossa implementação do WebDriver, passando agora a 1222 dos 1357 testes da plataforma web (de 783 em nossa atualização de junho).

WebDriver agora é um recurso do Windows Sob Demanda (FoD), tornando mais fácil do que nunca automatizar os testes no Microsoft Edge e obter a versão correta para o seu dispositivo. Você não precisará mais corresponder manualmente ao build / branch / flavor ao instalar o WebDriver; seu WebDriver será atualizado automaticamente para corresponder a quaisquer novas atualizações do Windows 10.

Você pode instalar o WebDriver ativando o Modo de Desenvolvedor ou instalá-lo como independente acessando Configurações do Windows > Aplicativos > Aplicativos e recursos > Gerenciar recursos opcionais. Para obter mais informações, clique aqui.