Co nowego w aplikacjach internetowych w Google Play

André Cipriani Bandarra

Adriana Jara

Od wprowadzenia zaufanej aktywności internetowej w zeszłym roku zespół Chrome wciąż pracuje nad usługi, co ułatwia korzystanie z aplikacji Bubblewrap i korzysta z nowych funkcji, np. gdy pojawi się w Google Play integrację rozliczeń i działanie aplikacji na większej liczbie platform, takich jak ChromeOS; Ten artykuł: podsumowują najnowsze i nadchodzące aktualizacje Zaufanej aktywności w internecie.

Nowe funkcje Bubblewrap i zaufana aktywność w internecie

Bubblewrap pomaga tworzyć aplikacje, które uruchamiają aplikacje PWA w ramach zaufanej aktywności internetowej, bez i wymagają wiedzy z zakresu narzędzi powiązanych z daną platformą.

Uproszczony proces konfiguracji

Dotychczas używanie Bubblewrap wymagało ręcznej konfiguracji pakietu Java Development Kit oraz Androida SDK, oba są podatne na błędy. Narzędzie proponuje teraz automatyczne pobranie pliku zewnętrznego przy pierwszym uruchomieniu.

Wciąż możesz użyć istniejącej instalacji zależności, a nowe polecenie doctor pomaga znaleźć problemy i zalecać poprawki konfiguracji, które mogą być aktualizowane z poziomu wiersza poleceń za pomocą polecenia updateConfig.

Ulepszony kreator

Podczas tworzenia projektu w usłudze init Bubblewrap potrzebuje informacji, aby wygenerować aplikację na Androida. narzędzie wyodrębnia wartości z pliku manifestu aplikacji internetowej i w miarę możliwości podaje wartości domyślne.

Możesz zmienić te wartości podczas tworzenia nowego projektu, ale wcześniej znaczenie poszczególnych pól nie było jasne. Okna inicjowania zostały przebudowane z lepszymi opisami i walidacją pola do wprowadzania danych.

wyświetlanie: obsługa pełnego ekranu i orientacji

W niektórych przypadkach może być pożądane, aby aplikacja wykorzystywała jak największą część ekranu. tworząc aplikacje PWA, wdraża się to przez ustawienie pola display z pliku manifestu aplikacji internetowej na fullscreen

Gdy Bubblewrap wykryje opcję pełnego ekranu w pliku manifestu aplikacji internetowej, skonfiguruje którą można też uruchomić na pełnym ekranie, czyli w trybie pojemnym, w warunkach określonych dla Androida.

Pole orientation z pliku manifestu aplikacji internetowej określa, czy aplikację należy uruchamiać w pionową lub poziomą albo w orientacji, której aktualnie używa urządzenie. Folia bąbelkowa odczytuje pole pliku manifestu aplikacji internetowej i używa go jako wartości domyślnej podczas tworzenia aplikacji na Androida.

Obie konfiguracje możesz dostosować w ramach procesu bubblewrap init.

Dane wyjściowe AppBundles

Pakiety aplikacji to format publikowania aplikacji, który przekazuje proces generowania ostatecznej wersji pliku APK logowania się w Google Play. W praktyce umożliwia to udostępnianie mniejszych plików użytkownikom przy pobieraniu aplikację dostępną w sklepie.

Bubblewrap pakuje aplikację jako pakiet aplikacji w pliku o nazwie app-release-bundle.aab Ten format jest preferowany do publikowania aplikacji w Sklepie Play ponieważ będzie to wymagane przez sklep od drugiej połowy 2021 r.

Przekazywanie dostępu do geolokalizacji

Użytkownicy oczekują, że aplikacje zainstalowane na ich urządzeniach będą działać konsekwentnie niezależnie technologii. Uprawnienie GeoLocation używane w ramach zaufanej aktywności internetowej można teraz przekazywane do systemu operacyjnego. Po włączeniu tej opcji użytkownicy będą widzieć te same okna co aplikacje utworzone w kotlinie lub Javie, a także w jednym miejscu znaleźć elementy sterujące uprawnieniami.

Tę funkcję można dodać za pomocą Bubblewrap, a ponieważ wymaga to dodatkowych zależności projektu, należy go włączać tylko wtedy, gdy aplikacja internetowa korzysta z uprawnień do geolokalizacji.

Zoptymalizowane pliki binarne

Urządzenia z ograniczoną ilością miejsca na dane są powszechnie używane w niektórych częściach świata, a właściciele tych urządzeń często korzystają z mniejszych aplikacji. Aplikacje korzystające z zaufanej aktywności internetowej tworzą małe pliki binarne, dzięki czemu użytkownicy nie muszą się bać.

Funkcja Bubblewrap została zoptymalizowana przez zmniejszenie listy potrzebnych bibliotek Androida, co przełożyło się na plików binarnych o rozmiarze mniejszym niż 800 KB. W praktyce jest to o ponad połowę średniej wielkości wygenerowanych przez poprzednie wersje. Aby korzystać z mniejszych plików binarnych, wystarczy zaktualizować aplikację za pomocą najnowszej wersji Bubblewrap.

Jak zaktualizować dotychczasową aplikację

Aplikacja wygenerowana przez Bubblewrap składa się z aplikacji internetowej i lekkiego Androida który uruchamia PWA. Mimo że progresywna aplikacja internetowa jest otwierana w ramach zaufanej aktywności internetowej, cykli aktualizacji z takimi samymi cyklami jak w przypadku każdej aplikacji internetowej, kod natywny można i należy zaktualizować.

Zaktualizuj aplikację tak, aby korzystała z najnowszej wersji opakowania z najnowszą wersją poprawki błędów i funkcje. Po zainstalowaniu najnowszej wersji aplikacji Bubblewrap polecenie update będzie zastosuj najnowszą wersję kodu do istniejącego projektu:

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

Innym powodem aktualizacji tych aplikacji jest zapewnienie, że zmiany w pliku manifestu internetowego są zastosowane do aplikacji. Aby to zrobić, użyj nowego polecenia merge:

bubblewrap merge
bubblewrap update
bubblewrap build

Zmiany w kryteriach jakości

W Chrome 86 wprowadziliśmy zmiany w kryteriach jakości zaufanej aktywności internetowej, które wyjaśniamy na Zmiany kryteriów jakości aplikacji PWA korzystających z zaufanej aktywności internetowej.

W skrócie: trzeba zadbać o to, aby aplikacje radziły sobie z następującymi scenariuszami, zapobiegaj awariom:

• Brak weryfikacji linków do zasobów cyfrowych podczas uruchamiania aplikacji
• Nie udało się zwrócić kodu HTTP 200 w przypadku żądania dotyczącego zasobu sieciowego offline
• Zwracanie błędu HTTP 404 lub 5xx w aplikacji.

Poza tym, że aplikacja musi przejść weryfikację linków do zasobów cyfrowych, pozostałe scenariusze mogą być obsługiwane przez skrypt 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 tworzy wypieki zgodnie ze sprawdzonymi metodami i usuwa szablony, gdy używane są mechanizmy Service Worker. Możesz też użyć wtyczki Workbox, aby obsłużyć takie sytuacje:

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,
    });
  }
}

Płatności w Google Play

Oprócz umożliwienia w aplikacji sprzedaży produktów cyfrowych i subskrypcji w Sklepie Play Płatności w Google Play to narzędzia do zarządzania katalogiem, cenami i subskrypcjami. i dotychczasowy proces płatności oparty na Sklepie Play. it są też wymagane w przypadku aplikacji opublikowanych w Sklepie Play, które służą do sprzedaży produktów cyfrowych.

Wprowadzamy Chrome 88 w ramach wersji próbnej origin na Androida, która umożliwia integrację Trusted Web Activities, Payment Request API oraz Digital Goods API do tych celów implementować procesy zakupów za pomocą Płatności w Google Play. Ta wersja próbna origin powinna być również dostępna dla ChromeOS w wersji 89.

Ważne: interfejs Google Play Billing API ma własną terminologię i obejmuje komponentów backendu. Ta sekcja obejmuje tylko niewielką część interfejsu API dotyczącą używania Interfejs Digital Goods API i Zaufana aktywność w internecie. Koniecznie przeczytaj dokumentację Płatności w Google Play i zrozumienie zagadnień związanych z nią przed zintegrowaniem jej z dokumentem aplikacji w środowisku produkcyjnym.

Procedura podstawowa

Aby dostarczać produkty cyfrowe w Sklepie Play, musisz skonfigurować swój katalog w Google Play Google Play, a także połączyć Sklep Play jako formę płatności z progresywnej aplikacji internetowej.

Aby skonfigurować katalog, znajdź sekcję Produkty po lewej stronie w Konsoli Play:

Znajdziesz tu opcję przeglądania aktualnych produktów i subskrypcji w aplikacji oraz użyj przycisku Utwórz, aby dodać nowe.

Aby utworzyć nowy produkt w aplikacji, potrzebujesz jego identyfikatora, nazwy, opisu i ceny. Jest Ważne, by tworzyć znaczące i łatwe do zapamiętania identyfikatory produktów. Będą potrzebne później oraz identyfikatory Po utworzeniu nie będzie można go zmienić.

Podczas tworzenia subskrypcji musisz też określić okres rozliczeniowy. Możesz: wymienić korzyści z subskrypcji i dodać takie opcje jak np. okres próbny, ceny dla nowych subskrybentów, okresu prolongaty i opcji odnowienia subskrypcji.

Po utworzeniu każdego produktu aktywuj je, aby udostępnić je w aplikacji.

Jeśli wolisz, możesz dodać produkty za pomocą interfejsu Play Developers API.

Następnym krokiem po skonfigurowaniu katalogu jest skonfigurowanie procesu płatności z PWA. Ty będzie korzystać z kombinacji interfejsów Digital Goods API i Payment Request API, aby osiągnąć to osiągnąć.

Pobieranie ceny produktu za pomocą interfejsu Digital Goods API

Gdy korzystasz z Płatności w Google Play, musisz mieć pewność, że ceny wyświetlane użytkownikom są takie same cenę ze strony z informacjami o aplikacji. Ręczne aktualizowanie cen jest niemożliwe, interfejs API towarów cyfrowych umożliwia aplikacji internetowej wysyłanie zapytań dotyczących płatności. dostawca cen:

// 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;
}

Możesz wykryć obsługę interfejsu Digital Goods API, sprawdzając, czy getDigitalGoodsService() dostępna w obiekcie window.

Następnie wywołaj funkcję window.getDigitalGoodsService(), podając jako parametr identyfikator płatności w Google Play. Spowoduje to zwrócenie instancji usługi na potrzeby Płatności w Google Play, a inni dostawcy mogą wdrożyć pomoc dla interfejsu Digital Goods API i mieć różne identyfikatory.

Na koniec wywołaj getDetails() w odniesieniu do obiektu Płatności w Google Play przekazującego kod SKU dla jako parametru. Metoda zwróci obiekt szczegółu zawierający zarówno cenę, jak i parametr waluta produktu, który może się wyświetlić użytkownikowi.

Rozpoczynanie procesu zakupu

Payment Request API pozwala na zakupy w internecie i jest używany w Google Play. Integracja rozliczeń. Zapoznaj się z artykułem Jak działa interfejs Payment Request API, aby dowiedzieć się więcej, jeśli dopiero zaczynasz korzystać z płatności. Interfejs API żądań.

Aby używać interfejsu API z Płatnościami w Google Play, musisz dodać instrument płatniczy, ma obsługiwaną metodę o nazwie https://play.google.com/billing i dodaj kod SKU jako część danych dla instrumentu:

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

Następnie skompiluj obiekt PaymentRequest w zwykły sposób i użyj interfejsu API w zwykły sposób

const request = new PaymentRequest(supportedInstruments, details);

Potwierdź zakup

Po zakończeniu transakcji użyj interfejsu Digital Goods API, aby potwierdzić płatności. Obiekt odpowiedzi z PaymentRequest będzie zawierał token, którego użyjesz do potwierdź transakcję:

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');

Interfejs Digital Goods API i Payment Request API nie mają wiedzy o tożsamości użytkownika. Jako Dlatego to Ty musisz powiązać zakup z użytkownikiem w swoim backendzie i upewnić się, dostęp do zakupionych produktów. Kiedy wiążesz zakup z użytkownikiem, pamiętaj o zapisaniu atrybutu zakupu, ponieważ może być potrzebny do sprawdzenia, czy zakup został anulowany, czy też został zrealizowany zwrot środków subskrypcja jest nadal aktywna. Zapoznaj się z interfejsem Real Time Developer Notification API oraz Google Play Developer API, ponieważ udostępniają punkty końcowe do obsługi tych zgłoszeń w Twoim backendzie.

Sprawdzanie istniejących uprawnień

Użytkownik mógł już wykorzystać kod promocyjny lub mieć subskrypcję produktu. W Aby sprawdzić, czy użytkownik ma odpowiednie uprawnienia, możesz wywołać funkcję listPurchases() w usłudze produktów cyfrowych. Spowoduje to wyświetlenie wszystkich zakupów dokonanych przez wprowadzone przez klienta w Twojej aplikacji. Jest to też miejsce, w którym możesz podziękować za wszelkie niepotwierdzone zakupów, aby mieć pewność, że użytkownik poprawnie zrealizuje swoje uprawnienia.

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

Prześlij do Sklepu Play ChromeOS

Zaufane aktywności internetowe są też dostępne od Chrome 85 w Sklepie Play na urządzeniu z ChromeOS. Procedura aby umieścić aplikację w sklepie, dzieje się tak samo w ChromeOS i na Androidzie.

Gdy utworzysz pakiet aplikacji, w Konsoli Play przeprowadzimy Cię przez aby umieścić ją w Sklepie Play. W dokumentacji Konsoli Play znajdziesz pomoc dotyczącą tych kwestii: Utwórz stronę aplikacji, zarządzaj plikami APK i innymi ustawieniami, a także instrukcjami do testowania i bezpiecznego publikowania aplikacji.

Aby ograniczyć dostęp do aplikacji tylko do Chromebooków, podczas inicjowania dodaj flagę --chromeosonly aplikację w aplikacji Bubblewrap:

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

Jeśli tworzysz aplikację ręcznie, bez Bubblewrap, dodaj flagę uses-feature do Plik manifestu Androida:

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

Jeśli Twoja strona z informacjami jest udostępniana aplikacji na Androida, wersja pakietu dostępna tylko na ChromeOS będzie miała być wyższej niż wersja pakietu aplikacji na Androida. Wersję pakietu ChromeOS możesz skonfigurować na niż Android, więc nie trzeba aktualizować obu wersji wersji.