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

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

Yusuke Utsunomiya
Kenji Baheux
Kenji Baheux

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

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

إنّ Web Bundles API هي اقتراح جديد يتيح لك تنفيذ كل ذلك.

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

لا تتوفّر Web Bundles API حاليًا إلا في المتصفّحات المستندة إلى Chromium التي تستخدم علامة تجريبية.

لمحة عن Web Bundles API

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

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

صورة توضيحية تُظهر أنّ حِزمة الويب هي مجموعة من مراجع الويب
آلية عمل حِزم الويب

تتم فهرسة موارد HTTP في حِزمة ويب حسب عناوين URL للطلبات، ويمكن أن تأتي مع توقيعات تشهد على الموارد. تسمح التوقيعات للمتصفّحات بمعرفة مصدر كلّ مورد والتحقّق منه، كما تتعامل مع كلّ مورد على أنّه مصدره هو مصدره الفعلي. يشبه ذلك طريقة معالجة عمليات تبادل HTTP الموقَّعة، وهي ميزة لتوقيع مورد HTTP واحد.

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

شرح حِزم الويب

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

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

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

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

  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 CLI إنشاء حِزمة ويب باستخدام ملف 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 هو نسخة طبق الأصل من لعبة "ألغام مضادة" تعمل بلا إنترنت.
  • squoosh.wbn: Squoosh هي أداة تحسين صور سريعة ومريحة تسمح بإجراء مقارنات جنبًا إلى جنب بين تنسيقات ضغط الصور المختلفة، مع إمكانية تغيير الحجم وتحويل التنسيقات.

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

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

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

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

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