Pierwsze kroki z pakietami internetowymi

Udostępniaj strony internetowe jako jeden plik przez Bluetooth i uruchamiaj je offline w kontekście źródła

Yusuke Utsunomiya

Kenji Baheux

Ostrzeżenie: eksperymentalna implementacja nawigacji do pakietów Web Bundle: zostały usunięte z Chrome w lutym 2023 r.

Łączenie całej witryny jako jednego pliku i udostępnianie jej otwierają nowe przypadki użycia w internecie. Wyobraź sobie świat, w którym możesz:

• Twórz własne treści i rozpowszechniaj je na różne sposoby bez ograniczona do sieci
• Udostępniaj znajomym aplikację internetową lub treści internetowe przez Bluetooth lub Wi-Fi Direct
• Przenieś witrynę na własnym nośniku USB lub hostuj ją we własnej sieci lokalnej

Interfejs Web Bundle API to niesamowita oferta, która pozwoli Ci to zrobić.

Zgodność z przeglądarką

Interfejs Web Bundle API jest obecnie obsługiwany tylko w przeglądarkach opartych na Chromium flagę eksperymentalną.

Przedstawiamy interfejs Web Bundle API

Web Bundle to format pliku służący do hermetyzacji co najmniej jednego zasobu HTTP w w jednym pliku. Może zawierać jeden lub więcej plików HTML, JavaScript, obrazów i arkuszy stylów.

pakiety internetowe, czyli tzw. powiązane giełdy HTTP, wchodzą w skład Web Packaging oferty pakietowej.

Jak działają pakiety internetowe

Zasoby HTTP w pakiecie Web Bundle są indeksowane według adresów URL żądań i opcjonalnie mogą muszą mieć podpisy, które poświadczają zasoby. Podpisy umożliwiają przeglądarkom rozumieją i sprawdzają, skąd pochodzą poszczególne zasoby, oraz traktuje je jako pochodzące od prawdziwego pochodzenia. Działa to podobnie jak w przypadku podpisanych wymiany HTTP, funkcję podpisywania pojedynczego zasobu HTTP.

Z tego artykułu dowiesz się, czym jest pakiet Web Bundle i jak z niego korzystać.

Omówienie pakietów internetowych

Dokładniej mówiąc, pakiet Web Bundle to plik CBOR z rozszerzeniem .wbn (zgodnie z konwencją), pakuje zasoby HTTP do formatu binarnego i jest udostępniane z protokołem MIME application/webbundle typu. Więcej informacji znajdziesz w strukturze najwyższego poziomu. w wersji roboczej specyfikacji.

Pakiety internetowe mają wiele unikalnych cech:

• Obejmuje wiele stron, co pozwala połączyć całą witrynę w jednym pliku.
• Włącza wykonywalny JavaScript (w przeciwieństwie do MHTML)
• Używa do tego wersji HTTP negocjacje treści, które umożliwiają internacjonalizację przy użyciu Accept-Language nagłówek nawet wtedy, gdy pakiet jest używany offline
• Wczytuje się w kontekście swojego pochodzenia, jeśli jest podpisane kryptograficznie przez wydawcę
• Wczytuje się niemal natychmiast, gdy działa lokalnie.

Te funkcje można zastosować na wiele scenariuszy. Jednym z częstych scenariuszy jest możliwość stworzyć autonomiczną aplikację internetową, którą można łatwo udostępniać i używać bez i połączenia z internetem. Na przykład powiedzmy, że lecisz samolotem z Tokio do San Francisco z do znajomych. Nie lubisz rozrywki w samolocie. Znajomy gra w interesujący gry internetowej PROXX z informacją, że pobrali ją jako stronę internetową. Przygotuj się przed wejściem na pokład samolotu. Działa bez problemu offline. Przed internetem Koniec opowieści i trzeba się rozkręcać. grasz w grę na urządzeniu znajomego lub znajdź coś innego, co pozwoli na zaliczenie testu obecnie się znajdujesz. Jednak dzięki pakietom internetowym możesz teraz wykonywać te czynności:

1. Poproś znajomego o udostępnienie pliku .wbn gry. Na przykład plik można łatwo udostępnić peer-to-peer za pomocą aplikacji do udostępniania plików.
2. Otwórz plik .wbn w przeglądarce, która obsługuje pakiety internetowe.
3. Zacznij grać w grę na własnym urządzeniu i postaraj się pobić rekord znajomego Jak.

Oto film, który wyjaśnia ten scenariusz.

Jak widać, pakiet Web Bundle może zawierać wszystkie zasoby, dzięki czemu może działać offline i od razu się wczytują.

Uwaga: obecnie Chrome 80 obsługuje tylko niepodpisane pakiety (czyli pakiety Web Bundle bez podpisy punktu początkowego). Łączenie PROXX bez podpisów nie działa ze względu na problemy między domenami dla pracowników WWW. Chrome pracuje nad rozwiązaniem tego problemu. W tymczasem zapoznaj się z artykułem Rozwiązywanie typowych problemów w przypadku braku podpisu Pakiety aby dowiedzieć się, jak uniknąć problemów z innymi domenami.

Tworzenie pakietów internetowych

Interfejs wiersza poleceń go/bundle jest obecnie Najprostszy sposób na połączenie witryny w pakiety. go/bundle jest referencyjną implementacją pakietów internetowych specyfikacji w Go.

1. Zainstaluj Go.

2. Zainstaluj aplikację go/bundle.

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

3. Klonowanie i kompilacja repozytorium preact-todomvc aby przygotować się do użycia zasobów w pakiecie.

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

4. Utwórz plik .wbn za pomocą polecenia gen-bundle.

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

Gratulacje! TodoMVC to teraz pakiet Web Bundle.

Dostępne są też inne opcje grupowania, a wkrótce pojawią się kolejne. interfejs wiersza poleceń go/bundle pozwala utworzyć pakiet Web Bundle za pomocą pliku HAR lub niestandardowej listy zasobów Adresy URL. Aby dowiedzieć się więcej, odwiedź repozytorium GitHub. o go/bundle. Możesz też wypróbować eksperymentalny moduł Node.js do grupowania, wbn Zwróć uwagę, że usługa wbn jest nadal we wczesnej fazie rozwoju w Google Cloud.

Korzystanie z pakietów internetowych

Aby wypróbować pakiet Web Bundle:

1. Wejdź na about://version, by sprawdzić, jaką masz wersję Chrome. Jeśli korzystasz z wersji 80 lub więcej, pomiń następny krok.
2. Jeśli nie korzystasz z Chrome 80, pobierz Chrome Canary. czy później.
3. Otwórz pokój about://flags/#web-bundles.

4. Ustaw flagę Web Bundle na Enabled (Włączone).

   

   Włączanie pakietów internetowych w: about://flags

5. Uruchom ponownie Chrome.

6. Przeciągnij plik todomvc.wbn i upuść go w Chrome na komputerze lub kliknij go w pliku. na urządzeniach z Androidem.

Wszystko magicznie działa.

Implementacja TodoMVC w wersji Preact w trybie offline jako pakiet internetowy

Możesz też wypróbować inne przykładowe pakiety internetowe:

• web.dev.wbn to przegląd całej witryny web.dev z 15 października 2019 r.
• proxx.wbn: PROXX to klon Sapera, który działa offline.
• squoosh.wbn: Squoosh to wygodne i szybkie narzędzie do optymalizacji obrazów, umożliwia bezpośrednie porównywanie różnych formatów kompresji obrazu z obsługą zmianę rozmiaru i formatowanie konwersji.

Uwaga: obecnie możesz przejść tylko do pakietu Web Bundle zapisanego w pliku lokalnym, ma ono charakter tymczasowy.

Prześlij opinię

Implementacja interfejsu Web Bundle API w Chrome jest eksperymentalna i niekompletna. Nie wszystko działa i może ulec awarii. Dlatego znajduje się za flagą eksperymentu. Interfejs API jest już gotowy, więc możesz go poznać w Chrome. Opinie twórców stron internetowych mają kluczowe znaczenie przy projektowaniu nowych interfejsów API, więc warto je wypróbować i podzielić się opinią z osobami pracującymi nad pakietami internetowymi.

• Wyślij ogólną opinię do [e-mail].
• Jeśli masz opinię na temat specyfikacji, https://github.com/WICG/webpackage/issues/new , aby zgłosić nowy problem ze specyfikacją, lub wyślij e-maila na adres [e-mail].
• Jeśli znajdziesz problemy z działaniem Chrome, wejdź na https://crbug.com/new, by zgłosić błąd w Chromium.
• Wkład w dyskusję na temat specyfikacji i narzędzi jest również witamy. Aby wziąć udział, otwórz repozytorium specyfikacji.

Podziękowania

Dziękujemy wspaniały zespół inżynierów Chrome, Kunihiko Sakamoto, Tsuyoshi Horo, Takashi Toyoshima, Kinuko Yasuda i Jeffrey Yasskin, którzy ciężko pracowali, przyczyniając się , tworząc tę funkcję w wersji Canary i zapoznając się z tym artykułem. W trakcie proces standaryzacji, Dan York, pomógł opracować oraz dyskusją IETF, a także Dave Cramer w doskonałym zasobie informacji o potrzebach wydawców. Pragniemy również podziękować Jasonowi Millerowi za niezwykłe wzięcie udziału w Prokatoli i jego niespokojny wysiłek włożony w ulepszanie platformy.