מה חדש ב-Web In Play

André Cipriani Bandarra

Adriana Jara

מאז שהשקנו את התכונה פעילות באינטרנט מהימנה בשנה שעברה, צוות Chrome ממשיך לעבוד מוצר שמקל על השימוש ב-בועת בועות, ומוסיף תכונות חדשות כמו המשחק הבא של Google Play שילוב של החיוב ולאפשר לו לעבוד בפלטפורמות נוספות כמו ChromeOS. המאמר הזה סיכום של העדכונים האחרונים והעדכונים הקרובים לגבי 'פעילות מהימנה באינטרנט'.

תכונות חדשות ב-בועת בועות ובפעילות מהימנה באינטרנט

התכונה בועות עוזרת ליצור אפליקציות שמפעילות את אפליקציות ה-PWA בתוך פעילות אמינה באינטרנט, ללא נדרש ידע בכלים ספציפיים לפלטפורמה.

תהליך הגדרה פשוט יותר

בעבר, כדי להשתמש ב-Buberwrap, נדרשה הגדרה ידנית של ערכת הפיתוח של Java וב-Android ב-SDK, בשתיהן יש סבירות גבוהה לשגיאות. הכלי מציע עכשיו להוריד באופן אוטומטי את הקבצים החיצוניים של יחסי התלות האלה בפעם הראשונה.

עדיין אפשר להשתמש בהתקנה קיימת של יחסי התלות, אם אתם מעדיפים לעשות זאת. והפקודה החדשה doctor עוזרת למצוא בעיות וממליצה על תיקונים בהגדרה, כדי יעודכנו משורת הפקודה באמצעות הפקודה updateConfig.

אשף משופר

כשיוצרים פרויקט עם init, ל-בועה צריך מידע כדי ליצור את האפליקציה ל-Android. הכלי מחלץ ערכים מהמניפסט של אפליקציית האינטרנט ומספק ברירות מחדל כשזה אפשרי.

אפשר לשנות את הערכים האלה כשיוצרים פרויקט חדש, אבל בעבר המשמעות של כל שדה לא הייתה ברורה. תיבות הדו-שיח של האתחול נבנו מחדש עם תיאורים ואימות טובים יותר לכל אחת מהן שדה להזנת קלט.

תצוגה: תמיכה במסך מלא ובכיוון

במקרים מסוימים כדאי שהאפליקציה תשתמש בחלק גדול ככל האפשר מהמסך, כדי להטמיע אפליקציות PWA, מגדירים את השדה display במניפסט של אפליקציית האינטרנט לערך fullscreen.

כש-בועת בועות מזהה את האפשרות של מסך מלא במניפסט של אפליקציית האינטרנט, היא מגדירה את מכשיר Android להפעיל אותן גם במסך מלא, או במצב עשיר, במונחים ספציפיים ל-Android.

השדה orientation במניפסט של אפליקציית האינטרנט מגדיר אם להפעיל את האפליקציה בפריסה לאורך, בפריסה לרוחב או בכיוון שבו המכשיר משתמש כרגע. גלישת בועות קורא את שדה המניפסט של אפליקציית אינטרנט ומשתמש בו כברירת מחדל כשיוצרים את האפליקציה ל-Android.

יש לך אפשרות להתאים אישית את שתי ההגדרות במסגרת התהליך של bubblewrap init.

הפלט של AppBundles

App Bundle הוא פורמט פרסום לאפליקציות שמעניקות גישה ליצירת ה-APK הסופי נכנסים ל-Play. בפועל, כך אפשר להציג למשתמשים קבצים קטנים יותר כשהם מורידים את ישירות מהחנות.

עכשיו wrapwrap נארז את האפליקציה כ-App Bundle, בקובץ בשם app-release-bundle.aab כדאי להעדיף את הפורמט הזה כשמפרסמים אפליקציות בחנות Play כפי שהחנות תידרש החל מהמחצית השנייה של 2021.

הענקת גישה למיקום גיאוגרפי

המשתמשים מצפים שאפליקציות שמותקנות במכשירים שלהם יתנהגו באופן עקבי, טכנולוגית. בשימוש במסגרת פעילות אינטרנט מהימנה, ההרשאה GeoLocation יכולה להיות הוא קיבל גישה למערכת ההפעלה. כשהאפשרות הזו מופעלת, המשתמשים יראו את אותן תיבות דו-שיח כמו אפליקציות ב-Kotlin או Java, ומוצאים אמצעי בקרה לניהול ההרשאה באותו מקום.

ניתן להוסיף את התכונה באמצעות בועת בועות ובגלל שהיא מוסיפה יחסי תלות ל-Android צריך להפעיל אותו רק כשאפליקציית האינטרנט משתמשת בהרשאת המיקום הגיאוגרפי.

קבצים בינאריים שעברו אופטימיזציה

מכשירים עם נפח אחסון מוגבל נפוצים באזורים מסוימים בעולם, והבעלים של המכשירים האלה בדרך כלל מעדיפים אפליקציות קטנות יותר. אפליקציות שמשתמשות בפעילות אינטרנט מהימנה מניבות כמות קטנה בינאריים, שמסירים חלק מהחרדה מהמשתמשים האלה.

בוצעה אופטימיזציה של Arrowwrap על ידי צמצום הרשימה של ספריות Android הנדרשות, וכתוצאה מכך שנוצרו קבצים בינאריים קטנים ב-800 אלף. בפועל, זה פחות מחצי מהגודל הממוצע שנוצרו על ידי גרסאות קודמות. כדי לנצל את הקבצים הבינאריים הקטנים יותר, צריך רק לעדכן לאפליקציה שלך באמצעות הגרסה האחרונה של wrapwrap.

איך מעדכנים אפליקציה קיימת

אפליקציה שנוצרה על ידי בועת רשום מורכבת מאפליקציית אינטרנט וממכשיר Android קל wrapper שפותח את ה-PWA. למרות ש-PWA נפתחה בפעילות מהימנה באינטרנט, פועלת לפי אותם מחזורי עדכונים כמו כל אפליקציית אינטרנט, ניתן וצריך לעדכן את ה-wrapper המקורי.

עליך לעדכן את האפליקציה כדי לוודא שהיא משתמשת בגרסה האחרונה של ה-wrapper, עם הגרסה האחרונה תיקוני באגים ותכונות. לאחר התקנת הגרסה האחרונה של wrapwrap, הפקודה update תבצע את הפעולות הבאות: מחילים את הגרסה האחרונה של ה-wrapper על פרויקט קיים:

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

עוד סיבה לעדכן את האפליקציות האלה היא לוודא שהשינויים במניפסט האינטרנט הוחלו על האפליקציה. כדי לעשות את זה, משתמשים בפקודה merge החדשה:

bubblewrap merge
bubblewrap update
bubblewrap build

עדכונים בקריטריוני האיכות

ב-Chrome 86 בוצעו שינויים בקריטריוני האיכות של הפעילות באינטרנט הנאמנים, שמוסברים ב המלא במאמר שינויים בקריטריונים של איכות אפליקציות PWA שמשתמשות בפעילות מהימנה באינטרנט.

לסיכום קצר: עליך לוודא שהאפליקציות שלך מטפלות בתרחישים הבאים למנוע מהם לקרוס:

• לא ניתן לאמת קישורים לנכסים דיגיטליים בהשקת האפליקציה
• החזרת HTTP 200 נכשלה עבור בקשת משאב רשת אופליין
• החזרה של שגיאת HTTP 404 או 5xx באפליקציה.

צריך לוודא שהאפליקציה עוברת את האימות של קישורי נכסים דיגיטליים, תרחישים לדוגמה יכולים להיות על ידי Service Worker:

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, המערכת משתמשת בשיטות מומלצות ומסירה סירים סטנדרטיים כשמשתמשים ב-Service Workers. לחלופין, אפשר להשתמש בפלאגין של 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 יש טרמינולוגיה משלו והוא כולל נתוני לקוחות ורכיבי קצה עורפי. הקטע הזה מכסה רק חלק קטן מה-API שספציפי לשימוש Digital Goods API ופעילות מהימנה באינטרנט. חשוב לקרוא את מסמכי התיעוד בנושא חיוב ב-Google Play וההבנה של המושגים שלהם לפני שמשלבים אותם בסביבת הייצור.

התהליך הבסיסי

כדי לספק מוצרים דיגיטליים דרך חנות Play, יהיה עליך להגדיר את הקטלוג שלך ב-Play לחנות, וגם לקשר את חנות Play כאמצעי תשלום מה-PWA.

כשתהיו מוכנים להגדיר את הקטלוג, תצטרכו למצוא את הקטע 'מוצרים' בצד ימין. תפריט הצד ב-Play Console:

כאן אפשר למצוא את האפשרות לראות את המינויים והמוצרים הקיימים מתוך האפליקציה, וגם למצוא את לחצן היצירה להוספת חדשים.

כדי ליצור מוצר חדש מתוך האפליקציה, תצטרכו מזהה מוצר, שם, תיאור ומחיר. זו כדי ליצור מזהי מוצרים בעלי משמעות וקל לזכור אותם, הם ישמשו אתכם מאוחר יותר ואת המזהים לא ניתן לשנות את ההגדרה הזו לאחר היצירה.

כשיוצרים מינויים, צריך לציין גם תקופת חיוב. תהיה לכם אפשרות לציין את הטבות המינוי ולהוסיף תכונות כמו אם יש לכם תקופת ניסיון בחינם, מחיר היכרות, תקופת חסד ואפשרות להרשמה מחדש.

אחרי שיוצרים כל מוצר, צריך להפעיל אותו כדי להפוך אותם לזמינים באפליקציה.

אם אתם מעדיפים, תוכלו להוסיף את המוצרים באמצעות Play Developers API.

אחרי שמגדירים את הקטלוג, השלב הבא הוא להגדיר את תהליך התשלום מ-PWA. שלך ישתמש בשילוב של Digital Goods API ו-Payment Request API כדי להשיג הזה.

אחזור מחיר מוצר באמצעות Digital Goods API

כשמשתמשים בחיוב ב-Google Play, צריך לוודא שהמחיר שמוצג למשתמשים תואם המחיר בדף האפליקציה בחנות. לא יהיה אפשר לסנכרן ידנית את המחירים האלה, לכן Digital Goods API מאפשר לאפליקציית האינטרנט לשלוח שאילתות לגבי התשלום המקורי. ספק מחירים:

// 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, כדאי לעיין במאמר איך פועל ה-API של בקשת תשלום כדי לקבל מידע נוסף. בקשת API.

כדי להשתמש ב-API עם מערכת החיוב ב-Google Play, יהיה עליך להוסיף אמצעי תשלום יש בסיס נתמך שנקרא https://play.google.com/billing, ולהוסיף את המק"ט כחלק מהנתונים לכלי הנגינה:

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

לאחר מכן, אפשר ליצור אובייקט PaymentRequest כרגיל ולהשתמש ב-API כרגיל

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 אין מידע על זהות המשתמש. בתור כתוצאה מכך, עליך לשייך את הרכישה למשתמש בקצה העורפי שלך ולוודא לגשת לפריטים שנרכשו. כשמשייכים את הרכישה למשתמש, חשוב לשמור את אסימון הרכישה, כי יכול להיות שתצטרכו אותו כדי לאמת אם הרכישה בוטלה או אם קיבלתם החזר כספי, או מינוי עדיין פעיל. כדאי לעיין ב-Real Time Developer Notifications 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

גם פעילויות מהימנות באינטרנט זמינות החל מגרסה 85 של Chrome בחנות Play של ChromeOS. התהליך כדי להציג את האפליקציה שלך בחנות באופן זהה ב-ChromeOS וב-Android.

לאחר יצירת ה-App Bundle, ב-Play Console יוצגו הנחיות לביצוע הפעולות הנדרשות שלבים להצגת האפליקציה בחנות Play. במסמכי התיעוד של Play Console יש מידע על ליצור את דף האפליקציה, לנהל את קובצי ה-APK והגדרות אחרות, וגם לקבל הוראות לבדיקה ולפרסום בטוח של האפליקציה.

כדי להגביל את האפליקציה שלכם למכשירי Chromebook בלבד, יש להוסיף את הדגל --chromeosonly בעת האתחול את האפליקציה ב-בועת בועות:

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

כשמפתחים את האפליקציה באופן ידני, בלי בועות, יש להוסיף דגל uses-feature מניפסט של Android:

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

אם דף האפליקציה משותף עם אפליקציה ל-Android, גרסת החבילה של ChromeOS בלבד תמיד תכלול להיות גבוהה יותר מגרסת החבילה של האפליקציה ל-Android. אפשר להגדיר את גרסת החבילה של ChromeOS הרבה יותר גבוהה מגרסת Android, כך שלא צריך לעדכן את שתי הגרסאות בכל גרסה גרסה חדשה.