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

André Cipriani Bandarra

Adriana Jara

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

الميزات الجديدة في فقاعات المحادثات و"النشاط الموثوق به على الويب"

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

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

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

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

معالج محسَّن

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

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

الشاشة: إتاحة ملء الشاشة والاتجاه

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

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

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

ويمكنك تخصيص كلا الإعدادين كجزء من مسار bubblewrap init.

ناتج AppBundles

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

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

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

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

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

برامج ثنائية محسَّنة

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

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

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

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

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

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

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

bubblewrap merge
bubblewrap update
bubblewrap build

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

أدخل Chrome 86 تغييرات على معايير جودة أنشطة الويب الموثوق بها، والتي تم توضيحها في كاملة في التغييرات في معايير الجودة لتطبيقات الويب التقدّمية (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,
    });
  }
}

الفوترة في Google Play

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

سيتم إطلاق Chrome 88 من خلال مرحلة التجربة والتقييم على Android تتيح دمج أنشطة الويب الموثوقة وPayment Request API وDigital Goods API تنفيذ مسارات الشراء من خلال خدمة "الفوترة في Google Play" نتوقع أن تكون النسخة التجريبية هذه متوفرة أيضًا. بالنسبة إلى نظام التشغيل ChromeOS الذي يعمل بالإصدار 89.

ملاحظة مهمة: لدى Google Play Billing API مصطلحات خاصة بها وتشمل العميل مكونات الواجهة الخلفية. يتناول هذا القسم فقط جزءًا صغيرًا من واجهة برمجة التطبيقات يرتبط باستخدام Digital Goods API و"النشاط الموثوق به على الويب". تأكد من قراءة يمكنك الاطّلاع على مستندات خدمة "الفوترة في Google Play" والتعرّف على مفاهيمها قبل دمجها في تطبيق الإصدار العلني.

التدفق الأساسي

لتوفير سلع رقمية عبر "متجر Play"، يجب ضبط الكتالوج على Play Google Store، وكذلك ربط "متجر Play" كطريقة دفع من خلال تطبيق الويب التقدّمي (PWA).

عندما تكون مستعدًا لإعداد الكتالوج الخاص بك، ابدأ بالعثور على قسم "المنتجات" على يمين الصفحة. القائمة الجانبية اليمنى على Play Console:

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

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

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

بعد إنشاء كل منتج، اجعله متاحًا من خلال تطبيقك من خلال تفعيله.

يمكنك إضافة منتجاتك عبر Play Developers API إذا كنت تفضّل ذلك.

بعد إعداد الكتالوج، الخطوة التالية هي ضبط مسار الدفع من تطبيق الويب التقدّمي (PWA). إِنْتَ باستخدام مزيج من Digital Goods API وPayment Request API لتحقيق هذا.

استرجاع سعر المنتج باستخدام Digital Goods API

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

// The SKU for the product, as defined in the Play Store interface
async function populatePrice(sku) {
  try {
    // Check if the Digital Goods API is supported by the browser.
    if (window.getDigitalGoodsService) {
      // The Digital Goods API can be supported by other Payments provider.
      // In this case, we're retrieving the Google Play Billing provider.
      const service =
          await window.getDigitalGoodsService("https://play.google.com/billing");

      // Fetch product details using the `getDetails()` method.
      const details = await service.getDetails([sku]);

      if (details.length === 0) {
        console.log(`Could not get SKU: "${sku}".`);
        return false;
      }

      // The details will contain both the price and the currenncy.
      item = details[0];
      const value = item.price.value;
      const currency = item.price.currency;

      const formattedPrice = new Intl.NumberFormat(navigator.language, {
        style: 'currency', currency: currency }).format(value);

      // Display the price to the user.
      document.getElementById("price").innerHTML = formattedPrice;
    } else {
      console.error("Could not get price for SKU \"" + sku + "\".");
    }
  } catch (error) {
    console.log(error);
  }
  return false;
}

يمكنك رصد توافق واجهة برمجة التطبيقات Digital Goods API عن طريق التحقّق ممّا إذا كانت السمة getDigitalGoodsService() المتاحة في العنصر window.

بعد ذلك، عليك طلب window.getDigitalGoodsService() باستخدام معرّف "الفوترة في Google Play" كمَعلمة. سيؤدي هذا الإجراء إلى عرض مثيل خدمة "الفوترة في Google Play" ويمكن للمورّدين الآخرين تقديم الدعم. لـ Digital Goods API، وسيكون لها معرّفات مختلفة.

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

بدء مسار الشراء

تتيح واجهة برمجة التطبيقات Payment Request API مسارات الشراء على الويب وتستخدم أيضًا في Google Play دمج الفوترة يُرجى الاطّلاع على كيفية عمل واجهة برمجة تطبيقات طلب الدفع لمعرفة المزيد من المعلومات إذا كنت مستخدمًا جديدًا لـ Payment. واجهة برمجة التطبيقات للطلب.

لاستخدام واجهة برمجة التطبيقات مع خدمة "الفوترة في Google Play"، يجب إضافة وسيلة دفع تتضمّن قاعدة بيانات متوافقة اسمها https://play.google.com/billing وتضيف رمز التخزين التعريفي كجزء من البيانات. للآلة:

const supportedInstruments = [{
  supportedMethods: "https://play.google.com/billing",
  data: {
    sku: sku
  }
}];

بعد ذلك، أنشِئ كائن PaymentRequest كالمعتاد واستخدِم واجهة برمجة التطبيقات كالمعتاد.

const request = new PaymentRequest(supportedInstruments, details);

الإقرار بعملية الشراء

بعد اكتمال المعاملة، عليك استخدام Digital Goods API للموافقة على والدفع. سيحتوي كائن الاستجابة من PaymentRequest على رمز مميز يمكنك استخدامه من أجل الإقرار بالمعاملة:

const response = await request.show();
const token = response.details.token;
const service =
          await window.getDigitalGoodsService("https://play.google.com/billing");
await service.acknowledge(token, 'onetime');

لم تكن لدى Digital Goods API وPayment Request API معلومات كافية في هوية المستخدم. نتيجة لذلك، أُنشئت مكتبة مات بلوت ليب في فإن الأمر متروك لك لربط عملية الشراء بالمستخدم في الخلفية والتأكد من والوصول إلى العناصر التي تم شراؤها. عند ربط عملية الشراء بأحد المستخدمين، تذكر حفظ رمز مميز للشراء، حيث قد تحتاج إليه للتأكد مما إذا تم إلغاء عملية الشراء أو استرداد قيمتها، أو إذا كان الاشتراك لا يزال نشطًا. يمكنك مراجعة واجهة برمجة تطبيقات ميزة "إشعارات في الوقت الفعلي خاصة بالمطوّرين" Google Play Developer API لأنّها توفّر نقاط نهاية للتعامل مع هذه الحالات في الخلفية.

التحقّق من الأذونات الحالية

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

const purchases = await itemService.listPurchases();
for (p of purchases) {
  if (!p.acknowledged) {
    await itemService.acknowledge(p.purchaseToken, 'onetime');
  }
}

التحميل إلى "متجر Play" على ChromeOS

تتوفّر أيضًا "أنشطة الويب الموثوق بها" بدايةً من الإصدار Chrome 85 في "متجر Play" على نظام التشغيل ChromeOS. العملية إدراج تطبيقك في المتجر هو نفسه في نظام التشغيل ChromeOS وAndroid.

بعد إنشاء حِزمة تطبيقك، سترشدك أداة Play Console إلى الخطوات اللازمة الخطوات لإدراج التطبيق في "متجر Play". ضمن مستندات Play Console، يمكنك العثور على مساعدة إنشاء بطاقة بيانات تطبيقك وإدارة ملفات APK والإعدادات الأخرى بالإضافة إلى التعليمات لاختبار تطبيقك وإطلاقه بشكل آمن

لحصر تطبيقك على أجهزة Chromebook فقط، أضِف علامة --chromeosonly عند الإعداد التطبيق في Bubblewrap:

bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly

عند إنشاء تطبيقك يدويًا بدون أداة Bubblewrap، يمكنك إضافة علامة uses-feature إلى بيان Android:

<uses-feature  android:name="org.chromium.arc" android:required="true"/>

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