Empiece a utilizar Web Bundles

Comparta sitios web como un solo archivo a través de Bluetooth y ejecútelos sin conexión en el contexto de su origen

11 de noviembre de 2019

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

• Cree su propio contenido y distribúyalo en todo tipo de formas sin estar restringido a la red
• Comparta una aplicación web o un fragmento de contenido web con sus amigos a través de Bluetooth o Wi-Fi Direct
• Lleve su sitio en su propio USB o incluso alójelo en su propia red local

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

Compatibilidad del navegador

Actualmente, la API de Web Bundles solo es compatible con navegadores basados ​​en Chromium con una marca experimental.

Presentamos la API de Web Bundles

Un Web Bundle 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, archivos JavaScript, imágenes u hojas de estilo.

Paquetes web, más formalmente conocidos como Intercambios HTTP incluidos, son parte de la Embalaje Web
propuesta.

Los recursos HTTP en un Web Bundle se indexan por URL de solicitud y, opcionalmente, pueden venir con firmas que avalan los recursos. Las firmas permiten que los navegadores comprendan y verifiquen el origen de cada recurso y tratan a cada uno como si procediera de su verdadero origen. Esto es similar a como Intercambios HTTP firmados, una función para firmar un solo recurso HTTP.

Este artículo le explica qué es un Web Bundle y cómo utilizarlo.

Explicación de paquetes web

Para ser precisos, un Web Bundle es un Archivo CBOR con un .wbn extensión (por convención) que empaqueta los recursos HTTP en un formato binario, y se sirve con la application/webbundle Tipo de Mimica. Puede leer más sobre esto en el Estructura de nivel superior
sección del borrador de especificaciones.

Los Web Bundles tienen múltiples características únicas:

• Encapsula varias páginas, lo que permite agrupar un sitio web completo en un solo archivo
• Habilita JavaScript ejecutable, a diferencia de MHTML
• Usos Variantes HTTP para hacer negociación de contenidos, lo que posibilita la internacionalización con el Accept-Language
  encabezado incluso si el paquete se usa sin conexión
• Se carga en el contexto de su origen cuando está firmado criptográficamente por su editor.
• Se carga casi instantáneamente cuando se sirve localmente

Estas características abren múltiples escenarios. Un escenario común es la capacidad de crear una aplicación web autónoma que sea fácil de compartir y utilizable sin conexión a Internet. Por ejemplo, digamos que está en un avión de Tokio a San Francisco con su amigo. No te gusta el entretenimiento a bordo. Tu amigo está jugando a un interesante juego web llamado PROXXy te dice que descargó el juego como un paquete web antes de abordar el avión. Funciona perfectamente sin conexión. Antes de Web Bundles, la historia terminaba allí y tendrías que turnar para jugar el juego en el dispositivo de tu amigo o encontrar algo más para pasar el tiempo. Pero con Web Bundles, esto es lo que puede hacer ahora:

1. Pídale a su amigo que comparta el .wbn archivo del juego. Por ejemplo, el archivo podría compartirse fácilmente de igual a igual mediante una aplicación para compartir archivos.
2. Abre el .wbn archivo en un navegador compatible con Web Bundles.
3. Empiece a jugar el juego en su propio dispositivo e intente superar la puntuación más alta de su amigo.

Aquí hay un video que explica este escenario.

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

Creación de paquetes web

los go/bundle CLI es actualmente la forma más fácil de agrupar un sitio web. go/bundle es una implementación de referencia de la especificación Web Bundles incorporada Vamos.

1. Instalar Go.

2. Instalar en pc go/bundle.

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

3. Clonar el preact-todomvc repositorio y cree la aplicación web para prepararse para agrupar los recursos.

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

4. Utilizar el gen-bundle comando para construir un .wbn expediente.

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

¡Felicidades! TodoMVC ahora es un paquete web.

Hay otras opciones para la agrupación y vendrán más. los go/bundle CLI le permite crear un Web Bundle utilizando un archivo HAR o una lista personalizada de URL de recursos. Visita el Repositorio de GitHub para aprender más sobre go/bundle. También puede probar el módulo experimental Node.js para empaquetar,
wbn. Tenga en cuenta que wbn se encuentra todavía en las primeras etapas de desarrollo.

Jugando con Web Bundles

Para probar un paquete web:

1. Ir chrome://version para ver qué versión de Chrome está ejecutando. Si está ejecutando la versión 80 o posterior, omita el siguiente paso.

2. Descargar Chrome Canary si no está ejecutando Chrome 80 o posterior.

3. Abierto chrome://flags/#web-bundles.

4. Selecciona el Paquetes web bandera a Habilitado.

   

5. Reinicia Chrome.

6. Arrastra y suelta el todomvc.wbn archivo en Chrome si está en el escritorio, o tóquelo en una aplicación de administración de archivos si está en Android.

Todo funciona mágicamente.

También puede probar otros paquetes web de muestra:

• web.dev.wbn es una instantánea de todo el sitio web.dev, al 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 le permite hacer comparaciones en paralelo de varios formatos de compresión de imágenes, con soporte para cambio de tamaño y conversiones de formato.

Enviar comentarios

La implementación de la API de Web Bundle en Chrome es experimental e incompleta. No todo funciona y puede fallar o bloquearse. Por eso está detrás de una bandera experimental. Pero la API está lo suficientemente lista para que la explore en Chrome. Los comentarios de los desarrolladores web son cruciales para el diseño de nuevas API, así que pruébelo y dígale a las personas que trabajan en Web Bundles lo que piensa.

Agradecimientos

Nos gustaría felicitar al maravilloso equipo de ingenieros de Chrome,
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda y Jeffrey Yasskin que trabajó duro contribuyendo a la especificación, construyendo la función en Canary y revisando este artículo. Durante el proceso de estandarización Dan York ha ayudado a navegar la discusión de IETF y también Dave Cramer ha sido un gran recurso sobre lo que realmente necesitan los editores. También queremos agradecer Jason Miller por el asombroso preact-todomvc y su incansable esfuerzo por mejorar la estructura.