الميزات الجديدة في Web In Play

André Cipriani Bandarra

Adriana Jara

تاريخ النشر: 2 كانون الأول (ديسمبر) 2020

منذ طرح ميزة النشاط الموثوق على الويب، سهّل فريق Chrome استخدامها مع Bubblewrap. أضفنا ميزات إضافية، مثل دمج "الفوترة في Google Play"، وفعّلناها على المزيد من المنصات، مثل ChromeOS.

ميزتا Bubblewrap و"النشاط الموثوق به على الويب"

يساعدك إطار عمل Bubblewrap في إنشاء تطبيقات تطلِق تطبيقاتك المتوافقة مع الأجهزة الجوّالة على الويب داخل نشاط ويب موثوق، بدون الحاجة إلى معرفة الأدوات الخاصة بالمنصة.

خطوات إعداد مبسَّطة

في السابق، كان استخدام Bubblewrap يتطلّب إعداد حزمة تطوير Java وحزمة تطوير البرامج (SDK) لنظام التشغيل Android يدويًا، وكلاهما عرضة للخطأ. تقدّم الأداة الآن إمكانية تنزيل التبعيات الخارجية تلقائيًا عند تشغيلها للمرة الأولى.

بإمكانك استخدام إحدى التبعيات المثبَّتة حاليًا، إذا كنت تفضّل ذلك، وسيساعدك الأمر doctor الجديد في العثور على المشاكل واقتراح إصلاحات للإعدادات، ويمكن تعديلها الآن من سطر الأوامر باستخدام الأمر updateConfig.

معالج محسَّن

عند إنشاء مشروع باستخدام init، تحتاج أداة Bubblewrap إلى معلومات لإنشاء تطبيق Android. وتعمل الأدوات على استخراج القيم من بيان تطبيق الويب وتوفير الإعدادات التلقائية متى أمكن ذلك.

يمكنك تغيير هذه القيم عند إنشاء مشروع جديد، ولكن في السابق لم يكن معنى كل حقل واضحًا. تمت إعادة إنشاء مربّعات حوار الإعداد باستخدام أوصاف وعمليات تحقّق أفضل لكل حقل إدخال.

عرض المحتوى بملء الشاشة ودعم الاتجاه

في بعض الحالات، قد تريد أن يستخدم تطبيقك أكبر قدر ممكن من الشاشة، وعند إنشاء تطبيقات الويب التقدّمية، يتم تنفيذ ذلك من خلال ضبط الحقل display من بيان تطبيق الويب على fullscreen.

عندما يرصد Bubblewrap خيار ملء الشاشة في ملف بيان تطبيق الويب، يضبط تطبيق Android لتشغيله أيضًا بملء الشاشة أو الوضع الشامل، وذلك وفقًا لمصطلحات خاصة بنظام التشغيل Android.

يحدِّد حقل orientation من بيان تطبيق الويب ما إذا كان يجب بدء تشغيل التطبيق في الوضع العمودي أو الوضع الأفقي أو بالاتجاه الذي يستخدمه الجهاز حاليًا. يقرأ Bubblewrap الآن حقل بيان تطبيق الويب ويستخدمه كإعداد تلقائي عند إنشاء تطبيق Android.

يمكنك تخصيص كلتا الإعدادتَين كجزء من عملية bubblewrap init.

الناتج من AppBundles

حِزم التطبيقات هي تنسيق نشر للتطبيقات التي تفوِّض الإنشاء النهائي لحِزمة APK وتسجّل الدخول إلى Play. في الواقع، يتيح ذلك عرض ملفات أصغر حجمًا للمستخدمين عند تنزيل التطبيق من المتجر.

تُجمِّع أداة Bubblewrap التطبيق الآن كمجموعة حزمات تطبيق في ملف يُسمى app-release-bundle.aab. ويجب استخدام هذا التنسيق عند نشر التطبيقات على "متجر Play"، لأنّه مطلوب من المتجر اعتبارًا من عام 2021.

تفويض الموقع الجغرافي

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

يمكن إضافة الميزة من خلال Bubblewrap، وبما أنّها تضيف عناصر إضافية تعتمد على مشروع Android ، يجب تفعيلها فقط عندما يستخدم تطبيق الويب إذن الموقع الجغرافي.

الملفات الثنائية المحسَّنة

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

تم تحسين Bubblewrap من خلال تقليل قائمة مكتبات Android المطلوبة، ما أدّى إلى توليد ملفَي ثنائيَين أصغر حجمًا بـ 800 كيلوبايت. من الناحية العملية، هذا أقل من نصف متوسط الحجم الذي تم إنشاؤه من خلال الإصدارات السابقة. للاستفادة من الملفات الثنائية الأصغر حجمًا، ما عليك سوى تحديث تطبيقك باستخدام أحدث إصدار من Bubblewrap.

كيفية تحديث تطبيق حالي

يتألّف التطبيق الذي تم إنشاؤه باستخدام Bubblewrap من تطبيق ويب وملف ملف برمجي خفيف الوزن لنظام Android يفتح تطبيق الويب التقدّمي. على الرغم من أنّ تطبيق الويب التقدّمي الذي يتم فتحه داخل نشاط ويب موثوق به يتّبع دورات التحديث نفسها التي يتّبعها أي تطبيق ويب، يمكن تعديل الغلاف الأصلي ويجب تعديله.

يجب تحديث تطبيقك للتأكّد من أنّه يستخدم أحدث إصدار من الحزمة، مع أحدث إصلاحات الأخطاء والميزات. بعد تثبيت أحدث إصدار من Bubblewrap، يطبّق الأمر update أحدث إصدار من الحزمة على مشروع حالي:

npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build

هناك سبب آخر لتحديث هذه التطبيقات وهو ضمان تطبيق التغييرات على بيان الويب على التطبيق. استخدِم الأمر الجديد merge لإجراء ذلك:

bubblewrap merge
bubblewrap update
bubblewrap build

تعديلات على معايير الجودة

أجرى الإصدار 86 من Chrome تغييرات على معايير جودة "النشاط الموثوق به على الويب"، والتي تم شرحها بالكامل في المقالة التغييرات في معايير الجودة لتطبيقات PWA التي تستخدم "النشاط الموثوق به على الويب".

في ما يلي ملخّص سريع يوضّح الإجراءات التي يجب اتّخاذها لضمان معالجة تطبيقاتك للسيناريوهات التالية بهدف منع تعطّلها:

• تعذُّر التحقّق من روابط مواد العرض الرقمية عند إطلاق التطبيق
• تعذُّر عرض رمز HTTP 200 لطلب مورد شبكة بلا اتصال بالإنترنت
• عرض خطأ HTTP 404 أو 5xx في التطبيق.

بالإضافة إلى التأكّد من أنّ التطبيق يجتاز التحقّق من روابط مواد العرض الرقمية، يمكن لعامل الخدمة التعامل مع السيناريوهات التالية:

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    try {
      return await fetchAndHandleError(event.request);
    } catch {
      // Failed to load from the network. User is offline or the response
      // has a status code that triggers the Quality Criteria.
      // Try loading from cache.
      const cachedResponse = await caches.match(event.request);
      if (cachedResponse) {
        return cachedResponse;
      }
      // Response was not found on the cache. Send the error / offline
      // page. OFFLINE_PAGE should be pre-cached when the service worker
      // is activated.
      return await caches.match(OFFLINE_PAGE);
    }
  })());
});

async function fetchAndHandleError(request) {
  const cache = await caches.open(RUNTIME_CACHE);
  const response = await fetch(request);

  // Throw an error if the response returns one of the status
  // that trigger the Quality Criteria.
  if (response.status === 404 ||
      response.status >= 500 && response.status < 600) {
    throw new Error(`Server responded with status: ${response.status}`);
  }

  // Cache the response if the request is successful.
  cache.put(request, response.clone());
  return response;
}

تطبّق Workbox أفضل الممارسات وتزيل المحتوى المتكرّر عند استخدام مهام الخدمة. يمكنك بدلاً من ذلك استخدام مكوّن إضافي في Workbox للتعامل مع هذه السيناريوهات:

export class FallbackOnErrorPlugin {
  constructor(offlineFallbackUrl, notFoundFallbackUrl, serverErrorFallbackUrl) {
    this.notFoundFallbackUrl = notFoundFallbackUrl;
    this.offlineFallbackUrl = offlineFallbackUrl;
    this.serverErrorFallbackUrl = serverErrorFallbackUrl;
  }

  checkTrustedWebActivityCrash(response) {
    if (response.status === 404 || response.status >= 500 && response.status <= 600) {
      const type = response.status === 404 ? 'E_NOT_FOUND' : 'E_SERVER_ERROR';
      const error = new Error(`Invalid response status (${response.status})`);
      error.type = type;
      throw error;
    }
  }

  // This is called whenever there's a network response,
  // but we want special behavior for 404 and 5**.
  fetchDidSucceed({response}) {
    // Cause a crash if this is a Trusted Web Activity crash.
    this.checkTrustedWebActivityCrash(response);

    // If it's a good response, it can be used as-is.
    return response;
  }

  // This callback is new in Workbox v6, and is triggered whenever
  // an error (including a NetworkError) is thrown when a handler runs.
  handlerDidError(details) {
    let fallbackURL;
    switch (details.error.details.error.type) {
      case 'E_NOT_FOUND': fallbackURL = this.notFoundFallbackUrl; break;
      case 'E_SERVER_ERROR': fallbackURL = this.serverErrorFallbackUrl; break;
      default: fallbackURL = this.offlineFallbackUrl;
    }

    return caches.match(fallbackURL, {
      // Use ignoreSearch as a shortcut to work with precached URLs
      // that have _WB_REVISION parameters.
      ignoreSearch: true,
    });
  }
}