Desde que se presentó la Actividad web de confianza el año pasado, el equipo de Chrome sigue trabajando en la para facilitar su uso con Bubblewrap y agregar funciones nuevas, como la próxima Integración de facturación y permite que funcione en más plataformas, como ChromeOS En este artículo, Resume las actualizaciones más recientes y futuras de Trusted Web Activity.
Nuevas funciones de Bubblewrap y Actividad web de confianza
Bubblewrap te ayuda a crear apps que inician tus AWP en una actividad web de confianza, sin necesidad de que requieren conocimientos sobre herramientas específicas de la plataforma.
Flujo de configuración simplificado
Antes, para usar Bubblewrap, se debía configurar Java Development Kit y la app de Android en el SDK, ya que son propensos a errores. La herramienta ahora ofrece descargar automáticamente el archivo las dependencias cuando se ejecutan por primera vez.
Aún puedes optar por usar una instalación existente de las dependencias, si así lo prefieres.
y el nuevo comando doctor ayuda a encontrar problemas y recomienda correcciones para la configuración, lo que puede
ahora se actualizará desde la línea de comandos con el comando updateConfig.
Asistente mejorado
Cuando se crea un proyecto con init, Bubblewrap necesita información para generar la app para Android. El
La herramienta extrae valores del manifiesto de apps web y proporciona valores predeterminados siempre que sea posible.
Puedes cambiar esos valores cuando creas un proyecto nuevo, pero antes el significado de cada campo no estaba claro. Los diálogos de inicialización se volvieron a compilar con mejores descripciones y validación para cada uno. campo de entrada.
pantalla: compatibilidad con pantalla completa y orientación
En algunos casos, es posible que desees que tu aplicación use la mayor cantidad posible de la pantalla y, cuando
compilando AWP, esto se implementa configurando el campo display del manifiesto de la app web como
fullscreen
Cuando Bubblewrap detecte la opción de pantalla completa en el manifiesto de apps web, configurará la app de Android que también se inicie en pantalla completa, o en modo envolvente, en términos específicos de Android.
El campo orientation del manifiesto de apps web define si la aplicación debe iniciarse en
vertical, horizontal o con la orientación que use el dispositivo en ese momento. Envoltorio de burbujas ahora
Lee el campo del manifiesto de apps web y lo usa como opción predeterminada cuando creas la app para Android.
Puedes personalizar ambas opciones de configuración como parte del flujo de bubblewrap init.
Salida de AppBundles
Los paquetes de aplicaciones son un formato de publicación para apps que delega la generación final del APK y accediendo a Play. En la práctica, esto permite entregar archivos más pequeños a los usuarios cuando descargan el desde la tienda.
Bubblewrap ahora empaqueta la aplicación como un paquete de aplicación, en un archivo llamado
app-release-bundle.aab Debes optar por este formato cuando publiques apps en Play Store
ya que la tienda lo requerirá a partir de la segunda mitad de 2021.
Delegación de ubicación geográfica
Los usuarios esperan que las aplicaciones instaladas en sus dispositivos se comporten de forma coherente, independientemente de en la nube. Cuando se usa en una actividad web de confianza, el permiso GeoLocation ahora puede delegados al sistema operativo y, cuando se habiliten, los usuarios verán los mismos diálogos que las apps creadas con Kotlin o Java, y buscar controles para administrar el permiso en el mismo lugar.
La función se puede agregar con Bubblewrap y, como agrega dependencias adicionales a la versión solo debes habilitarlo cuando la app web use el permiso de ubicación geográfica.
Objetos binarios optimizados
Los dispositivos con almacenamiento limitado son comunes en ciertas áreas del mundo, y los propietarios de esos dispositivos prefieren aplicaciones más pequeñas. Las aplicaciones que usan Trusted Web Activity producen binarios, lo que quita parte de la ansiedad de esos usuarios.
Se optimizó Bubblewrap reduciendo la lista de bibliotecas de Android necesarias, lo que generó binarios generados que son 800,000 más pequeños. En la práctica, eso es menos de la mitad del tamaño promedio generados por versiones anteriores. Para aprovechar los objetos binarios más pequeños, solo debes actualizar tu app con la versión más reciente de Bubblewrap.
Cómo actualizar una app existente
Una aplicación generada por Bubblewrap se compone de una aplicación web y un dispositivo Android ligero wrapper que abre la AWP. Si bien la AWP abierta dentro de una actividad web de confianza sigue la los mismos ciclos de actualización que cualquier aplicación web, el wrapper nativo puede y debe actualizarse.
Debes actualizar tu app para asegurarte de que use la versión más reciente del wrapper
correcciones de errores y funciones. Con la última versión de Bubblewrap instalada, el comando update hará lo siguiente:
Aplica la última versión del wrapper a un proyecto existente:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Otra razón para actualizar esas aplicaciones es asegurarse de que los cambios en el manifiesto web se
que se aplica a la aplicación. Para ello, usa el nuevo comando merge:
bubblewrap merge
bubblewrap update
bubblewrap build
Actualizaciones de los criterios de calidad
Chrome 86 introdujo cambios en los criterios de calidad de la actividad web de confianza, que se explican en consulta completa en Cambios en los criterios de calidad para AWP que utilizan actividad web confiable.
Para resumir, debe asegurarse de que sus aplicaciones manejen las siguientes situaciones para evitar que fallen:
- Error al verificar los vínculos de recursos digitales cuando se inicia la aplicación
- No se pudo mostrar HTTP 200 para una solicitud de recurso de red sin conexión
- Muestra un error HTTP 404 o 5xx en la aplicación.
Además de garantizar que la aplicación apruebe la validación de Vínculos de recursos digitales, el resto de los recursos un service worker puede controlar las siguientes situaciones:
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 incluye prácticas recomendadas y quita el código estándar cuando se usan service workers. Como alternativa, considera usar un complemento de Workbox para manejar esas situaciones:
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,
});
}
}
Facturación Google Play
Además de permitir que la app venda artículos digitales y suscripciones en Play Store, La Facturación Google Play ofrece herramientas útiles para administrar el catálogo, los precios y las suscripciones, y un flujo de confirmación de la compra con la tecnología de Play Store que los usuarios ya conocen. Integra también es un requisito para las aplicaciones publicadas en Play Store que venden artículos digitales.
Chrome 88 se lanzará con una prueba de origen en Android que permite la integración de Trusted Web Activities, la Payment Request API y la Digital Goods API para implementar flujos de compra a través de la Facturación Google Play Esperamos que esta prueba de origen también esté disponible para ChromeOS en la versión 89.
Importante: La API de Facturación Google Play tiene su propia terminología y, además, incluye datos de clientes los componentes de backend. Esta sección abarca solo una pequeña parte de la API que es específica para el uso de la API API de Digital Goods y Trusted Web Activity. Asegúrate de leer el documentación de Facturación Google Play y comprende sus conceptos antes de integrarla en un aplicación de producción.
El flujo básico
Para proporcionar artículos digitales a través de Play Store, deberás configurar tu catálogo en Play Store y conecta Play Store como forma de pago desde tu AWP.
Cuando tengas todo listo para configurar tu catálogo, busca la sección Productos en el lado izquierdo. menú lateral en Play Console:
Aquí encontrarás la opción para ver tus productos integrados en la aplicación y suscripciones, y también busca el botón Crear para agregar nuevos.
Para crear un nuevo producto integrado en la aplicación, necesitarás un ID, un nombre, una descripción y un precio. Es importante crear IDs de productos significativos y fáciles de recordar, los necesitarás más adelante, además de los IDs no se pueden cambiar una vez que se crean.
Cuando crees suscripciones, también deberás especificar un período de facturación. Tienes la opción de indicar los beneficios de tu suscripción y agregar características como si tienes una prueba gratuita, un un precio de lanzamiento, un período de gracia y la opción de volver a suscribirse.
Después de crear cada producto, actívalos para que estén disponibles en la app.
Si lo prefieres, puedes agregar tus productos mediante la API de Play Developers.
Una vez que tu catálogo esté configurado, el siguiente paso es configurar el flujo de confirmación de la compra desde la AWP. Tú utilizará una combinación de Digital Goods API y Payment Request API para lograr lo siguiente: esto.
Recupera el precio de un producto con la API de Digital Goods
Cuando uses la Facturación Google Play, asegúrate de que el precio que se muestra a los usuarios coincida el precio de la ficha de Play Store. Sería imposible mantener sincronizados manualmente esos precios, por lo que la API de Artículos Digitales proporciona una forma para que la aplicación web consulte el pago proveedor de precios:
// 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;
}
Para detectar la compatibilidad con la API de Digital Goods, verifica que getDigitalGoodsService() sea
disponibles en el objeto window.
Luego, llama a window.getDigitalGoodsService() con el identificador de la Facturación Google Play como parámetro.
Se mostrará una instancia de servicio para la Facturación Google Play y otros proveedores podrán implementar la asistencia.
para la API de Artículos Digitales y tendrá distintos identificadores.
Por último, llama a getDetails() en la referencia al objeto de la Facturación Google Play y pasa el SKU
el elemento como parámetro. El método mostrará un objeto de detalles que contiene el precio y el
moneda del artículo que se puede mostrar al usuario.
Inicia el flujo de compra
La API de Payment Request habilita los flujos de compra en la Web y también se usa para Google Play Integración de facturación. Consulte Cómo funciona la API de Payment Request para obtener más información si es la primera vez que usa Payment API de solicitud.
Para usar la API con la Facturación Google Play, deberás agregar un instrumento de pago que
tenga un método compatible llamado https://play.google.com/billing y agregue el SKU como parte de los datos
para el instrumento:
const supportedInstruments = [{
supportedMethods: "https://play.google.com/billing",
data: {
sku: sku
}
}];
Luego, compila un objeto PaymentRequest como de costumbre y usa la API como de costumbre.
const request = new PaymentRequest(supportedInstruments, details);
Cómo confirmar la compra
Una vez que se haya completado la transacción, tendrá que usar la API de Digital Goods para aceptar el
pagos. El objeto de respuesta de PaymentRequest contendrá un token que usarás para lo siguiente:
confirmar la transacción:
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');
La API de Digital Goods y la API de Payment Request no tienen conocimiento de la identidad del usuario. Como resultado, depende de ti asociar la compra con el usuario en tu backend y asegurarte de que acceso a los artículos comprados. Cuando asocies la compra con un usuario, recuerda guardar la token de compra, ya que lo necesitarás para verificar si la compra se canceló o reembolsó, o si una suscripción sigue activa. Consulta la API de notificaciones para desarrolladores en tiempo real y la API de Google Play Developer, ya que proporcionan extremos para manejar esos casos en tu backend.
Cómo verificar los derechos existentes
Es posible que un usuario haya canjeado un código promocional o tenga una suscripción existente a tu producto. En
para validar que el usuario tenga los derechos adecuados, puedes llamar al
Comando listPurchases() en el servicio de artículos digitales De esta forma, se devolverán todas las compras que
cliente hizo en tu app. Este también es el lugar para reconocer cualquier
compras para garantizar que el usuario canjee correctamente sus derechos.
const purchases = await itemService.listPurchases();
for (p of purchases) {
if (!p.acknowledged) {
await itemService.acknowledge(p.purchaseToken, 'onetime');
}
}
Sube el contenido a Play Store de ChromeOS
A partir de Chrome 85, también está disponible Trusted Web Activities en Play Store de ChromeOS. El proceso para publicar tu app en la tienda es lo mismo para ChromeOS y Android.
Una vez que hayas creado el paquete de aplicación, Play Console te guiará por los pasos para publicar la app en Play Store. En la documentación de Play Console, puedes encontrar ayuda para lo siguiente: Crea tu ficha de la app, administra los archivos APK y otros parámetros de configuración, así como las instrucciones. para probar y lanzar tu app de forma segura.
Para restringir tu aplicación solo a Chromebooks, agrega la marca --chromeosonly cuando lo inicialices.
la aplicación en Bubblewrap:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Cuando compiles tu aplicación de forma manual, sin Bubblewrap, agrega una marca uses-feature a tu
Manifiesto de Android:
<uses-feature android:name="org.chromium.arc" android:required="true"/>
Si compartes tu ficha con una app para Android, la versión del paquete exclusivo de ChromeOS siempre tendrá ser superior a la versión del paquete de la aplicación de Android. Puedes configurar la versión del paquete de ChromeOS en un un número mucho mayor que la versión de Android, por lo que no tienes que actualizar ambas versiones con cada lanzamiento.