Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit Web Bundles

Websites als einzelne Datei über Bluetooth freigeben und offline im Kontext Ihres Ursprungsservers ausführen

Yusuke Utsunomiya

Twitter Startseite

Kenji Baheux

Wenn Sie eine vollständige Website zu einer einzigen Datei bündeln und diese teilen können, ergeben sich neue Anwendungsfälle für das Web. Stell dir eine Welt vor, in der du:

Erstellen Sie eigene Inhalte und verteilen Sie diese auf vielfältige Weise, ohne im Netzwerk eingeschränkt zu sein.
Web-App oder Webinhalte über Bluetooth oder Wi-Fi Direct mit Freunden teilen
Speichern Sie Ihre Website auf Ihrem eigenen USB-Stick oder hosten Sie sie sogar in Ihrem eigenen lokalen Netzwerk.

Mit der Web Bundles API ist all dies möglich.

Browserkompatibilität

Die Web Bundles API wird derzeit nur in Chromium-basierten Browsern unterstützt, für die ein experimentelles Flag verfügbar ist.

Einführung in die Web Bundles API

Ein Web Bundle ist ein Dateiformat zum Kapseln einer oder mehrerer HTTP-Ressourcen in einer einzelnen Datei. Sie kann eine oder mehrere HTML-Dateien, JavaScript-Dateien, Bilder oder Stylesheets enthalten.

Web Bundles, besser bekannt als Bundled HTTP Exchanges, sind Teil des Web Packaging-Angebots.

Abbildung, die zeigt, dass ein Web Bundle eine Sammlung von Webressourcen ist — Funktionsweise von Web Bundles

HTTP-Ressourcen in einem Web Bundle werden nach Anfrage-URLs indexiert und können optional mit Signaturen versehen werden, die für die Ressourcen bürgen. Mithilfe von Signaturen können Browser erkennen und prüfen, woher die einzelnen Ressourcen stammen. Dabei wird jede Ressource so behandelt, als stammte sie von ihrem eigentlichen Ursprung. Dies ähnelt der Handhabung von Signed HTTP Exchanges, einer Funktion zum Signieren einer einzelnen HTTP-Ressource.

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

Web Bundles erklären

Genauer gesagt ist ein Web Bundle eine CBOR-Datei mit der Erweiterung .wbn (standardmäßig), die HTTP-Ressourcen in ein Binärformat verpackt und mit dem MIME-Typ application/webbundle bereitgestellt wird. Weitere Informationen dazu finden Sie im Abschnitt Oberste Struktur des Spezifikationsentwurfs.

Web Bundles haben mehrere besondere Funktionen:

Fasst mehrere Seiten zusammen, sodass eine vollständige Website in einer einzigen Datei gebündelt werden kann
Aktiviert im Gegensatz zu MHTML ausführbares JavaScript
Verwendet HTTP-Varianten für die Contentaushandlung. Dadurch wird die Internationalisierung mit dem Accept-Language-Header ermöglicht, auch wenn das Bundle offline verwendet wird.
Wird im Kontext des Ursprungs geladen, wenn der Publisher kryptografisch signiert hat
Bei lokaler Bereitstellung nahezu sofort geladen

Diese Funktionen lassen mehrere Szenarien zu. Ein gängiges Szenario ist die Möglichkeit, eine eigenständige Webanwendung zu erstellen, die ohne Internetverbindung einfach geteilt und verwendet werden kann. Angenommen, Sie sind mit einem Freund im Flugzeug von Tokio nach San Francisco. Die Unterhaltung während des Flugs gefällt dir nicht. Ihr Freund spielt ein interessantes Webspiel namens PROXX und teilt Ihnen mit, dass er das Spiel vor dem Einsteigen als Web Bundle heruntergeladen hat. Sie funktioniert auch offline problemlos. Bevor Web Bundles endete, musste die Story entweder abwechselnd auf dem Gerät deines Freundes gespielt werden oder du musst dir etwas anderes aussuchen, um dir die Zeit zu vertreiben. Mit Web Bundles haben Sie jetzt aber folgende Möglichkeiten:

Bitte deinen Freund, die .wbn-Datei des Spiels zu teilen. Die Datei kann beispielsweise ganz einfach über eine App zur Dateifreigabe mit Peer-to-Peer geteilt werden.
Öffnen Sie die Datei .wbn in einem Browser, der Web Bundles unterstützt.
Starten Sie das Spiel auf Ihrem eigenen Gerät und versuchen Sie, den Highscore Ihres Freundes zu schlagen.

Dieses Szenario wird im folgenden Video erklärt.

Wie Sie sehen, kann ein Web Bundle jede Ressource enthalten, sodass es offline funktioniert und sofort geladen werden kann.

Web-Bundles erstellen

Die go/bundle-Befehlszeile ist derzeit die einfachste Möglichkeit, eine Website zu bündeln. go/bundle ist eine Referenzimplementierung der Web Bundles-Spezifikation, die in Go erstellt wurde.

Installieren Sie Go.

Installieren Sie go/bundle.

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

Klonen Sie das preact-todomvc-Repository und erstellen Sie die Webanwendung, um das Bündeln der Ressourcen vorzubereiten.
```
git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build
```

Verwenden Sie den Befehl gen-bundle, um eine .wbn-Datei zu erstellen.

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

Glückwunsch! TodoMVC ist jetzt ein Web Bundle.

Es gibt noch weitere Optionen für die Bündelung und weitere werden folgen. Mit der go/bundle-Befehlszeile können Sie ein Web Bundle mithilfe einer HAR-Datei oder einer benutzerdefinierten Liste von Ressourcen-URLs erstellen. Weitere Informationen zu go/bundle finden Sie im GitHub-Repository. Sie können auch das experimentelle Node.js-Modul zur Bündelung wbn testen. wbn befindet sich noch in der Anfangsphase der Entwicklung.

Mit Web Bundles experimentieren

So testen Sie ein Web Bundle:

Rufe about://version auf, um zu sehen, welche Chrome-Version du verwendest. Wenn Sie Version 80 oder höher verwenden, überspringen Sie den nächsten Schritt.
Laden Sie Chrome Canary herunter, wenn Sie Chrome 80 oder höher nicht verwenden.
Öffnen Sie about://flags/#web-bundles.
Legen Sie das Flag Web Bundles auf Aktiviert fest.

Web Bundles werden in about://flags aktiviert
Starten Sie Chrome neu.
Ziehen Sie die Datei todomvc.wbn per Drag-and-drop in Chrome (auf einem Desktop-Computer) oder tippen Sie in einer Dateiverwaltungs-App auf einem Android-Gerät darauf.

Alles funktioniert wie von Zauberhand.

Die Preact-Implementierung von TodoMVC, die offline als Web-Bundle ausgeführt wird

Sie können auch andere Beispiel-Web-Bundles ausprobieren:

web.dev.wbn ist ein Snapshot der gesamten web.dev-Website vom 15. Oktober 2019.
proxx.wbn: PROXX ist ein Minesweeper-Klon, der offline funktioniert.
squoosh.wbn: Squoosh ist ein praktisches und schnelles Bildoptimierungstool, mit dem Sie verschiedene Bildkomprimierungsformate vergleichen können. Außerdem werden Größen- und Formatkonvertierungen unterstützt.

Feedback geben

Die Web Bundle API-Implementierung in Chrome ist experimentell und unvollständig. Es funktioniert nicht alles und es könnte ausfallen oder abstürzen. Deshalb ist sie hinter einer experimentellen Markierung. Aber die API ist so weit, dass Sie sie jetzt in Chrome erkunden können. Das Feedback von Webentwicklern ist für das Design neuer APIs sehr wichtig. Probieren Sie es aus und teilen Sie den Mitarbeitern von Web Bundles mit, was Sie davon halten.

Allgemeines Feedback kannst du an webpackage-dev@chromium.org senden.
Wenn Sie Feedback zur Spezifikation haben, können Sie unter https://github.com/WICG/webpackage/issues/new ein neues Spezifikationsproblem melden oder eine E-Mail an wpack@ietf.org senden.
Wenn Sie Probleme mit dem Verhalten von Chrome feststellen, rufen Sie https://crbug.com/new auf, um einen Chromium-Fehler zu melden.
Auch zur Diskussion der Spezifikationen und zu den Tools sind wir gerne für Sie da. Besuche das spec-Repository, um mitzumachen.

Danksagungen

Ein großes Dankeschön an das Chrome-Entwicklerteam Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda und Jeffrey Yasskin, das intensiv an der Spezifikation gearbeitet, die Funktion für Canary entwickelt und diesen Artikel gelesen hat. Während des Standardisierungsprozesses hat Dan York bei der Orientierung in der IETF-Diskussion geholfen und Dave Cramer war eine großartige Ressource dafür, was Verlage und Webpublisher wirklich benötigen. Wir möchten uns außerdem bei Jason Miller für das tolle Preact-todomvc bedanken und für seine unermüdliche Bemühungen zur Verbesserung des Frameworks danken.