Começar a usar os Web Bundles

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

Yusuke Utsunomiya

Twitter Página inicial

Kenji Baheux

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

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

• Criar seu próprio conteúdo e distribuí-lo de todas as maneiras sem ficar restrito na rede
• Compartilhe um app da Web ou conteúdo da Web com seus amigos por Bluetooth ou Wi-Fi Direct
• Mantenha seu site em seu próprio USB ou até mesmo hospede-o em sua própria rede local

A API Web Bundles é uma proposta inovadora que permite fazer tudo isso.

Compatibilidade com navegadores

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

Apresentação da API Web Bundles

Um pacote da Web é um formato de arquivo para encapsular um ou mais recursos HTTP em um único arquivo. Ela pode incluir um ou mais arquivos HTML, JavaScript, imagens ou folhas de estilo.

Os Web Bundles, mais formalmente conhecidos como Bundled HTTP Exchanges, fazem parte da proposta Web Packaging.

Como os pacotes da Web funcionam

Os recursos HTTP em um Web Bundle são indexados por URLs de solicitação e, opcionalmente, podem vir com assinaturas que atestam os recursos. As assinaturas permitem que os navegadores entendam e verifiquem de onde cada recurso veio e tratam cada um como vindo de sua verdadeira origem. Isso é semelhante à maneira como as Signed HTTP Exchanges, um recurso para assinar um único recurso HTTP, são tratadas.

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

Explicação sobre Web Bundles

Mais precisamente, um pacote da Web é um arquivo CBOR com uma extensão .wbn (por convenção) que empacota recursos HTTP em um formato binário e é disponibilizado com o tipo MIME application/webbundle. Leia mais sobre isso na seção Estrutura de nível superior do rascunho da especificação.

Os pacotes da Web têm vários recursos exclusivos:

• Encapsula várias páginas, permitindo o agrupamento de um site completo em um único arquivo.
• Ativa JavaScript executável, diferente do MHTML
• Usa variantes HTTP para fazer negociação de conteúdo, o que permite a internacionalização com o cabeçalho Accept-Language, mesmo que o pacote seja usado off-line
• Carregar no contexto de origem com a assinatura criptográfica do editor
• Carrega quase instantaneamente quando veiculado localmente

Esses recursos abrem vários cenários. Um cenário comum é a capacidade de criar um app da Web independente, fácil de compartilhar e utilizável sem uma conexão de Internet. Por exemplo, digamos que você esteja em um avião de Tóquio para São Francisco com um amigo. Você não gosta do entretenimento a bordo. Seu amigo está jogando um jogo da Web interessante chamado PROXX e diz que fez o download do jogo como um Web Bundle antes de embarcar no avião. Funciona perfeitamente off-line. Antes dos Web Bundles, a história terminava aqui, e você teria que revezar o jogo no dispositivo do seu amigo ou encontrar outra coisa para passar o tempo. Com os Web Bundles, veja o que agora você pode fazer:

1. Peça para a pessoa compartilhar o arquivo .wbn do jogo. Por exemplo, o arquivo pode ser facilmente compartilhado ponto a ponto usando um app de compartilhamento de arquivos.
2. Abra o arquivo .wbn em um navegador compatível com Web Bundles.
3. Comece a jogar no seu dispositivo e tente superar a pontuação do seu amigo.

Veja um vídeo que explica esse cenário.

Como você pode notar, um Web Bundle pode conter todos os recursos, fazendo com que eles funcionem off-line e sejam carregados instantaneamente.

Observação:atualmente, o Chrome 80 é compatível apenas com pacotes não assinados (ou seja, pacotes da Web sem assinaturas de origem). O empacotamento de PROXX sem assinaturas não funciona bem devido a problemas de origem cruzada do web worker. O Chrome está trabalhando para corrigir esse problema. Enquanto isso, consulte Como lidar com problemas comuns em pacotes não assinados para saber como evitar problemas de origem cruzada.

Como criar pacotes da Web

Atualmente, a CLI go/bundle é a forma mais fácil de agrupar um site. go/bundle é uma implementação de referência da especificação de pacotes da Web criada 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 para 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 pacote da Web.

Há outras opções de agrupamento, e outras serão lançadas em breve. A CLI go/bundle permite criar um pacote da Web usando um arquivo HAR ou uma lista personalizada de URLs de recursos. Acesse o repositório do GitHub para saber mais sobre go/bundle. Também é possível testar o módulo experimental Node.js para agrupar, wbn. Observe que o wbn ainda está nos estágios iniciais de desenvolvimento.

Como usar os Web Bundles

Para testar um Web Bundle, siga estas etapas:

1. Acesse about://version para saber qual versão do Chrome você está usando. Se você estiver executando a versão 80 ou mais recente, pule a próxima etapa.
2. Faça o download do Chrome Canary se você não estiver executando o Chrome 80 ou posterior.
3. Abra o about://flags/#web-bundles.

4. Defina a sinalização Web Bundles como Enabled.

   

   Como ativar pacotes da Web em about://flags

5. Reinicie o Chrome.

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

Tudo funciona como em um passe de mágica.

Implementação do Preact do TodoMVC funcionando off-line como um pacote da Web

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

• O web.dev.wbn é um resumo de todo o site web.dev, a partir de 15 de outubro de 2019.
• proxx.wbn: o PROXX é um clone de campo minado que funciona off-line.
• squoosh.wbn: o Squoosh é uma ferramenta de otimização de imagem conveniente e rápida que permite fazer comparações lado a lado de vários formatos de compactação de imagem, com suporte para redimensionamento e conversões de formatação.

Observação:no momento, só é possível navegar para um pacote da Web 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 há uma sinalização experimental. Mas a API está pronta o suficiente para ser explorada no Chrome. O feedback dos desenvolvedores da Web é crucial para o design de novas APIs. Portanto, faça um teste e diga o que você acha às pessoas que trabalham nos pacotes da Web.

• Envie feedback geral para [e-mail].
• Se você tiver feedback sobre a especificação, 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 algum problema no comportamento do Chrome, acesse https://crbug.com/new para informar um bug do Chromium.
• Contribuições para a discussão e as ferramentas de especificação também são muito bem-vindas. Acesse o repositório de especificações para participar.

Agradecimentos

Queremos agradecer à maravilhosa equipe de engenharia do Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda e Jeffrey Yasskin, que trabalharam duro contribuindo para a especificação, criando o recurso no Canary e revisando este artigo. Durante o processo de padronização, Dan York ajudou a lidar com a discussão da IETF, e também Dave Cramer foi um ótimo recurso sobre o que os editores realmente precisam. Também gostaríamos de agradecer a Jason Miller pelo incrível preact-todomvc e seu esforço inquieto em melhorar a estrutura.