Se usó la API de Cloud Translation para traducir esta página.

Comienza a usar los paquetes web

Comparte sitios web como un solo archivo por Bluetooth y ejecútalos sin conexión en el contexto de tu origen

Ysuke Utsunomiya

Twitter Página principal

Kenji Baheux

Agrupar un sitio web completo como un solo archivo y permitir que se pueda compartir abre nuevos casos de uso para la Web. Imagina un mundo donde puedas:

Crea tu propio contenido y distribúyelo de muchas maneras sin limitarte a la red.
Comparte una aplicación web o contenido web con tus amigos a través de Bluetooth o Wi-Fi directo.
Lleva tu sitio a través de una unidad USB o incluso alójalo en tu propia red local

La API de Web Bundles es una propuesta de vanguardia que te permite hacer todo esto.

Compatibilidad del navegador

Actualmente, la API de Web Bundles solo es compatible con los navegadores basados en Chromium detrás de una marca experimental.

Presentamos la API de Web Bundles

Un paquete web es un formato de archivo para encapsular uno o más recursos HTTP en un solo archivo. Puede incluir uno o más archivos HTML, JavaScript, imágenes u hojas de estilo.

Los paquetes web, más conocidos como intercambios HTTP agrupados, forman parte de la propuesta de empaquetado web.

Una figura que muestra que un paquete web es una colección de recursos web. — Cómo funcionan los paquetes web

Los recursos HTTP de un paquete web se indexan mediante URLs de solicitud y, de manera opcional, pueden incluir firmas que avalan los recursos. Las firmas permiten que los navegadores entiendan y verifiquen de dónde proviene cada recurso y tratan a cada uno como si provinieran de su verdadero origen. Esto es similar a cómo se manejan los intercambios HTTP firmados, una función para firmar un solo recurso HTTP.

En este artículo, se explica qué es un paquete web y cómo usarlo.

Explicación sobre los paquetes web

Para ser precisos, un paquete web es un archivo CBOR con una extensión .wbn (por convención) que empaqueta recursos HTTP en un formato binario y se entrega con el tipo de MIME application/webbundle. Puedes obtener más información al respecto en la sección Estructura de nivel superior del borrador de especificaciones.

Los paquetes web tienen varias funciones únicas:

Encapsula varias páginas, lo que permite agrupar un sitio web completo en un solo archivo.
Habilita JavaScript ejecutable, a diferencia de MHTML
Usa variantes HTTP para realizar la negociación de contenido, lo que permite la internacionalización con el encabezado Accept-Language, incluso si el paquete se usa sin conexión.
Se cargan en el contexto de su origen cuando el publicador lo firma de manera criptográfica
Se carga casi al instante cuando se entrega de forma local

Estas funciones abren múltiples escenarios. Una situación común es la capacidad de compilar una app web independiente que sea fácil de compartir y se pueda usar sin conexión a Internet. Por ejemplo, supongamos que estás en un avión de Tokio a San Francisco con tu amigo. No te gusta el entretenimiento a bordo. Tu amigo está jugando un interesante juego web llamado PROXX y te cuenta que descargó el juego como un paquete web antes de abordar el avión. Funciona a la perfección sin conexión. Antes de los paquetes web, la historia terminaría allí y tendrías que turnarte para jugar en el dispositivo de tu amigo o buscar otra cosa para pasar el tiempo. Pero con Web Bundles, ahora puedes hacer lo siguiente:

Pídele a tu amigo que comparta el archivo .wbn del juego. Por ejemplo, el archivo se podría compartir fácilmente entre pares mediante una app de uso compartido de archivos.
Abre el archivo .wbn en un navegador que admita paquetes web.
Comienza a jugar en tu propio dispositivo y trata de superar la puntuación más alta de tu amigo.

A continuación, te mostramos un video que explica esta situación.

Como puedes ver, un paquete web puede contener todos los recursos, lo que hace que funcione sin conexión y se cargue al instante.

Cómo crear paquetes web

Actualmente, la CLI de go/bundle es la forma más fácil de agrupar un sitio web. go/bundle es una implementación de referencia de la especificación de paquetes web compilada en Go.

Instala Go.

Instala go/bundle.

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

Clona el repositorio preact-todomvc y compila la aplicación web para prepararte para empaquetar los recursos.
```
git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build
```

Usa el comando gen-bundle para compilar un archivo .wbn.

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

¡Felicitaciones! TodoMVC ahora es un paquete web.

Existen otras opciones para crear paquetes, y pronto se agregarán más. La CLI de go/bundle te permite compilar un paquete web mediante un archivo HAR o una lista personalizada de URLs de recursos. Visita el repositorio de GitHub para obtener más información sobre go/bundle. También puedes probar el módulo experimental Node.js para agrupar, wbn. Ten en cuenta que wbn aún está en las primeras etapas de desarrollo.

Diviértete con Web Bundles

Para probar un paquete web, haz lo siguiente:

Ve a about://version para ver qué versión de Chrome ejecutas. Si ejecutas la versión 80 o posterior, omite el siguiente paso.
Descarga Chrome Canary si no ejecutas Chrome 80 o una versión posterior.
Abre about://flags/#web-bundles.
Establece la marca de Paquetes web en Habilitado.

Habilitación de paquetes web en about://flags
Reinicia Chrome.
Arrastra y suelta el archivo todomvc.wbn en Chrome si usas una computadora de escritorio o presiónalo en una app de administración de archivos si usas Android.

Todo funciona mágicamente.

La implementación de Preact de TodoMVC que funciona sin conexión como un paquete web

También puedes probar otros paquetes web de muestra:

web.dev.wbn es un resumen de todo el sitio web.dev desde el 15 de octubre de 2019.
proxx.wbn: PROXX es un clon de Buscaminas que funciona sin conexión.
squoosh.wbn: Squoosh es una herramienta de optimización de imágenes conveniente y rápida que te permite realizar comparaciones en paralelo de varios formatos de compresión de imágenes, y admite conversiones de cambio de tamaño y formato.

Enviar comentarios

La implementación de la API de paquete web en Chrome es experimental y está incompleta. No todo funciona y es posible que falle o falle. Por eso está detrás de una marca experimental. Sin embargo, la API está lo suficientemente lista para que la explores en Chrome. Los comentarios de los desarrolladores web son fundamentales para el diseño de nuevas APIs, así que pruébalos y cuéntales tu opinión a las personas que trabajan con paquetes web.

Envía comentarios generales a webpackage-dev@chromium.org.
Si tienes comentarios sobre las especificaciones, visita https://github.com/WICG/webpackage/issues/new para informar un nuevo problema de especificaciones o envía un correo electrónico a wpack@ietf.org.
Si detectas algún problema en el comportamiento de Chrome, visita https://crbug.com/new para informar un error de Chromium.
Cualquier contribución a la discusión de las especificaciones y a las herramientas también es más que bienvenido. Visita el repositorio de especificaciones para participar.

Agradecimientos

Queremos dar un agradecimiento especial al maravilloso equipo de ingeniería de Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda y Jeffrey Yasskin, quienes trabajaron arduamente en contribuir a la especificación, compilar la función en Canary y revisar este artículo. Durante el proceso de estandarización, Dan York ayudó en el debate sobre IETF, y Dave Cramer fue un gran recurso en lo que los editores realmente necesitan. También queremos agradecer a Jason Miller por su increíble preact-todomvc y su inquieto esfuerzo por mejorar el framework.