Опубликовано 2 декабря 2020 г.
С момента появления Trusted Web Activity команда Chrome упростила использование этой технологии с помощью Bubblewrap. Мы добавили дополнительные функции, такие как интеграция с Google Play Платежами, и обеспечили поддержку большего количества платформ, например ChromeOS.
Функции Bubblewrap и Trusted Web Activity
Bubblewrap помогает создавать приложения, которые запускают ваши PWA в Trusted Web Activity, без необходимости знания инструментов, специфичных для платформы.
Упрощенная настройка
Раньше для использования Bubblewrap требовалось вручную настраивать Java Development Kit и Android SDK, что часто приводило к ошибкам. Теперь при первом запуске инструмент предлагает автоматически скачать внешние зависимости.
Вы по-прежнему можете использовать существующие зависимости. Новая команда doctor помогает находить проблемы и рекомендует исправления конфигурации, которую теперь можно обновить из командной строки с помощью команды updateConfig.
Улучшенный мастер
При создании проекта с помощью init Bubblewrap требуется информация для создания приложения Android. Инструмент извлекает значения из манифеста веб-приложения и по возможности предоставляет значения по умолчанию.
Вы можете изменить эти значения при создании нового проекта, но ранее значение каждого поля было неясным. Диалоговые окна инициализации были переработаны: теперь в них есть более подробные описания и проверка для каждого поля ввода.
Поддержка полноэкранного режима и ориентации экрана
В некоторых случаях может потребоваться, чтобы приложение занимало как можно большую часть экрана. При создании PWA это реализуется путем установки для поля display в манифесте веб-приложения значения fullscreen.
Когда Bubblewrap обнаруживает параметр fullscreen в манифесте веб-приложения, он настраивает приложение Android так, чтобы оно также запускалось в полноэкранном режиме, или режиме погружения, если использовать терминологию Android.
Поле orientation в манифесте веб-приложения определяет, должно ли приложение запускаться в портретном или альбомном режиме или в режиме, который сейчас используется на устройстве. Теперь Bubblewrap считывает поле манифеста веб-приложения и использует его по умолчанию при создании приложения для Android.
Обе конфигурации можно настроить в рамках процесса bubblewrap init.
Выходные данные AppBundles
Наборы App Bundle – это формат публикации приложений, при котором создание и подписание APK-файлов делегируется Google Play. Это позволяет пользователям скачивать из магазина файлы меньшего размера.
Bubblewrap упакует приложение в набор App Bundle в файле app-release-bundle.aab. Рекомендуем использовать этот формат при публикации приложений в Google Play, поскольку с 2021 года он является обязательным.
Делегирование геолокации
Пользователи ожидают, что приложения, установленные на их устройствах, будут работать стабильно, независимо от используемой технологии. При использовании в Trusted Web Activity разрешение GeoLocation теперь можно делегировать операционной системе. Если оно включено, пользователи видят те же диалоговые окна, что и в приложениях, созданных с помощью Kotlin или Java, и могут управлять разрешением в том же месте.
Эту функцию можно добавить с помощью Bubblewrap. Поскольку она добавляет дополнительные зависимости в проект Android, ее следует включать, только когда веб-приложение использует разрешение на геолокацию.
Оптимизированные двоичные файлы
Устройства с ограниченным объемом памяти распространены в некоторых регионах мира, и их владельцы часто предпочитают приложения меньшего размера. Приложения, использующие Trusted Web Activity, создают небольшие двоичные файлы, что устраняет некоторые опасения пользователей.
Мы оптимизировали Bubblewrap, сократив список необходимых библиотек Android. В результате размер сгенерированных двоичных файлов уменьшился на 800 КБ. На практике это меньше половины среднего размера, генерируемого предыдущими версиями. Чтобы воспользоваться преимуществами меньших двоичных файлов, вам нужно только обновить приложение, используя последнюю версию Bubblewrap.
Как обновить существующее приложение
Приложение, созданное с помощью Bubblewrap, состоит из веб-приложения и облегченной оболочки Android, которая открывает PWA. Хотя прогрессивное веб-приложение, открытое в Trusted Web Activity, обновляется так же, как и любое другое веб-приложение, нативную оболочку можно и нужно обновлять.
Обновите приложение, чтобы в нем использовалась последняя версия оболочки с новейшими функциями и исправлениями ошибок. Если у вас установлена последняя версия Bubblewrap, то команда update применит последнюю версию оболочки к существующему проекту.
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Ещё одна причина обновить эти приложения – убедиться, что изменения в манифесте веб-приложения применены к приложению. Для этого используйте новую команду merge:
bubblewrap merge
bubblewrap update
bubblewrap build
Обновление критериев качества
В Chrome 86 были изменены критерии качества Trusted Web Activity. Подробнее об этом рассказывается в статье Изменения в критериях качества для PWA, использующих Trusted Web Activity.
Если кратко, то вам нужно убедиться, что ваши приложения обрабатывают следующие сценарии, чтобы предотвратить сбои:
- Не удалось проверить связь цифровых объектов при запуске приложения.
- Не возвращается код HTTP 200 для запроса офлайн-ресурса.
- Возврат ошибки HTTP 404 или 5xx в приложении.
Помимо проверки того, что приложение проходит проверку Digital Asset Links, остальные сценарии могут обрабатываться сервис-воркером:
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 включает в себя рекомендации и удаляет шаблонный код при использовании сервисных скриптов. Вы также можете использовать плагин 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,
});
}
}