Comparte sitios web como un solo archivo por Bluetooth y ejecútalos sin conexión en el contexto de tu origen
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.
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.
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.
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.