Compartilhe sites como um único arquivo por Bluetooth e execute-os off-line no contexto da sua origem
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.
![Uma figura mostrando que um Web Bundle é uma coleção de recursos da Web.](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=5&hl=pt)
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:
- 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. - Abra o arquivo
.wbn
em um navegador compatível com Web Bundles. - 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.
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.
- Instale o Go.
Instale
go/bundle
.go get -u github.com/WICG/webpackage/go/bundle/cmd/...
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
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:
- 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. - Baixe o Chrome Canary se você não tiver o Chrome 80 ou mais tarde.
- Abra
about://flags/#web-bundles
. Defina a flag Web Bundles como Ativado.
Ativando Web Bundles em about://flags
Reinicie o Chrome.
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.
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.
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 webpackage-dev@chromium.org.
- 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 wpack@ietf.org.
- 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.