昨年の信頼できるウェブ アクティビティの導入以来、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 バージョンよりもはるかに多いので、バージョンごとに両方のバージョンを更新する必要はありません。 なります。