このページは Cloud Translation API によって翻訳されました。

Web In Play の最新情報

André Cipriani Bandarra

Adriana Jara

昨年の信頼できるウェブアクティビティの導入以来、Chrome チームは今後も Bubblewrap でさらに使いやすくなるほか、今後の Google Play などの新機能も追加されています。請求の統合。ChromeOS など、より多くのプラットフォームで機能させることができます。この記事の内容信頼できるウェブアクティビティの最新情報と今後の更新についてまとめています。

バブルラップと信頼できるウェブアクティビティの新機能

バブルラップでは、Trusted Web Activity 内で PWA を起動するアプリを作成できます。プラットフォーム固有のツールの知識が必要です

シンプルなセットアップフロー

これまでは、Bubblewrap を使用するには、Java Development Kit と Android どちらもエラーが発生しやすくなります。ツールにより、外部 IP アドレスが自動的にダウンロードされて、依存関係が無視されます。

依存関係の既存のインストールを使用することもできます。その場合は、また、新しい doctor コマンドは、問題を見つけて構成の修正を推奨する際に役立ちます。これにより、コマンドラインから updateConfig コマンドを使用して更新できるようになりました。

改善されたウィザード

init でプロジェクトを作成する場合、Bubblewrap は Android アプリを生成するための情報を必要とします。「ツールがウェブアプリマニフェストから値を抽出し、可能であればデフォルト値を提供します。

これらの値は新しいプロジェクトの作成時に変更できますが、以前は各フィールドの意味が定義されていませんでした定義します。初期化ダイアログが再構築され、それぞれの説明と検証が改善されました。表示されます。

display: 全画面と画面の向きのサポート

場合によっては、アプリケーションでできる限り多くの画面を使用して、 PWA を構築する場合、ウェブアプリマニフェストの display フィールドを fullscreen。

バブルラップはウェブアプリマニフェストで全画面オプションを検出すると、Android の Android 固有の用語では、全画面表示（没入モード）でも起動できるようにする必要があります。

ウェブアプリマニフェストの orientation フィールドでは、アプリを起動するかどうかを指定します。縦表示、横表示、デバイスが現在使用している画面の向き。今すぐバブルラップ [ウェブアプリマニフェスト] フィールドを読み取り、Android アプリを作成する際のデフォルトとして使用します。

どちらの構成も、bubblewrap init フローの一部としてカスタマイズできます。

AppBundle の出力

App Bundle は、APK の最終生成を委任するアプリの公開形式です。 Play への署名。実際には、これにより、ユーザーがダウンロードするファイルのサイズを抑えつつ、ダウンロードします

バブルラップは、アプリケーションの App Bundle として app-release-bundle.aab。Google Play ストアにアプリを公開する場合は、この形式を使用することをおすすめします 2021 年後半から必須となるためです。

位置情報委任

ユーザーは、デバイスにインストールされているアプリには、実現しています。信頼できるウェブアクティビティ内で使用する場合、GeoLocation 権限をオペレーティングシステムに委任され、有効にすると、ビルドしたアプリと同じダイアログがユーザーに表示される方法を学び、権限を管理するためのコントロールを 1 か所で確認できます。

この機能はバブルラップを介して追加できます。これは Android に依存関係が追加されるため、ウェブアプリで位置情報の利用許可を使用する場合にのみ、有効にしてください。

最適化されたバイナリ

ストレージの限られたデバイスは世界の一部地域では一般的であり、その所有者もいます小規模なアプリケーションを好むことがよくあります信頼できるウェブアクティビティを使用するアプリケーションでは、アプリケーションのバイナリの存在により、そうしたユーザーの不安が軽減されます。

Bubblewrap は、必要な Android ライブラリのリストを減らすことで最適化され、 800k 小さいバイナリを生成しました。実際には平均サイズの半分未満です確認できます。小さなバイナリを活かすために、アプリを最新版に更新していることをご確認ください。

既存のアプリを更新する方法

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 エラーが返される。

アプリケーションがデジタルアセットリンクの検証に合格することを確認する以外に、 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;
}

ワークボックス: ベストプラクティスに沿って組み込まれ、Service Worker の使用時にボイラープレートが削除されます。または、このようなシナリオに対処するために 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 請求サービス

Google Play ストアでのデジタル商品や定期購入を販売できるだけでなく、 Google Play 請求サービスには、カタログ、価格、定期購入を管理するための便利なツールが備わっています。レポート、使い慣れた Google Play ストアの購入手続きフローなどです。これは、は、Google Play ストアで公開するデジタル商品を販売するアプリの要件でもあります。

Chrome 88 では、Android のオリジントライアルで次の統合が可能になる Trusted Web Activities、Payment Request API、Digital Goods API を通じて、 Google Play 請求サービスによる購入フローの実装このオリジントライアルも利用できることが予想されます。バージョン 89 以降の ChromeOS で使用できます。

重要: Google Play Billing API には独自の用語があり、クライアントと説明します。このセクションでは、 Digital Goods API と信頼できるウェブアクティビティです。必ず、 Google Play 請求サービスに関するドキュメントを参照し、使用できます。

基本的なフロー

Google Play ストアを通じてデジタル商品を提供するには、Google Play でカタログを設定する必要がありますストアを設定し、PWA からお支払い方法として Play ストアに接続します。

カタログを構成する準備ができたら、左の [商品] セクションから始めます Google Play Console のサイドメニュー:

既存のアプリ内アイテムと定期購入を確認するオプションが表示されます。 [Create]ボタンで新しいアセットを追加します

アプリ内アイテム

製品の詳細

新しいアプリ内アイテムを作成するには、アイテム ID、名前、説明、価格が必要です。です。意味があり覚えやすい商品 ID を作成することが重要です。後で必要になります。作成後に変更することはできません。

定期購入を作成する際は、請求対象期間も指定する必要があります。必要に応じて定期購読の特典を記載し、無料試用、お試し価格、猶予期間、再度定期購入オプションが用意されています。

各アイテムを作成したら、アイテムを有効にしてアプリから利用できるようにします。

必要に応じて、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 オブジェクトで利用できます。

次に、Google Play 請求サービス ID をパラメータとして指定して window.getDigitalGoodsService() を呼び出します。これにより、Google Play 請求サービス用のサービスインスタンスが返されます。他のベンダーはサポートを実装できます。（Digital Goods API）であり、異なる ID を持ちます。

最後に、Google Play 請求サービスオブジェクトへの参照で getDetails() を呼び出し、次の SKU を渡します。パラメータとして渡します。このメソッドは、price [価格] とユーザーに表示するアイテムの通貨。

購入手続きを開始します。

Payment Request API はウェブでの購入フローを可能にするもので、Google Play でも使用されています。課金の統合。Payment を初めて使用する場合は、Payment Request API の仕組みをご覧ください。リクエスト API。

この API を Google Play 請求サービスで使用するには、お支払い方法を追加する必要があります。 https://play.google.com/billing というサポートされている指標があり、データの一部として SKU を追加する次のとおりです。

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

ChromeOS Play ストアにアップロードする

信頼できるウェブアクティビティは、Chrome 85 以降、ChromeOS の Google Play ストアでも利用できます。プロセスストアにアプリを掲載する手順は、ChromeOS でも Android でも同じです。

App Bundle を作成したら、Google Play Console で、必要な手順 Google Play ストアにアプリを掲載する手順。Google Play Console のドキュメントには、アプリの掲載情報を作成し、APK ファイルやその他の設定と手順を管理するを利用して、アプリの安全なリリースを行うことができます。

アプリケーションを Chromebook のみに制限するには、初期化時に --chromeosonly フラグを追加します。バブルでラップします。

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 バージョンよりもはるかに多いので、バージョンごとに両方のバージョンを更新する必要はありません。なります。