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
Yusuke Utsunomiya
Kenji Baheux
Kenji Baheux

Łą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.

Ilustracja pokazująca, że pakiet Web Bundle jest zbiorem zasobów internetowych.
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 technologii Signed HTTP Exchange, 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ą.

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 umożliwia utworzenie pakietu 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).

    Zrzut ekranu strony about://flags
    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.
.

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.

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.