Conheça o WebKit para SwiftUI

Olá. Meu nome é Richard. Sou engineer na equipe WebKit. WebKit é o mecanismo de navegação no cerne do Safari, do Mail e de vários apps para iOS, iPadOS, visionOS e macOS. Há anos, ele capacita desenvolvedores como você a criar experiências robustas e dinâmicas, trazendo todo o poder e a flexibilidade da internet diretamente para seus apps, aproveitando os benefícios das plataformas da Apple. Neste ano, tenho o prazer de apresentar o WebKit para SwiftUI. Com a nova API SwiftUI, ficou mais fácil do que nunca integrar conteúdo online aos seus apps. Você vai adorar usar o WebKit para SwiftUI para combinar as avançadas experiências online viabilizadas pelo WebKit e a facilidade de uso da SwiftUI. Com a nova API, exibir conteúdo online é tão fácil quanto criar uma visualização online e fornecer um URL a ela, e funciona nas plataformas compatíveis com o WebKit. Agora é muito fácil começar a usar o WebKit e o SwiftUI. Vamos analisar algumas das novas maneiras incríveis de usar essa API para criar seu app. Aprenderemos formas de carregar e exibir seu conteúdo online, incluindo o carregamento de recursos locais. Falaremos sobre todas as formas de responder a alterações em seu conteúdo online e como você pode fazer alterações no conteúdo. Explicaremos como personalizar a interação das pessoas com seu conteúdo online usando modificadores de visualização, como permitir a localização na página, definir a posição de rolagem etc.

Há muitos tópicos para analisar, então vamos lá. Para mostrar as coisas legais que a nova API pode fazer, vou criar um app para procurar informações sobre lagos ao redor do mundo. Vou exibir o belo conteúdo online em todo o app e mostrar como carregar o conteúdo dos artigos e também como observar navegações e se comunicar com o JavaScript para dar vida ao seu app. Vou mostrar como personalizar a navegação do conteúdo online do jeito que você quiser. E vou adicionar toques finais com modificadores de visualização novos e conhecidos para melhorar a aparência e a interatividade do app. Vamos começar criando o app. Parte do código da SwiftUI já está pronta, para que possamos focar na integração das novas APIs WebKit. Vou começar pelo básico, exibir conteúdo online. A nova API WebView torna isso incrivelmente simples. Esta é uma visualização SwiftUI projetada para exibir qualquer conteúdo online. Como já vimos, para usar um WebView, basta dar a ele um URL, e ele carregará e exibirá automaticamente seu conteúdo. Mas, é claro, talvez você não queira usar o WebView para exibir um único URL. Neste exemplo, temos um botão que alterna entre dois URLs e novamente fornecemos o URL ao WebView. Sempre que o botão for alternado, a visualização online será carregada e acessará o novo URL. É simples assim. Talvez você queira fazer algo um pouco mais interessante com seu conteúdo online, como reagir a alterações em suas propriedades. Nesses casos, basta criar um WebPage e conectá-lo ao seu WebView. As alterações no conteúdo online estarão disponíveis por meio do site, como o título da página.

O WebPage é uma nova classe Observable que representa o conteúdo online. Foi projetado desde o início para funcionar perfeitamente com o Swift e a SwiftUI.

É usado para carregar, controlar e se comunicar com o conteúdo online. O WebPage pode ser usado por si só. Mas, combinado com o WebView, permite criar experiências avançadas para seu conteúdo online. Vamos mostrar algumas diferentes maneiras de carregar conteúdo online usando o WebPage. Uma coisa comum que talvez você queira fazer é carregar um URL remoto em sua página. Para isso, basta usar a API de carregamento com uma solicitação de URL. Mas o WebPage não se limita a carregar URLs. Você também pode carregar conteúdo HTML fornecendo a string HTML e um URL base à API. O URL base é usado quando o sistema resolve URLs relativos dentro do HTML. O WebPage permite o carregamento de vários tipos de dados, como dados de arquivo online. Forneça os dados que deseja carregar, seu tipo MIME e sua codificação de caracteres e um URL base. No meu app, criarei uma classe ArticleViewModel que representa um artigo específico. E dentro dela, colocarei o WebPage e o LakeArticle associados. Para a SwiftUI poder reagir a quaisquer alterações na página e no artigo, tornarei a classe Observable. Agora que tenho a base da classe configurada, adicionarei uma função para carregar o URL do lago na página. Vamos passar para a View. Criarei um WebView usando o WebPage do modelo. E chamarei a função loadArticle quando a visualização aparecer pela primeira vez. Para um toque extra agradável, usarei ignoreSafeArea para que a página flua até a parte inferior do dispositivo. Ao adicionar um novo URL de artigo ao app e abri-lo, ele carregará e exibirá o conteúdo na visualização detalhada. É um ótimo começo. Mas para melhor a experiência, vou fornecer alguns artigos pré-carregados no app. O WebKit lida com o carregamento de URLs e dados remotos imediatamente. Mas também permite carregar o conteúdo incluído no app ou acessar arquivos locais. Você pode fazer isso usando o novo protocolo URLSchemeHandler. Vou explicar como usá-lo. Ao implementar seu gerenciador de esquema, todos os acessos a um URL com esse esquema passarão pelo gerenciador e usarão os dados fornecidos. Mas antes de entrarmos nisso, vamos ver o que é um esquema. O esquema é a parte do URL antes dos dois-pontos, neste caso, é o HTTPS. O WebKit lidará com esquemas comuns, como https, file e about. Para esquemas personalizados, como este esquema lakes, o protocolo URLSchemeHandler permite que o código do app processe o carregamento de recursos para URLs do esquema lakes. Para implementar um gerenciador de esquema personalizado, crie um tipo que confirme no protocolo URLSchemeHandler e implemente a função de resposta do protocolo retornando uma sequência assíncrona de URLSchemeTaskResult.

A função fornece um parâmetro URLRequest para decidir como responder. Ao criar a sequência de eventos, você precisa produzir um URLSchemeTaskResult que contenha um URLResponse. Depois de produzir um URLResponse, você só precisa fornecer alguns dados. Isso é ótimo na maioria dos casos, mas talvez você queira transmitir dados de forma assíncrona. Graças ao tipo de retorno AsyncSequence, você pode fazer isso. Aqui, recebo uma resposta de forma assíncrona. E também recebo um AsyncSequence de valores de dados, que adiciono à sequência retornada. Se a tarefa do esquema de URL for cancelada, a tarefa dentro da função também será cancelada. No meu app, quero ter alguns lagos pré-preenchidos e carregados para que as pessoas comecem a usar imediatamente. Para implementar isso, colocarei ativos HTML e CSS no meu app e usarei o gerenciador de esquema personalizado que criei. Só preciso registrar o gerenciador de esquema com o WebPage. Para isso, criarei um URLScheme usando o esquema que quero gerenciar. Neste caso, usarei lakes novamente. Se fornecer um esquema que o WebKit já gerencia, o inicializador retornará nil. Criarei uma configuração do WebPage e adicionarei o gerenciador de esquema ao seu dicionário urlSchemeHandlers. Também passarei a configuração quando estiver criando o WebPage. Assim, posso criar valores padrão do LakeArticle e atribuir um URL com meu esquema personalizado, para que o conteúdo online seja carregado usando os recursos salvos no pacote em vez de ser buscado na internet. Você já sabe como carregar e navegar para novas páginas. Quando a página terminar de carregar, quero preencher a barra lateral com seu sumário. Para isso, observo os eventos de navegação que ocorrem no conteúdo online, o que é muito fácil. Você pode acessar o estado de navegação usando a propriedade Observable currentNavigationEvent no WebPage. Quando tiver esse evento, você poderá obter seu navigationID e executar alguma ação com base no tipo de evento. Sei que é muita coisa para assimilar. Vamos aos diferentes tipos de eventos de navegação. Uma navegação é composta por vários eventos sequenciais. A navegação sempre começa com startedProvisionalNavigation. Você pode obter um evento receivedServerRedirect se o servidor redirecionar a solicitação. Você obtém um evento committed quando a página começa a receber conteúdo para o mainframe. O evento finish chega quando a navegação é concluída, embora isso nem sempre seja garantido. Uma navegação pode falhar. Nesse caso, os eventos failed ou failedProvisionalNavigation são emitidos. E quando uma nova navegação for iniciada, a propriedade currentNavigationEvent refletirá essa navegação. Você vai querer reagir a qualquer navegação, como quando alguém clica em um link ou você chama a função de carregamento.

Você pode fazer isso com a nova API Observations, disponível no Swift 6.2. Usarei Observations para criar uma sequência assíncrona do currentNavigationEvent e usarei um loop for await para observar cada alteração no evento atual. Assim, posso lidar com os erros que surgirem ou atualizar as seções do artigo quando ele terminar de carregar. Isso torna a resposta a alterações de navegação no conteúdo online mais fácil do que nunca. Juntamente com currentNavigationEvent, há várias propriedades no WebPage que podem ser observadas para alterações, e elas funcionam bem com a SwiftUI. Quero que a barra de navegação da visualização detalhada mostre o título do artigo. Posso fazer isso apenas definindo navigationTitle como a propriedade title do WebPage. Isso foi muito fácil. Há muitas outras propriedades úteis além de page title, como current URL, estimated loading progress, theme color e muito mais. Essas propriedades são super úteis. Mas, às vezes, você deseja obter informações específicas da página que não são uma das propriedades padrão. Então você precisa de algo mais flexível. E facilitamos isso também. Você pode avaliar o JavaScript para se comunicar com uma página usando a nova API callJavaScript. Basta escrever uma função JavaScript normalmente e passá-la quando usar callJavaScript. O tipo de retorno de callJavaScript é um valor opcional Any. Converta-o para um tipo Swift apropriado para que seja mais fácil de usar. Isso facilita a implementação da minha função parseSections usando o HTML da página e obtendo todos os ids e títulos de cada seção. Converterei o resultado em structs de seções para facilitar o gerenciamento.

Agora, o app exibirá as seções do artigo na barra lateral assim que for carregado. O WebPage também oferece a opção de personalizar as políticas de navegação, usando o novo protocolo WebPage.NavigationDeciding. No meu app, implementarei políticas de navegação personalizadas para que as navegações no conteúdo online se comportem como quero. Se houver um link em uma página para um site externo, quero que seja aberto no meu navegador padrão em vez de carregado no meu app. Conseguirei isso criando um novo tipo NavigationDecider que confirme para WebPage.NavigationDeciding. Esse protocolo permite especificar diferentes políticas para diferentes etapas da navegação, antes de ocorrer, quando você receber uma resposta e quando a autenticação for necessária. Como quero determinar se uma navegação deve ser permitida ou não com base no URL, vou especificar a política para uma ação de navegação. Esta função fornece o NavigationAction usado na navegação e o NavigationPreferences, que você pode ajustar com base na solicitação. Se url scheme for lakes ou host for lakes.apple.com, permitirei a navegação, pois isso significa que o link é parte do app e não externo. Se esse não for o caso, não quero que o WebPage no app continue a navegação. Vou cancelá-lo e atualizar a propriedade urlToOpen no ArticleViewModel. Com um NavigationDecider personalizado, preciso configurar minha página para usá-lo. Voltando ao ArticleViewModel, criarei um NavigationDecider e uma propriedade urlToOpen. Atualizarei meu WebPage para incluir o NavigationDecider para que use a política que especifiquei. Com o WebPage configurado, há uma etapa final para fazer com que essa funcionalidade crie forma.

No ArticleView, ouvirei as alterações na propriedade urlToOpen no modelo. Se a propriedade não for nil, saberei que a navegação foi cancelada. Então usarei o valor de ambiente openURL da SwiftUI para abrir o URL no navegador padrão. As navegações funcionam como quero. Vamos passar para as formas de personalizar a interação das pessoas com seu conteúdo online usando modificadores de visualização. Vamos configurar o comportamento de rolagem para que a visualização se mova apenas verticalmente. As visualizações online se movem com a rolagem das bordas verticais ou horizontais, mesmo que o conteúdo seja menor do que elas. O modificador scrollBounceBehavior padrão permite personalizar esse comportamento e funciona bem com o WebView. Para o eixo horizontal se mover apenas se o conteúdo for maior que a visualização, o valor .basedOnSize pode ser definido para esse eixo. Esse é apenas um dos recursos de personalização de rolagem disponibilizados pelo WebView. Mas isso não é tudo. A novidade no visionOS é Olhe para rolar a tela, que pode ser configurado com um modificador de visualização.

No visionOS, o WebView é compatível com o look ScrollInputKind ao usar o modificador webViewScrollInputBehavior. Por padrão, o recurso Olhe para rolar a tela está desativado no WebView. Queremos ativá-lo no app, então usarei o modificador e definirei seu comportamento como ativado para o tipo look.

Alguns artigos são longos, então queremos que as pessoas encontrem o que querem de forma conveniente. Para que elas pesquisem facilmente os artigos, vamos adicionar o suporte a Find-In-Page. O modificador findNavigator já funciona perfeitamente com o WebView, então incluir Find-In-Page é muito fácil. Para exibir o findNavigator, adicionarei um botão à barra de ferramentas do app. No iOS e iPadOS, o findNavigator aparece como parte do teclado na tela quando visível ou na parte inferior da visualização online. E, no macOS e visionOS, fica na parte superior da visualização online. Acho que o app está realmente começando a criar forma. Vamos torná-lo mais acessível criando uma ótima experiência de rolagem. Outro modo de navegar em um artigo é escolher uma seção na barra lateral e fazer com que a visualização role até essa seção. Precisarei sincronizar a posição de rolagem da visualização com a seção selecionada para que você saiba onde está. Adicionarei a funcionalidade e, ao tocar em uma seção na barra lateral, a visualização online rola até essa seção. Para rolar até uma seção, preciso determinar onde está, o que posso fazer usando uma função JavaScript já configurada. Para executar o script, vou usar novamente callJavaScript. Desta vez, no entanto, também vou fornecer um dicionário de argumentos. Suas chaves são representadas para o JavaScript como variáveis locais e seus valores são convertidos em valores JavaScript. Essa é uma maneira avançada, mas prática, de criar funções JavaScript reutilizáveis genéricas. No ArticleView, vou adicionar um estado para poder controlar a posição de rolagem e a seção. Você associa uma posição de rolagem a um WebView usando o novo modificador webViewScrollPosition. Basta definir a posição de rolagem sempre que a seção mudar simplesmente usando scrollTo na posição de rolagem e incluindo a posição calculada da seção. Agora que posso rolar até uma seção usando a barra lateral, quero que essa barra seja atualizada à medida que rolo. O novo modificador onScrollGeometryChange do WebView permite fazer isso e muito mais. Se uma parte da geometria de rolagem do WebView mudar, como o tamanho ou deslocamento de conteúdo, ele usará a transformação que você fornecer e chamará o fechamento se o valor transformado mudar. No fechamento, calcularei a seção mais próxima do deslocamento de rolagem e atualizarei a seção selecionada. E assim, a seção selecionada e a posição de rolagem agora estarão perfeitamente sincronizadas. Com isso, o app Lakes agora está completo. Acho que foi tranquilo. Combinei WebPage e WebView para carregar e exibir os artigos, e consegui até preencher previamente o app com alguns artigos padrão. Também melhorei a experiência do usuário mostrando o sumário na barra lateral e sincronizando a posição de rolagem. Vimos muita coisa hoje, vamos recapitular o que aprendemos. O WebKit para SwiftUI é uma API simples, mas poderosa, que permite a integração perfeita de conteúdo online ao seu app. Ele permite carregar e personalizar a aparência do conteúdo online. O URLSchemeHandling permite gerenciar recursos online locais de forma eficaz. Um conjunto de modificadores, como webViewScrollPosition e findNavigator, permite personalizar a experiência do usuário do seu WebView. Esses são apenas alguns dos recursos do WebKit para SwiftUI. Recomendo consultar a documentação para desenvolvedores para obter informações mais detalhadas. E como se trata da SwiftUI, seu conteúdo online ficará incrível em todas as plataformas.

Se você já usa as APIs UIKit ou AppKit do WebKit em um app da SwiftUI ou vai criar um app do zero, agora é um ótimo momento para migrar para a nova API. Confira também as outras novidades no Swift e na SwiftUI, como a nova API Observations. Dê seu feedback depois de testar a nova API e diga as alterações ou recursos que acha que estão faltando. Junte-se a nós nesta nova era fantástica do WebKit.