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

André Cipriani Bandarra

Adriana Jara

تاريخ النشر: 2 ديسمبر 2020

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

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

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

عملية إعداد مبسّطة

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

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

معالج محسَّن

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

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

إتاحة العرض في وضع ملء الشاشة والاتجاه

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

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

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

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

مخرجات AppBundles

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

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

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

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

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

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

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

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

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

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

يجب تحديث تطبيقك للتأكّد من أنّه يستخدم أحدث إصدار من برنامج تضمين الإعلانات، مع آخر إصلاحات الأخطاء والميزات. بعد تثبيت أحدث إصدار من 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,
    });
  }
}