Websites als einzelne Datei über Bluetooth freigeben und offline im Kontext des Ursprungsservers ausführen
Yusuke Utsunomiya
Kenji Baheux
Vollständige Website als einzelne Datei bündeln und freigeben
neue Anwendungsfälle für das Web eröffnet. Stellen Sie sich eine Welt vor, in der Sie:
Erstellen Sie Ihre eigenen Inhalte und verbreiten Sie sie auf verschiedene Arten, ohne
auf das Netzwerk beschränkt
Web-Apps oder Webinhalte über Bluetooth oder Wi-Fi Direct mit Freunden teilen
Speichern Sie Ihre Website auf Ihrem eigenen USB-Gerät oder hosten Sie sie sogar in Ihrem eigenen lokalen Netzwerk.
Die Web Bundles API ist ein innovativer Vorschlag, mit dem Sie all dies umsetzen können.
Browserkompatibilität
Die Web Bundles API wird derzeit nur von Chromium-basierten Browsern unterstützt, die
ein experimentelles Flag.
Jetzt neu: Web Bundles API
Ein Web Bundle ist ein Dateiformat zum Kapseln einer oder mehrerer HTTP-Ressourcen in einem
in einer einzelnen Datei. Sie kann eine oder mehrere HTML-, JavaScript-Dateien,
Bilder oder Stylesheets verwenden.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Funktionsweise von Web Bundles
HTTP-Ressourcen in einem Web Bundle werden durch Anfrage-URLs indexiert und können optional
Signaturen, die die Ressourcen belegen. Signaturen ermöglichen es Browsern,
zu verstehen und zu überprüfen, woher jede Ressource stammt, und behandelt jede als kommend
von ihrem eigentlichen Ursprung entfernt. Das funktioniert ähnlich wie bei Signed HTTP Exchanges,
eine Funktion zum Signieren
einer einzelnen HTTP-Ressource behandelt werden.
In diesem Artikel erfahren Sie, was ein Web Bundle ist und wie Sie es verwenden.
Erläuterung von Web Bundles
Um genau zu sein, ist ein Web Bundle eine CBOR-Datei mit der Erweiterung .wbn (konventionell).
Verpackt HTTP-Ressourcen in ein Binärformat und wird mit dem MIME-Wert application/webbundle bereitgestellt.
Typ. Weitere Informationen hierzu finden Sie im Abschnitt Struktur der obersten Ebene.
des Spezifikationsentwurfs an.
Web Bundles haben mehrere einzigartige Funktionen:
Kapselt mehrere Seiten, wodurch eine vollständige Website in einer einzigen Datei gebündelt werden kann
Aktiviert ausführbares JavaScript, im Gegensatz zu MHTML
Hierfür werden HTTP-Varianten verwendet.
Verhandeln von Inhalten, die eine Internationalisierung mit dem Accept-Language ermöglicht
Header, auch wenn das Bundle offline verwendet wird
Ladevorgänge im Kontext ihres Ursprungs, wenn sie vom Verlag oder Webpublisher kryptografisch signiert wurden
Bei lokaler Bereitstellung nahezu sofort geladen
Bei diesen Funktionen werden mehrere Szenarien geöffnet. Ein häufiges Szenario ist die Fähigkeit,
eine eigenständige Webanwendung zu erstellen, die einfach
freigegeben und verwendet werden kann
eine Internetverbindung. Angenommen, Sie sind in einem Flugzeug von Tokio nach San Francisco mit
Ihre Freundin oder Ihren Freund. Die Unterhaltung im Flugzeug gefällt Ihnen nicht. Ihr Freund spielt eine interessante
Webspiel namens PROXX an und teilt Ihnen mit, dass er es
Bündeln Sie vor dem Einsteigen ins Flugzeug. Offline funktioniert problemlos. Vor dem Web
In Paketen endet die Geschichte und ihr müsst euch abwechseln.
das Spiel auf dem Gerät deines Freundes spielen,
oder etwas anderes suchen,
. Web Bundles bieten Ihnen jetzt folgende Möglichkeiten:
Bitte deinen Freund, die .wbn-Datei des Spiels freizugeben. Zum Beispiel könnte die Datei
können ganz einfach über eine Filesharing-App Peer-to-Peer-geteilt werden.
Öffne die Datei .wbn in einem Browser, der Web Bundles unterstützt.
Starte das Spiel auf deinem eigenen Gerät und versuche, das High deiner Freunde zu übertreffen
Punkte.
In diesem Video wird dieses Szenario erklärt.
Wie Sie sehen, kann ein Web Bundle jede Ressource enthalten, sodass es offline funktioniert.
und laden sofort.
Web Bundles erstellen
Die go/bundle-Befehlszeile ist derzeit die
ist die einfachste Methode, eine Website zu bündeln. go/bundle ist eine Referenzimplementierung der Web Bundles
in Go erstellte Spezifikation.
Es sind weitere Optionen für Gruppierungen verfügbar und es werden noch weitere folgen. Die go/bundle-Befehlszeile
ermöglicht die Erstellung eines Web Bundles mit einer HAR-Datei oder einer benutzerdefinierten Ressourcenliste
URLs. Weitere Informationen finden Sie im GitHub-Repository
über go/bundle. Sie können auch das experimentelle Node.js-Modul für Bündelung,
wbnwbn befindet sich noch in der Anfangsphase
Entwicklung.
Web Bundles ausprobieren
So testen Sie ein Web Bundle:
Gehe zu about://version, um zu sehen, welche Chrome-Version du verwendest. Wenn Sie Version
80 oder höher haben, überspringen Sie den nächsten Schritt.
Falls Sie nicht Chrome 80 verwenden, laden Sie Chrome Canary herunter.
oder später.
Öffnen Sie about://flags/#web-bundles.
Setzen Sie das Flag Web Bundles auf Enabled (Aktiviert).
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Web Bundles in about://flags aktivieren
Starten Sie Chrome neu.
Ziehen Sie die Datei todomvc.wbn per Drag-and-drop in Chrome, wenn Sie einen Desktop verwenden, oder tippen Sie in einer Datei auf die Datei
unter Android verwalten.
Alles wie von Zauberhand.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder"></ph>
Die Preact-Implementierung von TodoMVC, die offline als Web-Bundle funktioniert
Sie können auch andere Beispiel-Websets ausprobieren:
web.dev.wbn ist eine
Momentaufnahme 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 Tool zur Bildoptimierung,
ermöglicht direkte Vergleiche verschiedener Bildkomprimierungsformate mit Unterstützung für
Größenanpassung und Formatkonvertierungen.
Feedback geben
Die Web Bundle API-Implementierung in Chrome ist experimentell und unvollständig.
Nicht alles funktioniert. Das Gerät kann ausfallen oder abstürzen. Deshalb
hinter dem Flag „Experimental“. Aber die API ist bereit genug, um sie in Chrome auszuprobieren.
Das Feedback von Webentwicklern ist
entscheidend für das Design von
neue APIs, probieren Sie es also bitte aus und teilen Sie den Mitarbeitern, die an Web Bundles arbeiten, Ihre Meinung mit.
Wenn du Probleme mit dem Verhalten von Chrome feststellst, besuche
https://crbug.com/new, um einen Chromium-Fehler zu melden.
Sämtliche Beiträge zur Diskussion über Spezifikationen und Tools sind ebenfalls mehr als
willkommen. Rufen Sie das Spezifikations-Repository auf, um mitzumachen.
Danksagungen
Wir möchten uns herzlich an das Chrome-Entwicklerteam bedanken,
Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda und Jeffrey Yasskin, die hart daran gearbeitet haben,
Spezifikation, Entwicklung der Canary-Funktion
und die Wiederholung dieses Artikels. Während der
Standardisierungsprozess Dan York dabei geholfen,
IETF-Diskussion und auch Dave Cramer waren ein
eine großartige Ressource zu dem,
was Verlage und Webpublisher brauchen. Wir möchten uns auch bei Jason Miller für den tollen Beitrag und seine
um das Framework besser zu machen.