Seit der Einf�hrung des Tools Vertrauensw�rdige Webaktivit�ten im letzten Jahr arbeitet das Chrome-Team zur einfacheren Verwendung mit Bubblewrap. Au�erdem kommen neue Funktionen wie die Abrechnungsintegration und Aktivierung der Funktion auf weiteren Plattformen wie ChromeOS. In diesem Artikel erfahren Sie, fassen Sie die neuesten und zuk�nftigen Updates f�r Trusted Web Activity zusammen.
Neue Funktionen f�r Bubblewrap und vertrauensw�rdige Webaktivit�ten
Mit Bubblewrap k�nnen Sie Apps erstellen, die Ihre PWAs in einer vertrauensw�rdigen Webaktivit�t starten, ohne die Kenntnisse �ber plattformspezifische Tools erfordern.
Vereinfachte Einrichtung
Bisher mussten bei der Verwendung von Bubblewrap das Java Development Kit und die Android-App manuell eingerichtet werden. SDK, die beide fehleranf�llig sind. Das Tool bietet nun einen automatischen Download der externen Abh�ngigkeiten festlegen.
Sie k�nnen auch eine vorhandene
Installation der Abh�ngigkeiten verwenden,
und der neue doctor-Befehl hilft Ihnen, Probleme zu finden, und empfiehlt Fehlerbehebungen f�r die Konfiguration, die
werden jetzt �ber die Befehlszeile mit dem Befehl updateConfig aktualisiert.
Verbesserter Assistent
Beim Erstellen eines Projekts mit init ben�tigt Bubblewrap Informationen zum Generieren der Android-App. Die
extrahiert Werte aus dem Web App Manifest und gibt nach M�glichkeit Standardeinstellungen an.
Sie k�nnen diese Werte �ndern, wenn Sie ein neues Projekt erstellen, aber zuvor war die Bedeutung der einzelnen Felder nicht l�schen. Die Initialisierungsdialogfelder wurden neu erstellt und bieten nun bessere Beschreibungen und eine bessere Validierung f�r jeden Schritt. Eingabefeld.
Display: Unterst�tzung von Vollbild und Ausrichtung
In einigen F�llen soll Ihre App
so viel Bildschirm wie m�glich nutzen.
beim Erstellen von PWAs. Dazu wird das Feld display des Web-App-Manifests auf
fullscreen.
Wenn Bubblewrap die Option für den Vollbildmodus im Web App Manifest erkennt, konfiguriert es das Android- für Android auch im Vollbildmodus bzw. im immersiven Modus gestartet werden soll.
Das Feld „orientation“ aus dem Web-App-Manifest definiert, ob die App in der folgenden Sprache gestartet werden soll:
Hochformat, Querformat oder in der Ausrichtung, die das Gerät aktuell verwendet. Bubblewrap jetzt
liest das Feld „Web-App-Manifest“ und verwendet es als Standard beim Erstellen der Android-App.
Beide Konfigurationen können im Rahmen des bubblewrap init-Ablaufs angepasst werden.
AppBundles-Ausgabe
App Bundles ist ein Veröffentlichungsformat für Apps, bei dem die endgültige APK-Generierung und die Anmeldung bei Google Play. In der Praxis ermöglicht dies, dass Usern kleinere Dateien beim Herunterladen der aus dem Store herunter.
Bubblewrap verpackt die App jetzt als App Bundle, in einer Datei namens
app-release-bundle.aab Dieses Format solltest du bei der Veröffentlichung von Apps im Play Store bevorzugen.
da sie ab dem zweiten Halbjahr 2021 für das Geschäft erforderlich sind.
Standortdelegierung
Nutzer erwarten, dass sich die auf ihren Geräten installierten Anwendungen, unabhängig von Technologie. Bei Verwendung innerhalb einer vertrauenswürdigen Webaktivität kann die Berechtigung GeoLocation jetzt zum an das Betriebssystem delegiert wurde. Wenn diese Option aktiviert ist, sehen Nutzer die gleichen Dialogfelder wie erstellte Apps. mit Kotlin oder Java sowie Steuerelemente zur Verwaltung der Berechtigungen an einem Ort.
Die Funktion kann über Bubblewrap hinzugefügt werden. Da dadurch zusätzliche Abhängigkeiten zum Android- sollten Sie sie nur aktivieren, wenn die Web-App die Berechtigung zur Standortbestimmung verwendet.
Optimierte Binärprogramme
Geräte mit begrenztem Speicherplatz sind in bestimmten Regionen der Welt üblich. bevorzugen häufig kleinere Anwendungen. Anwendungen, die die vertrauenswürdige Webaktivität nutzen, erzeugen kleine Binärdateien arbeiten, was diese Nutzenden weniger nervenaufreibt.
Bubblewrap wurde optimiert, indem die Liste der ben�tigten Android-Bibliotheken reduziert wurde. generierten Bin�rdateien um 800.000. In der Praxis sind das weniger als die H�lfte der vorherigen Versionen generiert wurden. Um die kleineren Bin�rdateien zu nutzen, m�ssen Sie nur mit der neuesten Version von Bubblewrap.
Vorhandene App aktualisieren
Eine von Bubblewrap generierte App besteht aus einer Webanwendung und einer zum �ffnen der PWA an. Auch wenn die PWA in einer vertrauensw�rdigen Webaktivit�t ge�ffnet wurde, wie jede Web-App aktualisiert wird, kann und sollte der native Wrapper aktualisiert werden.
Sie sollten Ihre App aktualisieren, um sicherzustellen, dass sie die neueste Version des Wrappers mit der aktuellen
Fehlerkorrekturen und Funktionen. Ist die neueste Version von Bubblewrap installiert, f�hrt der Befehl update zum
Wenden Sie die neueste Version des Wrappers auf ein vorhandenes Projekt an:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Ein weiterer Grund f�r die Aktualisierung dieser Apps besteht darin, sicherzustellen, dass die �nderungen am Web Manifest
auf die Anwendung angewendet. Verwenden Sie dazu den neuen merge-Befehl:
bubblewrap merge
bubblewrap update
bubblewrap build
Aktualisierung der Qualit�tskriterien
Mit Chrome 86 wurden �nderungen an den Qualit�tskriterien f�r vertrauensw�rdige Webaktivit�ten eingef�hrt. Diese sind im finden Sie unter �nderungen an den Qualit�tskriterien f�r PWAs, die vertrauensw�rdige Webaktivit�ten verwenden.
Eine kurze Zusammenfassung ist, dass Sie sicherstellen sollten, dass Ihre Anwendungen die folgenden Szenarien verhindern, dass sie abst�rzen:
- Digitale Asset-Links werden bei der Einf�hrung der App nicht verifiziert
- Bei einer Anfrage f�r eine Offline-Netzwerkressource wird der HTTP-Statuscode 200 nicht zur�ckgegeben.
- Ausgabe des HTTP-Fehlers 404 oder 5xx in der Anwendung
Au�erdem wird gepr�ft, ob die Anwendung die Validierung f�r Digital Asset Links besteht, die verbleibenden Szenarien k�nnen von einem Service Worker verarbeitet werden:
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;
}
Bei der Nutzung von Service Workern werden die Best Practices von Workbox angewendet und es werden Textbausteine entfernt. Alternativ k�nnen Sie f�r diese Szenarien auch ein Workbox-Plug-in verwenden:
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 Billing
Du erlaubst deiner App nicht nur, digitale Waren und Abos im Play Store zu verkaufen, Google Play Billing bietet hilfreiche Tools zum Verwalten deines Katalogs, deiner Preise und deiner Abos. Berichte und einen Bezahlvorgang über den Play Store, mit dem die Nutzer bereits vertraut sind. Es ist auch eine Voraussetzung für im Play Store veröffentlichte Apps, die digitale Waren verkaufen.
Chrome 88 wird mit einem Ursprungstest für Android gestartet, mit dem die Integration von Vertrauenswürdige Web-Aktivitäten, die Payment Request API und die Digital Goods API, um Kaufprozesse über Google Play Billing implementieren Dieser Ursprungstest wird voraussichtlich auch für ChromeOS in Version 89.
Wichtig:Die Google Play Billing API hat eine eigene Terminologie und umfasst Client- und Back-End-Komponenten. In diesem Abschnitt wird nur ein kleiner Teil der API behandelt, die für die Verwendung des Digital Goods API und vertrauenswürdige Webaktivität. Lesen Sie unbedingt die Google Play Billing-Dokumentation und die zugehörigen Konzepte vor der Integration in eine Produktionsanwendung.
Der grundlegende Ablauf
Wenn Sie digitale Waren über den Play Store anbieten möchten, müssen Sie Ihren Katalog bei Google Play konfigurieren und verknüpfen Sie den Play Store als Zahlungsmethode über Ihre PWA.
Wenn Sie bereit sind, Ihren Katalog zu konfigurieren, gehen Sie zuerst links zum Abschnitt „Produkte“ seitliches Menü in der Play Console:
Hier finden Sie die Option, Ihre bestehenden In-App-Produkte und Abos anzuzeigen, und auch finden Sie die Schaltfläche „Erstellen“, um neue hinzuzufügen.
Wenn Sie ein neues In-App-Produkt erstellen m�chten, ben�tigen Sie eine Produkt-ID, einen Namen, eine Beschreibung und einen Preis. Es ist ist wichtig, aussagekr�ftige und leicht zu merkende Produkt-IDs zu erstellen, da Sie diese sp�ter ben�tigen. k�nnen sp�ter nicht mehr ge�ndert werden.
Beim Erstellen von Abos m�ssen Sie auch einen Abrechnungszeitraum angeben. Sie haben die M�glichkeit, Listen Sie Ihre Abovorteile auf und f�gen Sie Funktionen hinzu, z. B. ob Sie eine kostenlose Testversion, eine Einf�hrungspreis, einen Kulanzzeitraum und eine Option zum erneuten Abonnieren.
Nachdem du die einzelnen Produkte erstellt hast, kannst du sie in deiner App verf�gbar machen, indem du sie aktivierst.
Sie k�nnen Ihre Produkte auch �ber die Play Developers API hinzuf�gen.
Sobald Ihr Katalog konfiguriert ist, k�nnen Sie den Bezahlvorgang �ber die PWA konfigurieren. Ich wird eine Kombination aus der Digital Goods API und der Payment Request API verwenden, um dies.
Produktpreis mit der Digital Goods API abrufen
Wenn du Google Play Billing verwendest, muss der Preis, der Nutzern angezeigt wird, mit dem Preis �bereinstimmen den Preis aus dem Store-Eintrag. Es ist unm�glich, diese Preise manuell zu synchronisieren. �ber die Digital Goods API kann die Webanwendung die zugrunde liegende Zahlung abfragen Preisanbieter:
// 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;
}
Pr�fen Sie, ob getDigitalGoodsService() die Digital Goods API unterst�tzt.
die f�r das window-Objekt verf�gbar sind.
Rufe dann window.getDigitalGoodsService() mit der Google Play Billing-ID als Parameter auf.
Dadurch wird eine Dienstinstanz f�r Google Play Billing zur�ckgegeben, auf die andere Anbieter den Support implementieren k�nnen.
f�r die Digital Goods API und haben unterschiedliche Kennzeichnungen.
Rufen Sie schlie�lich getDetails() f�r den Verweis auf das Google Play Billing-Objekt auf und �bergeben Sie die Artikelnummer f�r
das Element als Parameter angeben. Die Methode gibt ein Detailobjekt zur�ck, das sowohl den Preis als auch den
W�hrung f�r den Artikel, die dem Nutzer angezeigt werden kann.
Kaufvorgang starten
Die Payment Request API erm�glicht Kaufvorgangs im Web und wird auch f�r Google Play verwendet. Abrechnungsintegration Weitere Informationen zur Funktionsweise der Payment Request API findest du unter Funktionsweise der Payment Request API. API anfordern
Um die API mit Google Play Billing verwenden zu k�nnen, m�ssen Sie ein Zahlungsmittel hinzuf�gen,
eine unterst�tzte Methode namens https://play.google.com/billing hat und die Artikelnummer als Teil der Daten hinzuf�gen
f�r das Instrument:
const supportedInstruments = [{
supportedMethods: "https://play.google.com/billing",
data: {
sku: sku
}
}];
Erstellen Sie dann wie gewohnt ein PaymentRequest-Objekt und verwenden Sie die API wie gewohnt.
const request = new PaymentRequest(supportedInstruments, details);
Kauf best�tigen
Nach Abschluss der Transaktion m�ssen Sie die Digital Goods API verwenden, um die
Zahlung. Das Antwortobjekt von PaymentRequest enth�lt ein Token, das Sie f�r Folgendes verwenden:
best�tigen Sie die Transaktion:
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');
Die Digital Goods API und die Payment Request API haben keine Kenntnisse �ber die Identit�t des Nutzers. Als m�ssen Sie den Kauf dem Nutzer in Ihrem Backend zuordnen und sicherstellen, dass er Zugriff auf die gekauften Artikel hat. Denken Sie beim Verkn�pfen des Kaufs mit einem Nutzer daran, die Kauftoken, da du es m�glicherweise ben�tigst, um zu �berpr�fen, ob der Kauf storniert oder die Erstattung ein Abo noch aktiv ist. Sehen Sie sich die Real Time Developer Notifications API und die Die Google Play Developer API, da sie Endpunkte f�r die Bearbeitung dieser F�lle in deinem Backend bereitstellt.
Auf vorhandene Berechtigungen pr�fen
M�glicherweise hat ein Nutzer einen Gutscheincode eingelöst oder hat bereits ein Abo für Ihr Produkt. In
um zu prüfen, ob der Nutzer die erforderlichen Berechtigungen hat, kannst du die Methode
listPurchases()-Befehl für den Dienst für digitale Waren. Dadurch werden alle Käufe zurückgegeben, die
die der Kunde in Ihrer App gemacht hat. Hier können Sie auch alle nicht bestätigten
Käufe tätigen, um zu gewährleisten, dass der Nutzer seine Berechtigungen korrekt einlöst.
const purchases = await itemService.listPurchases();
for (p of purchases) {
if (!p.acknowledged) {
await itemService.acknowledge(p.purchaseToken, 'onetime');
}
}
In den ChromeOS Play Store hochladen
„Vertrauenswürdige Webaktivitäten“ sind auch seit Chrome 85 im ChromeOS Play Store verfügbar. Vorgehensweise Ihre App im Store anzubieten, ist für ChromeOS und Android identisch.
Nachdem Sie Ihr App Bundle erstellt haben, werden Sie in der Play Console durch die erforderlichen um die App im Play Store anzubieten. In der Play Console-Dokumentation finden Sie Hilfe zu Erstellen eines App-Eintrags, Verwalten Ihrer APK-Dateien und anderer Einstellungen sowie einer Anleitung um deine App zu testen und sicher zu ver�ffentlichen.
Wenn Sie Ihre Anwendung auf Chromebooks beschr�nken m�chten, f�gen Sie bei der Initialisierung das Flag --chromeosonly hinzu
der Anwendung in Bubblewrap:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Wenn Sie Ihre Anwendung manuell ohne Bubblewrap erstellen, f�gen Sie Ihremuses-feature
Android-Manifest:
<uses-feature android:name="org.chromium.arc" android:required="true"/>
Wenn Ihr Eintrag mit einer Android-App geteilt wird, hat die reine ChromeOS-Paketversion immer h�her als die Android-App-Paketversion ist. Sie k�nnen die ChromeOS-Bundle-Version auf einer viel h�her als die Android-Version, sodass ihr nicht beide Versionen mit jedem aktualisieren m�sst. Ver�ffentlichung.