بدء استخدام "حِزم الويب"

يمكنك مشاركة المواقع الإلكترونية كملف واحد عبر البلوتوث وتشغيلها بلا إنترنت في سياق المصدر.

يوسوكي أوتسونوميا
يوسوكي أوتسونومييا
كينجي باهيو
كنجي باهيو

يؤدي تجميع موقع ويب كامل كملف واحد وجعله قابلاً للمشاركة إلى فتح حالات استخدام جديدة للويب. تخيَّل عالمًا يمكنك فيه:

  • أنشئ المحتوى الخاص بك ووزّعه بكل أنواعه بدون التقيد بالشبكة
  • يمكنك مشاركة تطبيق ويب أو محتوى ويب مع أصدقائك عبر البلوتوث أو Wi-Fi المباشر.
  • يمكنك حمل موقعك الإلكتروني على وحدة USB الخاصة بك أو استضافته على شبكتك المحلية.

تُعد Web Bundle API أحد الاقتراحات المتقدمة التي تتيح لك إجراء كل ذلك.

توافُق المتصفح

لا تتوافق واجهة برمجة تطبيقات حزم الويب في الوقت الحالي إلا مع المتصفحات التي تستند إلى Chromium وراء علامة تجريبية.

لمحة حول Web Bundle API

حزمة الويب هي تنسيق ملف يتم تغليفه مورد HTTP واحد أو أكثر في ملف واحد. يمكن أن يتضمن ملف HTML واحدًا أو أكثر أو ملفات JavaScript أو صور أو أوراق أنماط.

إنّ "حِزم الويب"، والمعروفة رسميًا باسم عمليات تبادل HTTP المجمَّعة، هي جزء من اقتراح حزمة الويب.

رقم يوضح أنّ "حزمة الويب" هي مجموعة من موارد الويب.
آلية عمل حِزم الويب

تتم فهرسة موارد HTTP في "حزمة الويب" من خلال عناوين URL للطلب، ويمكن أن تأتي اختياريًا مع توقيعات تدل على الموارد. تتيح التوقيعات للمتصفّحات فهم مصدر كل مورد والتحقّق من مصدره، كما تتعامل مع كل مصدر على أنّه مصدره الحقيقي. ويشبه هذا طريقة التعامل مع Signed HTTP Exchanges، وهي ميزة لتوقيع مورد HTTP واحد.

تقدّم لك هذه المقالة إرشادات حول ماهية "حِزمة الويب" وكيفية استخدامها.

شرح حزم الويب

على وجه التحديد، تكون حزمة الويب ملف CBOR يتضمّن الامتداد .wbn (حسب الاصطلاح) والذي يدمج موارد HTTP في تنسيق ثنائي، ويتم عرضه من خلال النوع application/webbundle MIME. ويمكنك قراءة المزيد من المعلومات حول هذا الموضوع في القسم بنية المستوى الأعلى من مسودة المواصفات.

تحتوي حِزم الويب على العديد من الميزات الفريدة:

  • يقوم بتغليف صفحات متعددة، مما يتيح تجميع موقع ويب كامل في ملف واحد
  • لتفعيل JavaScript القابل للتنفيذ، على عكس MHTML
  • استخدام متغيرات HTTP لإجراء تفاوض بشأن المحتوى، ما يتيح تدويل العنوان باستخدام العنوان Accept-Language حتى في حال استخدام الحزمة بلا اتصال بالإنترنت
  • يتم تحميله في سياق مصدره عند توقيع الناشر بطريقة مشفّرة.
  • يتم التحميل بشكل فوري تقريبًا عند عرض الجهاز على الجهاز.

هذه الميزات تفتح سيناريوهات متعددة. أحد السيناريوهات الشائعة هو القدرة على إنشاء تطبيق ويب مستقل يسهل مشاركته واستخدامه بدون اتصال بالإنترنت. على سبيل المثال، لنفترض أنك على متن طائرة من طوكيو إلى سان فرانسيسكو مع صديقك. لا تحب الترفيه أثناء الطيران. أحد أصدقائك يلعب لعبة ويب شيقة اسمها PROXX ويخبرك بأنه نزّل اللعبة على شكل حزمة ويب قبل الصعود على متن الطائرة. وتعمل هذه الخدمة بلا عيوب. قبل استخدام تنسيق "حزم الويب"، كانت القصة تنتهي عند هذه النقطة، لذا عليك إمّا تبادل الأدوار في تشغيل اللعبة على جهاز صديقك، أو البحث عن شيء آخر لتمضية الوقت. ولكن باستخدام حزم الويب، إليك ما يمكنك فعله الآن:

  1. اطلب من صديقك مشاركة ملف .wbn الخاص باللعبة. على سبيل المثال، يمكن مشاركة الملف بسهولة باستخدام تطبيق مشاركة الملفات.
  2. افتح ملف .wbn في متصفّح متوافق مع "حزم الويب".
  3. ابدأ باللعب على جهازك وحاول تحقيق أعلى نتيجة حققها صديقك.

إليك فيديو يشرح هذا السيناريو.

كما ترى، يمكن أن تحتوي "حزمة الويب" على جميع الموارد، ما يجعلها تعمل في وضع عدم الاتصال ويتم تحميلها على الفور.

إنشاء حِزم الويب

وواجهة سطر الأوامر في go/bundle هي أسهل طريقة حاليًا لتجميع موقع إلكتروني. والسمة go/bundle هي تطبيق مرجعي لمواصفات حِزم الويب المضمَّنة في 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 إنشاء حزمة ويب باستخدام ملف HAR أو قائمة مخصصة بعناوين URL للموارد. يمكنك زيارة مستودع GitHub لمعرفة المزيد عن go/bundle. يمكنك أيضًا تجربة وحدة Node.js التجريبية للدمج wbn. تجدر الإشارة إلى أنّ "wbn" لا يزال في المراحل الأولى من التطوير.

الاستمتاع بمجموعات الويب

لتجربة "حزمة ويب":

  1. يُرجى الانتقال إلى about://version لمعرفة إصدار Chrome المفعَّل حاليًا. إذا كنت تستخدم الإصدار 80 أو إصدار أحدث، فتخط الخطوة التالية.
  2. يمكنك تنزيل Chrome Canary إذا كنت لا تستخدم الإصدار 80 من Chrome أو إصدار أحدث.
  3. فتح "about://flags/#web-bundles"
  4. اضبط علامة حِزم الويب على مفعّلة.

    لقطة شاشة لـ about://flags
    تفعيل حِزم الويب في about://flags
  5. إعادة تشغيل Chrome

  6. اسحب ملف todomvc.wbn وأفلته في Chrome في حال استخدام جهاز كمبيوتر مكتبي، أو انقر عليه في أحد تطبيقات إدارة الملفات إذا كنت تستخدم جهاز Android.

وتعمل كل هذه الميزات بطريقة سحرية.

التنفيذ المسبق لطريقة عمل TodoMVC بلا اتصال بالإنترنت كحزمة ويب

يمكنك أيضًا تجربة نماذج حِزم ويب أخرى:

  • web.dev.wbn هو نبذة عن موقع web.dev الإلكتروني بأكمله اعتبارًا من 15 تشرين الأول (أكتوبر) عام 2019.
  • proxx.wbn: PROXX هو نسخة طبق الأصل من لعبة Minesweeper وتعمل بلا اتصال بالإنترنت.
  • squoosh.wbn: Squoosh هي أداة ملائمة وسريعة لتحسين الصور تتيح لك إجراء مقارنات جنبًا إلى جنب بين مختلف تنسيقات ضغط الصور، مع دعم لتغيير أحجام تنسيقات الصور وتنسيقها.

إرسال ملاحظات

لا يزال تنفيذ Web Bundle API في Chrome تجريبيًا وغير مكتمل. لا يعمل كل شيء على ما يرام، وقد يفشل أو يتعطل. هذا هو السبب في وجودها خلف علامة تجريبية. إنّ واجهة برمجة التطبيقات جاهزة بما يكفي لاستكشافها في Chrome. إنّ الملاحظات التي يرسلها المطوّرون على الويب مهمة لتصميم واجهات برمجة التطبيقات الجديدة، لذا يُرجى تجربتها وإعلام العاملين على تنسيق Web Bundle بآرائك.

  • يمكنك إرسال ملاحظات عامة إلى webpackage-dev@chromium.org.
  • إذا كانت لديك أي ملاحظات حول المواصفات، يُرجى زيارة https://github.com/WICG/webpackage/issues/new لتقديم مشكلة جديدة في المواصفات أو إرسال رسالة إلكترونية إلى wpack@ietf.org.
  • إذا وجدت أي مشاكل في سلوك Chrome، يُرجى زيارة https://crbug.com/new للإبلاغ عن خطأ في Chromium.
  • تُعد أي مساهمات في مناقشة المواصفات والأدوات أكثر ترحيبًا. يُرجى الانتقال إلى مركز المواصفات للاشتراك.

الشكر والتقدير

نودّ أن نوّد شكر كبيرة لفريق هندسة Chrome الرائع، كونيهيكو ساكاموتو، وتسويوشي هورو، وتاكاشي تويوشيما، وكينوكو ياسودا، وجيفري ياسكين، الذي عملوا بجد للمساهمة في المواصفات وإنشاء الميزة على إصدار Canary ومراجعة هذه المقالة. وخلال عملية توحيد المقاييس، ساعد دان يورك في التنقل بين النقاشات ضمن منتدى مهندسي شبكة الإنترنت (IETF)، كما كان ديف كرامر مرجعًا رائعًا لتلبية احتياجات الناشرين. نودّ أيضًا أن نشكر "جيسون ميلر" على جهوده الرائعة وجهده المتواصل لتحسين إطار العمل.