Começar a usar os Web Bundles

Compartilhe sites como um único arquivo por Bluetooth e execute-os off-line no contexto da sua origem

Yusuke Utsunomiya

Kenji Baheux

Aviso:a implementação experimental da navegação para pacotes da Web era removido do Chrome em fevereiro de 2023.

Agrupar um site completo em um único arquivo e torná-lo compartilhável abre novos casos de uso para a Web. Imagine um mundo em que você possa:

• Crie seu próprio conteúdo e distribua-o de todas as formas possíveis sem ser restritas à rede,
• Compartilhe um app ou conteúdo da Web com seus amigos por Bluetooth ou Wi-Fi Direct.
• Leve o site no seu USB ou hospede-o na sua própria rede local

A API Web Bundles é uma proposta de última geração que permite fazer tudo isso.

Compatibilidade com navegadores

No momento, a API Web Bundles é compatível apenas com navegadores baseados no Chromium e uma sinalização experimental.

Apresentação da API Web Bundles

Um Web Bundle é um formato de arquivo que encapsula um ou mais recursos HTTP em um um único arquivo. Ele pode incluir um ou mais arquivos HTML, JavaScript, imagens ou folhas de estilo.

Web Bundles, mais conhecidos formalmente como Bundled HTTP Exchanges, fazem parte do pacote da Web proposta.

Como os pacotes da Web funcionam

Os recursos HTTP em um Web Bundle são indexados por URLs de solicitação e podem, opcionalmente, vêm com assinaturas que atestam os recursos. As assinaturas permitem que os navegadores entender e verificar de onde veio cada recurso e tratar cada um como a partir de sua verdadeira origem. Esse processo é semelhante à forma como as Signed HTTP Exchanges, um recurso para assinar um único recurso HTTP, são tratados.

Este artigo explica o que é um Web Bundle e como usar um.

Explicação dos Web Bundles

Para ser mais preciso, um Web Bundle é um arquivo CBOR com uma extensão .wbn (por convenção) que empacota os recursos HTTP em um formato binário e é veiculado com o application/webbundle MIME não é válido. Leia mais sobre isso em Estrutura de nível superior do rascunho de especificações.

Os Web Bundles têm vários recursos exclusivos:

• Encapsula várias páginas, permitindo o agrupamento de um site inteiro em um único arquivo
• Ativa JavaScript executável, ao contrário do MHTML
• Usa variantes HTTP para fazer a negociação de conteúdo, o que permite a internacionalização com o Accept-Language cabeçalho, mesmo se o pacote for usado off-line
• Carrega no contexto de origem quando assinado criptograficamente pelo editor
• Carrega quase instantaneamente quando exibido no local

Esses recursos abrem vários cenários. Um cenário comum é a capacidade de criar um aplicativo da web independente que seja fácil de compartilhar e usar sem uma conexão com a Internet. Por exemplo, digamos que você esteja em um avião de Tóquio a São Francisco com seu amigo. Você não gosta do entretenimento a bordo. Seu amigo está jogando um jogo interessante jogo da Web chamado PROXX e informa que ele fez o download do jogo como um Faça seu pacote antes de embarcar no avião. Ele funciona off-line perfeitamente. Antes da Web Pacotes, a história terminaria aí, e você teria que se revezar jogar no dispositivo do seu amigo ou encontrar outra coisa para passar a tempo de resposta. No entanto, com os Web Bundles, veja o que agora você pode fazer:

1. Peça para seu amigo compartilhar o arquivo .wbn do jogo. Por exemplo, o arquivo poderia ser facilmente compartilhado ponto a ponto usando um aplicativo de compartilhamento de arquivos.
2. Abra o arquivo .wbn em um navegador compatível com Web Bundles.
3. Jogue no seu dispositivo e tente superar o som do seu amigo de qualidade.

Veja um vídeo que explica isso.

Como você pode ver, um Web Bundle pode conter todos os recursos, fazendo com que funcione off-line e carregar instantaneamente.

Observação:no momento, o Chrome 80 só é compatível com pacotes não assinados (ou seja, pacotes da Web sem assinaturas de origem). O agrupamento do PROXX sem assinaturas não funciona devido a problemas de origem cruzada do worker da Web. O Chrome está trabalhando para corrigir isso. Em Enquanto isso, confira Como lidar com problemas comuns em sistemas não assinados Pacotes para saber como evitar problemas de origem cruzada.

Como criar pacotes da Web

Atualmente, a CLI go/bundle é a maneira mais fácil de agrupar um site. go/bundle é uma implementação de referência dos Web Bundles. padrão integrada em Go.

1. Instale o Go.

2. Instale go/bundle.

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. Clone o repositório preact-todomvc e crie o app da Web e se preparar para agrupar os recursos.

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. Use o comando gen-bundle para criar um arquivo .wbn.

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

Parabéns! O TodoMVC agora é um Web Bundle.

Há outras opções de pacotes e mais em breve. A CLI go/bundle permite criar um Web Bundle usando um arquivo HAR ou uma lista personalizada de URLs. Acesse o repositório do GitHub (link em inglês) para saber mais sobre go/bundle. Você também pode testar o módulo Node.js experimental para agrupamento, wbn Observe que wbn ainda está nos estágios iniciais do no desenvolvimento de software.

Brincando com pacotes da Web

Para testar um Web Bundle, faça o seguinte:

1. Acesse about://version para conferir qual versão do Chrome você está usando. Se você usa a versão 80 ou posterior, pule a próxima etapa.
2. Baixe o Chrome Canary se você não tiver o Chrome 80 ou mais tarde.
3. Abra about://flags/#web-bundles.

4. Defina a flag Web Bundles como Ativado.

   

   Ativando Web Bundles em about://flags

5. Reinicie o Chrome.

6. Se você estiver no computador, arraste e solte o arquivo todomvc.wbn no Chrome ou toque nele em um arquivo de gerenciamento de registros se você estiver usando o Android.

Tudo funciona como mágica.

A implementação Preact do TodoMVC funciona off-line como um pacote da Web

Você também pode testar outros exemplos de pacotes da Web:

• web.dev.wbn é um de todo o site web.dev, em 15 de outubro de 2019.
• proxx.wbn: O PROXX é um clone do Campo Minado que funciona off-line.
• squoosh.wbn: O Squoosh é uma ferramenta de otimização de imagens rápida e conveniente que permite que você faça comparações lado a lado de vários formatos de compactação de imagem, com suporte para o redimensionamento e as conversões de formatação.

.

Observação:no momento, só é possível navegar para um Web Bundle armazenado em um arquivo local, mas essa é apenas uma restrição temporária.

Enviar feedback

A implementação da API Web Bundle no Chrome é experimental e está incompleta. Nem tudo está funcionando e pode falhar ou falhar. É por isso que está por trás de uma sinalização experimental. Mas a API está pronta o suficiente para você explorá-la no Chrome. O feedback de desenvolvedores Web é crucial para o design novas APIs, então experimente e conte para as pessoas que trabalham com pacotes da Web o que você acha.

• Enviar feedback geral para [e-mail].
• Se você tiver comentários sobre as especificações, acesse https://github.com/WICG/webpackage/issues/new para informar um novo problema de especificação, ou envie um e-mail para [e-mail].
• Se você encontrar problemas de comportamento no Chrome, acesse https://crbug.com/new para registrar um bug do Chromium.
• Quaisquer contribuições para a discussão e as ferramentas sobre especificações também vão mais do que bem-vindos. Acesse o repositório de especificações (em inglês) para participar.

Agradecimentos

Gostaríamos de agradecer à maravilhosa equipe de engenharia do Chrome. Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda e Jeffrey Yasskin, que trabalharam duro para contribuir específica, criar o recurso no Canary e revisar este artigo. Durante o de padronização dos dados, Dan York ajudou a lidar discussão sobre o IETF e Dave Cramer foi um ótimo recurso sobre o que os editores realmente precisam. Também queremos agradecer a Jason Miller pelo incrível pré-todomvc e sua esforço inquieto para melhorar a estrutura.