با Web Bundles شروع کنید

وب سایت ها را به صورت یک فایل از طریق بلوتوث به اشتراک بگذارید و آنها را به صورت آفلاین در زمینه اصلی خود اجرا کنید

یوسوکه اوتسونومیا
Yusuke Utsunomiya
X Homepage
کنجی باهوکس
Kenji Baheux

بسته‌بندی یک وب‌سایت کامل به‌عنوان یک فایل واحد و قابل اشتراک‌گذاری، موارد استفاده جدیدی را برای وب باز می‌کند. دنیایی را تصور کنید که در آن بتوانید:

  • محتوای خود را ایجاد کنید و آن را به انواع روش ها بدون محدود شدن به شبکه توزیع کنید
  • یک برنامه وب یا بخشی از محتوای وب را از طریق بلوتوث یا Wi-Fi Direct با دوستان خود به اشتراک بگذارید
  • سایت خود را بر روی USB خود حمل کنید یا حتی آن را در شبکه محلی خود میزبانی کنید

Web Bundles API پیشنهادی است که به شما امکان می دهد همه این کارها را انجام دهید.

سازگاری با مرورگر

Web Bundles API در حال حاضر فقط در مرورگرهای مبتنی بر Chromium پشت پرچم آزمایشی پشتیبانی می‌شود.

معرفی Web Bundles API

Web Bundle یک فرمت فایل برای کپسوله کردن یک یا چند منبع HTTP در یک فایل است. این می تواند شامل یک یا چند فایل HTML، فایل های جاوا اسکریپت، تصاویر یا شیوه نامه باشد.

بسته‌های وب، که به طور رسمی با نام تبادل HTTP همراه شناخته می‌شوند، بخشی از پیشنهاد بسته‌بندی وب هستند.

شکلی که نشان می دهد که Web Bundle مجموعه ای از منابع وب است.
بسته‌های وب چگونه کار می‌کنند

منابع HTTP در یک Web Bundle توسط URL های درخواست نمایه می شوند و می توانند به صورت اختیاری با امضاهایی همراه باشند که منابع را تضمین می کنند. امضاها به مرورگرها این امکان را می دهند که بفهمند و تأیید کنند که هر منبع از کجا آمده است، و هر کدام را به عنوان منبع اصلی خود در نظر می گیرند. این شبیه به نحوه استفاده از Signed HTTP Exchanges است که یک ویژگی برای امضای یک منبع HTTP واحد است.

این مقاله به شما توضیح می دهد که Web Bundle چیست و چگونه از آن استفاده کنید.

توضیح بسته های وب

به طور دقیق، یک Web Bundle یک فایل CBOR با پسوند .wbn (طبق قرارداد) است که منابع HTTP را در قالب باینری بسته بندی می کند و با نوع MIME application/webbundle ارائه می شود. می‌توانید در بخش ساختار سطح بالای پیش‌نویس مشخصات، اطلاعات بیشتری در مورد این موضوع بخوانید.

بسته های وب دارای چندین ویژگی منحصر به فرد هستند:

  • چندین صفحه را محصور می کند و یک وب سایت کامل را در یک فایل واحد جمع می کند
  • جاوا اسکریپت قابل اجرا را بر خلاف MHTML فعال می کند
  • از انواع HTTP برای انجام مذاکره محتوا استفاده می‌کند، که بین‌المللی‌سازی را با سرصفحه Accept-Language فعال می‌کند، حتی اگر بسته به‌صورت آفلاین استفاده شود.
  • هنگامی که به صورت رمزنگاری شده توسط ناشر آن امضا شود، در زمینه مبدا بارگیری می شود
  • وقتی به صورت محلی سرو می شود تقریباً فوراً بارگیری می شود

این ویژگی ها چندین سناریو را باز می کنند. یکی از سناریوهای رایج، توانایی ساخت یک برنامه وب مستقل است که به راحتی به اشتراک گذاشته می شود و بدون اتصال به اینترنت قابل استفاده است. به عنوان مثال، فرض کنید با دوست خود در یک هواپیما از توکیو به سانفرانسیسکو هستید. شما سرگرمی های داخل هواپیما را دوست ندارید. دوست شما در حال انجام یک وب بازی جالب به نام PROXX است و به شما می گوید که قبل از سوار شدن به هواپیما، بازی را به صورت یک وب باندل دانلود کرده است. به صورت آفلاین بدون نقص کار می کند. قبل از Web Bundles، داستان به همین جا ختم می شد و شما یا باید به نوبت بازی را روی دستگاه دوست خود انجام دهید یا چیز دیگری برای گذراندن زمان پیدا کنید. اما با Web Bundles، در اینجا آنچه می توانید انجام دهید:

  1. از دوست خود بخواهید فایل .wbn بازی را به اشتراک بگذارد. به عنوان مثال، فایل را می توان به راحتی با استفاده از یک برنامه اشتراک گذاری فایل، به صورت همتا به همتا به اشتراک گذاشت.
  2. فایل .wbn را در مرورگری که از Web Bundles پشتیبانی می کند باز کنید.
  3. بازی را در دستگاه خود شروع کنید و سعی کنید امتیاز بالای دوست خود را شکست دهید.

در اینجا ویدیویی وجود دارد که این سناریو را توضیح می دهد.

همانطور که می بینید، یک Web Bundle می تواند حاوی هر منبعی باشد، که باعث می شود به صورت آفلاین کار کند و فورا بارگیری شود.

ساخت بسته های وب

go/bundle CLI در حال حاضر ساده‌ترین راه برای بسته‌بندی یک وب‌سایت است. go/bundle یک پیاده سازی مرجع از مشخصات Web Bundles است که در Go ساخته شده است.

  1. Go را نصب کنید .

  2. go/bundle نصب کنید.

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

  3. مخزن preact-todomvc را کلون کنید و برنامه وب را بسازید تا برای بسته بندی منابع آماده شوید.

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

  4. از دستور gen-bundle برای ساخت فایل .wbn استفاده کنید.

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

تبریک می گویم! TodoMVC اکنون یک بسته وب است.

گزینه های دیگری برای بسته بندی وجود دارد و موارد بیشتری در راه است. go/bundle CLI به شما امکان می دهد با استفاده از یک فایل HAR یا یک لیست سفارشی از URL های منبع، یک Web Bundle بسازید. برای کسب اطلاعات بیشتر درباره go/bundle از مخزن GitHub دیدن کنید. همچنین می‌توانید ماژول تجربی Node.js را برای بسته‌بندی، wbn امتحان کنید. توجه داشته باشید که wbn هنوز در مراحل اولیه توسعه است.

بازی با بسته های وب

برای آزمایش یک بسته وب:

  1. به about://version بروید تا ببینید چه نسخه ای از Chrome را اجرا می کنید. اگر نسخه 80 یا بالاتر را اجرا می کنید، مرحله بعدی را رد کنید.
  2. اگر از Chrome 80 یا جدیدتر استفاده نمی کنید، Chrome Canary را دانلود کنید.
  3. about://flags/#web-bundles باز کنید.

  4. پرچم Web Bundles را روی Enabled تنظیم کنید.

    تصویری از about://flags
    فعال کردن Web Bundles در about://flags

  5. Chrome را دوباره راه اندازی کنید.

  6. اگر روی دسکتاپ هستید، فایل todomvc.wbn را در Chrome بکشید و رها کنید، یا اگر اندرویدی هستید، روی آن در یک برنامه مدیریت فایل ضربه بزنید.

همه چیز به صورت جادویی کار می کند.

اجرای Preact TodoMVC به صورت آفلاین به عنوان یک بسته وب کار می کند

همچنین می‌توانید سایر بسته‌های وب نمونه را امتحان کنید:

  • web.dev.wbn یک عکس فوری از کل سایت web.dev از 15 اکتبر 2019 است.
  • proxx.wbn : PROXX یک کلون Minesweeper است که به صورت آفلاین کار می کند.
  • squoosh.wbn : Squoosh یک ابزار بهینه‌سازی تصویر راحت و سریع است که به شما امکان می‌دهد با پشتیبانی از تغییر اندازه و تبدیل فرمت، مقایسه‌های جانبی فرمت‌های فشرده‌سازی تصویر مختلف را انجام دهید.

ارسال بازخورد

اجرای Web Bundle API در Chrome آزمایشی و ناقص است. همه چیز کار نمی کند و ممکن است از کار بیفتد یا خراب شود. به همین دلیل پشت یک پرچم آزمایشی قرار دارد. اما API به اندازه کافی آماده است تا بتوانید آن را در کروم کاوش کنید. بازخورد توسعه‌دهندگان وب برای طراحی APIهای جدید بسیار مهم است، بنابراین لطفاً آن را امتحان کنید و به افرادی که روی Web Bundles کار می‌کنند بگویید چه فکر می‌کنید.

  • بازخورد کلی را به webpackage-dev@chromium.org ارسال کنید.
  • اگر بازخوردی در مورد مشخصات دارید، از https://github.com/WICG/webpackage/issues/new دیدن کنید تا یک مشکل مشخصات جدید را ثبت کنید، یا به wpack@ietf.org ایمیل بزنید.
  • اگر مشکلی در رفتار Chrome مشاهده کردید، از https://crbug.com/new دیدن کنید تا یک اشکال Chromium را ثبت کنید.
  • هر گونه مشارکت در بحث مشخصات و ابزار نیز بیش از حد استقبال می شود. برای مشارکت به انبار مشخصات مراجعه کنید.

قدردانی

می‌خواهیم فریاد بزرگی به تیم مهندسی کروم فوق‌العاده، کونیهیکو ساکاموتو ، تسویوشی هورو ، تاکاشی تویوشیما ، کینوکو یاسودا و جفری یاسکین بدهیم که سخت تلاش کردند تا به مشخصات، ساختن ویژگی در Canary و بررسی این مقاله کمک کنند. در طول فرآیند استانداردسازی، دن یورک به هدایت بحث IETF کمک کرده است و همچنین دیو کرامر منبع خوبی برای آنچه ناشران واقعاً به آن نیاز دارند، بوده است. ما همچنین می‌خواهیم از جیسون میلر برای preact-todomvc شگفت‌انگیز و تلاش بی‌قرار او برای بهتر کردن چارچوب تشکر کنیم.