Da quando è stata introdotta l'Attività web attendibile lo scorso anno, il team di Chrome continua a lavorare sulla prodotto, semplificando l'utilizzo con il pluriball e con l'aggiunta di nuove funzionalità come l'imminente Google Play Integrazione della fatturazione e possibilità di funzionare su più piattaforme, come ChromeOS. In questo articolo riassume gli aggiornamenti più recenti e imminenti per l'Attività web attendibile.
Nuove funzionalità per il pluriball e l'Attività web attendibile
Il wrapping ti aiuta a creare app che avviano le tue PWA all'interno di un'attività web attendibile, senza richiedono la conoscenza degli strumenti specifici della piattaforma.
Flusso di configurazione semplificato
In precedenza, l'utilizzo di Bubblewrap richiedeva la configurazione manuale di Java Development Kit e di Android SDK, entrambi soggetti a errori. Lo strumento ora offre di scaricare automaticamente i file quando eseguite per la prima volta.
Puoi comunque scegliere di utilizzare un'installazione esistente delle dipendenze, se preferisci,
e il nuovo comando doctor aiuta a individuare i problemi e consiglia le correzioni della configurazione, che possono
ora può essere aggiornato dalla riga di comando utilizzando il comando updateConfig.
Procedura guidata migliorata
Quando crei un progetto con init, Bubblewrap ha bisogno di informazioni per generare l'app per Android. La
estrae i valori dal file manifest dell'app web e fornisce i valori predefiniti, se possibile.
Puoi modificare questi valori durante la creazione di un nuovo progetto, ma in precedenza il significato di ogni campo non era chiaro. Le finestre di dialogo di inizializzazione sono state ricreate con descrizioni e convalida migliori per ogni campo di immissione.
display: schermo intero e supporto orientamento
In alcuni casi potresti voler utilizzare la maggior quantità di schermo possibile per l'applicazione e, quando
creando PWA, questa funzionalità viene implementata impostando il campo display del file manifest dell'app web su
fullscreen.
Quando il Bubble wrap rileva l'opzione a schermo intero nel file manifest dell'app web, configura la schermata per l'avvio a schermo intero o in modalità immersiva nei termini specifici di Android.
Il campo orientation del file manifest dell'app web definisce se l'applicazione deve essere avviata in
in modalità verticale, orizzontale o nell'orientamento del dispositivo attualmente in uso. Riquadro a bolle ora
legge il campo Manifest dell'app web e lo utilizza come impostazione predefinita durante la creazione dell'app per Android.
Puoi personalizzare entrambe le configurazioni nell'ambito del flusso bubblewrap init.
Output AppBundles
Gli app bundle sono un formato di pubblicazione per le app che delega la generazione finale degli APK e accede a Play. In pratica, ciò consente di offrire agli utenti file più piccoli durante il download lo store.
Bubblewrap ora pacchettizza l'applicazione come app bundle, in un file denominato
app-release-bundle.aab. Questo formato è preferibile per la pubblicazione di app sul Play Store
in quanto sarà richiesto dal negozio a partire dalla seconda metà del 2021.
Delega di geolocalizzazione
Gli utenti si aspettano che le applicazioni installate sui loro dispositivi si comportino in modo coerente, indipendentemente tecnologia. Quando è utilizzata all'interno di un'attività web attendibile, ora l'autorizzazione GeoLocation può essere delegato al sistema operativo e, se questa opzione è attiva, gli utenti vedranno le stesse finestre di dialogo delle app con Kotlin o Java e trovare i controlli per gestire l'autorizzazione dallo stesso posto.
La funzionalità può essere aggiunta tramite Bubblewrap e, poiché aggiunge ulteriori dipendenze al componente devi abilitarlo solo quando l'app web utilizza l'autorizzazione di geolocalizzazione.
Programmi binari ottimizzati
I dispositivi con spazio di archiviazione limitato sono comuni in alcune aree del mondo e i proprietari di questi dispositivi spesso preferiscono applicazioni più piccole. Le applicazioni che utilizzano l'Attività web attendibile producono file binari, che elimina un po' dell'ansia da questi utenti.
Il bubble wrap è stato ottimizzato riducendo l'elenco delle librerie Android necessarie, con conseguente e generati binari di dimensioni inferiori di 800 kB. In pratica, meno della metà delle dimensioni medie generati dalle versioni precedenti. Per sfruttare i file binari più piccoli, devi solo aggiornare utilizzando l'ultima versione di Bubble wrap.
Aggiornare un'app esistente
Un'applicazione generata da Bubblewrap è composta da un'applicazione web e da un dispositivo Android leggero wrapper che apre la PWA. Anche se la PWA è stata aperta all'interno di un'attività web attendibile segue gli stessi cicli di aggiornamento di qualsiasi app web, il wrapper nativo può e deve essere aggiornato.
Devi aggiornare l'app per assicurarti che utilizzi la versione più recente del wrapper, con la più recente
correzioni di bug e funzionalità. Una volta installata la versione più recente di Bubblewrap, il comando update
Applica la versione più recente del wrapper a un progetto esistente:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Un altro motivo per aggiornare queste applicazioni è garantire che le modifiche al file manifest web vengano
applicati all'applicazione. A questo scopo, utilizza il nuovo comando merge:
bubblewrap merge
bubblewrap update
bubblewrap build
Aggiornamenti ai criteri di qualità
Chrome 86 ha introdotto delle modifiche ai criteri di qualità dell'Attività web attendibile, spiegate in in Modifiche ai criteri di qualità per le PWA che utilizzano Attività web attendibili.
Riassumendo, devi assicurarti che le tue applicazioni gestiscano gli scenari seguenti per per evitare l'arresto anomalo:
- Mancata verifica dei link degli asset digitali al momento del lancio dell'applicazione
- Impossibile restituire HTTP 200 per una richiesta di risorse di rete offline
- Restituzione di un errore HTTP 404 o 5xx nell'applicazione.
Oltre a garantire che la richiesta superi la convalida di Digital Asset Links, i restanti dei servizi possono essere gestiti da un 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 integra le best practice e rimuove il boilerplate quando viene utilizzato il personale di servizio. In alternativa, valuta l'utilizzo di un plug-in Workbox per gestire questi scenari:
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,
});
}
}
Fatturazione Google Play
Oltre a consentire alla tua app di vendere abbonamenti e prodotti digitali sul Play Store, Fatturazione Google Play offre strumenti per la gestione del catalogo, dei prezzi e degli abbonamenti, e un flusso di pagamento basato sul Play Store che i tuoi utenti conoscono già. it è inoltre un requisito per le applicazioni pubblicate sul Play Store che vendono prodotti digitali.
Chrome 88 verrà lanciato con una prova dell'origine su Android che consente l'integrazione Attività web attendibili, l'API Payment Request e l'API Digital Goods per implementare i flussi di acquisto tramite Fatturazione Google Play. Prevediamo che sia disponibile anche questa prova dell'origine per ChromeOS versione 89.
Importante: l'API Fatturazione Google Play ha una propria terminologia e include client e di backend. Questa sezione riguarda solo una piccola parte dell'API specifica per l'utilizzo API Digital Goods e attività web affidabile. Assicurati di leggere documentazione relativa alla Fatturazione Google Play e comprenderne i concetti prima di integrarla in un per applicazioni di produzione.
Il flusso di base
Per fornire prodotti digitali tramite il Play Store, dovrai configurare il tuo catalogo su Play Store e collegare il Play Store come metodo di pagamento dalla tua PWA.
Quando è tutto pronto per configurare il catalogo, cerca la sezione Prodotti a sinistra menu laterale a mano su Play Console:
Qui troverai l'opzione per visualizzare i tuoi prodotti e abbonamenti in-app esistenti, oltre a trovare il pulsante Crea per aggiungerne di nuovi.
Per creare un nuovo prodotto in-app ti serviranno un ID prodotto, un nome, una descrizione e un prezzo. È è importante creare ID prodotto significativi e facili da ricordare, ti serviranno in seguito e gli ID non può essere modificato dopo averlo creato.
Quando crei abbonamenti dovrai anche specificare un periodo di fatturazione. Hai la possibilità di elencare i vantaggi dell'abbonamento e aggiungere funzionalità come la possibilità di usufruire di una prova senza costi, prezzo di lancio, un periodo di tolleranza e un'opzione per riabbonarti.
Dopo aver creato ciascun prodotto, rendili disponibili dalla tua app attivandoli.
Se preferisci, puoi aggiungere i tuoi prodotti tramite l'API Play Developers.
Una volta configurato il catalogo, il passaggio successivo è configurare il flusso di pagamento dalla PWA. Tu utilizzerà una combinazione dell'API Digital Goods e dell'API Payment Request per questo.
Recuperare il prezzo di un prodotto con l'API Digital Goods
Quando usi Fatturazione Google Play, vuoi assicurarti che il prezzo mostrato agli utenti corrisponda il prezzo indicato nella scheda dello Store. Mantenere sincronizzati manualmente i prezzi sarebbe impossibile, quindi l'API Digital Goods consente all'applicazione web di eseguire query sul pagamento sottostante fornitore per i prezzi:
// 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;
}
Puoi rilevare l'assistenza per l'API Digital Goods controllando se getDigitalGoodsService() è
disponibili nell'oggetto window.
Quindi chiama window.getDigitalGoodsService() con l'identificatore di fatturazione Google Play come parametro.
Verrà restituita un'istanza di servizio per Fatturazione Google Play e altri fornitori possono implementare l'assistenza
per l'API Digital Goods e avranno identificatori diversi.
Infine, chiama getDetails() sul riferimento all'oggetto Fatturazione Google Play che trasmette lo SKU per
l'elemento come parametro. Il metodo restituisce un oggetto details contenente sia il prezzo sia il valore
valuta per l'articolo che può essere visualizzata dall'utente.
Avvia il flusso di acquisto
L'API Payment Request consente i flussi di acquisto sul web ed è utilizzata anche per Google Play Integrazione della fatturazione. Consulta Come funziona l'API Payment Request per saperne di più se non hai mai utilizzato l'API Payment Request API di richiesta.
Per utilizzare l'API con Fatturazione Google Play dovrai aggiungere uno strumento di pagamento che
ha un metodo supportato denominato https://play.google.com/billing e aggiungi lo SKU come parte dei dati
per lo strumento:
const supportedInstruments = [{
supportedMethods: "https://play.google.com/billing",
data: {
sku: sku
}
}];
Poi, crea un oggetto PaymentRequest come di consueto e utilizza l'API come di consueto
const request = new PaymentRequest(supportedInstruments, details);
Conferma l'acquisto
Una volta completata la transazione, dovrai utilizzare l'API Digital Goods per confermare
pagamento. L'oggetto risposta da PaymentRequest conterrà un token che utilizzerai per
conferma la transazione:
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');
L'API Digital Goods e l'API Payment Request non conoscono l'identità dell'utente. Come spetta a te associare l'acquisto all'utente nel tuo backend e assicurarti che abbia agli articoli acquistati. Quando associ l'acquisto a un utente, ricordati di salvare il token di acquisto, in quanto potresti averne bisogno per verificare se l'acquisto è stato annullato o rimborsato un abbonamento è ancora attivo. Scopri l'API Real Time Developer Notifications e API Google Play Developer in quanto forniscono endpoint per la gestione di queste richieste nel backend.
Verificare la presenza di diritti esistenti
Un utente potrebbe aver utilizzato un codice promozionale o avere un abbonamento esistente al tuo prodotto. Nella
per verificare che l'utente disponga dei diritti appropriati, puoi chiamare il metodo
Comando listPurchases() sul servizio di prodotti digitali. Verranno restituiti tutti gli acquisti
che un cliente ha fatto nella tua app. In questa sezione è inoltre possibile prendere atto di qualsiasi
acquisti per assicurarsi che l'utente utilizzi correttamente i propri diritti.
const purchases = await itemService.listPurchases();
for (p of purchases) {
if (!p.acknowledged) {
await itemService.acknowledge(p.purchaseToken, 'onetime');
}
}
Carica sul Play Store di ChromeOS
Le attività web attendibili sono disponibili anche a partire da Chrome 85 nel Play Store di ChromeOS. Il processo per elencare la tua app nello store è la stessa per ChromeOS che per Android.
Una volta creato l'app bundle, Play Console ti guiderà nella procedura richiesta passaggi per elencare l'app sul Play Store. Nella documentazione di Play Console puoi trovare assistenza per: creare la scheda dell'app, gestire i file apk e altre impostazioni e le istruzioni per testare e rilasciare in sicurezza la tua app.
Per limitare l'applicazione solo ai Chromebook, aggiungi il flag --chromeosonly durante l'inizializzazione
l'applicazione in Bubblewrap:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Quando crei manualmente l'applicazione, senza Bubblewrap, aggiungi un flag uses-feature alla tua
File manifest Android:
<uses-feature android:name="org.chromium.arc" android:required="true"/>
Se la tua scheda è condivisa con un'app per Android, la versione del pacchetto solo ChromeOS avrà sempre sia superiore alla versione del pacchetto app Android. Puoi configurare la versione del bundle ChromeOS su un di gran lunga superiore rispetto alla versione di Android, quindi non è necessario aggiornare entrambe le versioni .