Beginnen Sie mit Web Bundles

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

11. November 2019

Das Gruppieren einer gesamten Website als einzelne Datei und deren gemeinsame Nutzung eröffnet neue Anwendungsfälle für das Web. Stellen Sie sich eine Welt vor, in der Sie:

• Cree su propio Inhalt y distribúyalo en todo tipo de formas sin estar restringido a la red
• Teilen Sie eine Webanwendung oder einen Webinhaltsausschnitt mit Ihren Freunden über Bluetooth oder Wi-Fi Direct
• Bringen Sie Ihre Site auf Ihren eigenen USB-Stick oder hosten Sie sie sogar in Ihrem eigenen lokalen Netzwerk

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

Compatibilidad del Browser

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

Einführung in die Web Bundles API

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.

Webpakete, formeller bekannt als HTTP-Austausch enthaltensind Teil der Webverpackung
Vorschlag.

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 Signierter HTTP-Austausch, eine Funktion zum Signieren einer einzelnen HTTP-Ressource.

In diesem Artikel wird erläutert, was ein Web Bundle ist und wie es verwendet wird.

Erläuterung der Webpakete

Um genau zu sein, ist ein Web Bundle ein CBOR-Datei mit einer .wbn Erweiterung (gemäß Konvention), die HTTP-Ressourcen in einem Binärformat verpackt und mit dem bereitgestellt wird Anwendung / Webbundle Mimica-Typ. Mehr dazu lesen Sie in der Struktur der obersten Ebene
Entwurf eines Spezifikationsabschnitts.

Web-Bundles bieten mehrere einzigartige Funktionen:

• Verkapselt mehrere Seiten, sodass eine gesamte Website in einer einzigen Datei gebündelt werden kann
• Aktivieren Sie ausführbares JavaScript im Gegensatz zu MHTML
• Anwendungen HTTP-Varianten Inhalte zu verhandeln, die eine Internationalisierung mit dem ermöglichen Akzeptiere-Sprache
  Header, auch wenn das Paket offline verwendet wird
• Es wird im Kontext seiner Herkunft geladen, wenn es von seinem Herausgeber kryptografisch signiert wird.
• Wird fast sofort aufgeladen, wenn es vor Ort serviert wird

Estas características abren múltiples escenarios. Un escenario común es la capacidad de crear una aplicación web autónoma que Sein 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 PROXXund sagt dir, dass er das Spiel als Webpack heruntergeladen hat, bevor er in das Flugzeug gestiegen ist. Es funktioniert perfekt offline. Vor Web Bundles endete die Geschichte dort und Sie mussten das Spiel abwechselnd auf dem Gerät Ihres Freundes spielen oder etwas anderes finden, um sich die Zeit zu vertreiben. Mit Web Bundles können Sie jetzt Folgendes tun:

1. Bitten Sie Ihren Freund, das zu teilen .wbn Spieledatei. Beispielsweise kann die Datei mithilfe einer Dateifreigabeanwendung problemlos Peer-to-Peer freigegeben werden.
2. Öffne das .wbn Datei in einem Browser, der Web Bundles unterstützt.
3. Spielen Sie das Spiel auf Ihrem eigenen Gerät und versuchen Sie, den Highscore Ihres Freundes zu übertreffen.

Hier ist ein Video, das dieses Szenario erklärt.

Wie Sie sehen können, kann ein Web Bundle alle Ressourcen enthalten, sodass es offline funktioniert und sofort geladen wird.

Erstellung von Webpaketen

das gehen / bündeln CLI ist derzeit der einfachste Weg, eine Website zu bündeln. gehen / bündeln ist eine Referenzimplementierung der integrierten Web Bundles-Spezifikation Gehen.

1. Installieren Sie Go.

2. Auf dem PC installieren gehen / bündeln.

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

3. Klonen Sie die preact-todomvc Repository und erstellen Sie Ihre Webanwendung, um die Bündelung Ihrer Ressourcen vorzubereiten.

   git clone https://github.com/developit/preact-todomvc.git
   CD preact-todomvc
   npm ich
   npm run build

4. Verwenden Sie die Gen-Bundle Befehl zum Erstellen eines .wbn Verfahren.

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

Herzliche Glückwünsche! TodoMVC ist jetzt ein Webpaket.

Es gibt andere Optionen für die Gruppierung und weitere werden folgen. das gehen / bündeln Mit CLI können Sie ein Web Bundle mithilfe einer HAR-Datei oder einer benutzerdefinierten Liste von Ressourcen-URLs erstellen. Besuche den GitHub-Repository mehr darüber lernen gehen / bündeln. Sie können auch das experimentelle Node.js-Modul zum Verpacken ausprobieren.
wbn. Beachten Sie, dass wbn es befindet sich noch in einem frühen Entwicklungsstadium.

Spielen mit Web Bundles

So testen Sie ein Webpaket:

1. Gehen chrome://version um zu sehen, welche Version von Chrome Sie ausführen. Wenn Sie Version 80 oder höher ausführen, überspringen Sie den nächsten Schritt.

2. Herunterladen Chrome Canary Wenn Sie Chrome 80 oder höher nicht ausführen.

3. Geöffnet chrome://flags/#web-bundles.

4. Wähle aus Webpakete Flagge a aktiviert.

   

5. Starten Sie Chrome neu.

6. Ziehen Sie die todomvc.wbn Datei in Chrome, wenn es auf dem Desktop ist, oder tippen Sie in einer Dateimanager-App darauf, wenn es auf Android ist.

Alles funktioniert magisch.

Sie können auch andere Beispiel-Webpakete ausprobieren:

• web.dev.wbn ist eine Momentaufnahme der gesamten website.dev vom 15. Oktober 2019.
• proxx.wbn: PROXX ist ein Minesweeper-Klon, der offline funktioniert.
• squoosh.wbn:
  Squoosh ist ein praktisches und schnelles Tool zur Bildoptimierung, mit dem Sie verschiedene Bildkomprimierungsformate nebeneinander vergleichen und die Größenänderung und Formatkonvertierung unterstützen können.

Kommentar schreiben

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 Personen que trabajan en Web Bundles lo que piensa.

Vielen Dank

Wir möchten dem wunderbaren Chrome-Engineering-Team gratulieren.
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda y Jeffrey Yasskin Wer hat hart gearbeitet, um zur Spezifikation beizutragen, die Funktion in Canary aufzubauen und diesen Artikel zu lesen? Während des Standardisierungsprozesses Dan York hat geholfen, die IETF-Diskussion zu navigieren und auch Dave Cramer war eine großartige Ressource für das, was Verlage wirklich brauchen. Wir möchten uns auch bedanken Jason Miller für das erstaunliche preact-todomvc und ihre unermüdlichen Bemühungen, die Struktur zu verbessern.