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 Web-Aktivitä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 Initialisierungsdialoge 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 Anwendung
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 im Store 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 dieselben 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 erstellen. Dadurch werden diese Nutzenden weniger beunruhigt.
Bubblewrap wurde optimiert, indem die Liste der erforderlichen 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 einem Wrapper 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 muss sichergestellt werden, dass 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 sollte ebenfalls verfügbar sein 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 Dokumentation zu Google Play Billing und die zugehörigen Konzepte vor der Einbindung 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. kann nach dem Erstellen 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 Sie die einzelnen Produkte erstellt haben, können Sie sie in Ihrer App verfügbar machen, indem Sie sie aktivieren.
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 und andere Anbieter können den Support implementieren
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 SKU 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 unbestätigte
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 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 als die Android-App-Paketversion. Sie können die ChromeOS-Bundle-Version auf einer viel höher als die Android-Version, sodass ihr nicht beide Versionen mit jedem Veröffentlichung.