Yayınlanma tarihi: 2 Aralık 2020
Güvenilir Web Etkinliği kullanıma sunulduktan sonra Chrome ekibi, Bubblewrap ile kullanımını kolaylaştırdı. Google Play Faturalandırma entegrasyonu gibi ek özellikler ekledik ve ChromeOS gibi daha fazla platformda çalışmasını sağladık.
Bubblewrap ve Güvenilir Web Etkinliği özellikleri
Bubblewrap, platforma özgü araç bilgisine ihtiyaç duymadan PWA'larınızı Güvenilir Web Etkinliği içinde başlatan uygulamalar oluşturmanıza yardımcı olur.
Basitleştirilmiş kurulum akışı
Daha önce Bubblewrap'ı kullanmak için Java Development Kit ve Android SDK'yı manuel olarak ayarlamanız gerekiyordu. Bu işlemler hatalara yol açıyordu. Araç artık ilk kez çalıştırıldığında harici bağımlılıkları otomatik olarak indirmeyi teklif ediyor.
İsterseniz bağımlılıkların mevcut kurulumunu kullanmaya devam edebilirsiniz. Yeni doctor komutu, sorunları bulmanıza yardımcı olur ve yapılandırmada düzeltmeler önerir. Bu yapılandırma, artık updateConfig komutu kullanılarak komut satırından güncellenebilir.
İyileştirilmiş sihirbaz
init ile proje oluştururken Bubblewrap'ın Android uygulamasını oluşturmak için bilgiye ihtiyacı vardır. Bu araç, Web Uygulama Manifesti'nden değerleri ayıklayıp mümkün olduğunda varsayılan değerleri sağlar.
Yeni bir proje oluştururken bu değerleri değiştirebilirsiniz ancak daha önce her alanın anlamı net değildi. İlk başlatma iletişim kutuları, her giriş alanı için daha iyi açıklamalar ve doğrulama ile yeniden oluşturuldu.
Tam ekran ve yön desteğini görüntüleme
Bazı durumlarda, uygulamanızın ekranın mümkün olduğunca büyük bir bölümünü kullanmasını isteyebilirsiniz. PWA'lar oluşturulurken bu, Web Uygulama Manifesti'ndeki display alanının fullscreen olarak ayarlanmasıyla uygulanır.
Bubblewrap, web uygulaması manifest'inde tam ekran seçeneğini algıladığında Android uygulamasını tam ekranda veya Android'e özgü terimlerle tam sayfa modunda da başlatılacak şekilde yapılandırır.
Web uygulaması manifest'indeki orientation alanı, uygulamanın dikey modda, yatay modda veya cihazın o anda kullandığı yönde başlatılıp başlatılmayacağını tanımlar. Bubblewrap artık web uygulaması manifest alanını okur ve Android uygulamasını oluştururken varsayılan olarak kullanır.
Her iki yapılandırmayı da bubblewrap init akışı kapsamında özelleştirebilirsiniz.
AppBundles Çıktısı
App Bundles, nihai APK oluşturma ve imzalama işlemini Play'e delege eden uygulamalar için bir yayınlama biçimidir. Bu, uygulama mağazadan indirilirken kullanıcılara daha küçük dosyalar sunulmasını sağlar.
Bubblewrap artık uygulamayı app-release-bundle.aab adlı bir dosyada App Bundle olarak paketliyor. 2021'den itibaren mağaza tarafından zorunlu kılındığı için Play Store'da uygulama yayınlarken bu biçimi tercih etmeniz gerekir.
Coğrafi konum yetkisi verme
Kullanıcılar, cihazlarına yüklenen uygulamaların teknolojiden bağımsız olarak tutarlı şekilde davranmasını bekler. GeoLocation izni, Güvenilir Web Etkinliği içinde kullanıldığında artık işletim sistemine devredilebilir. Etkinleştirildiğinde kullanıcılar, Kotlin veya Java ile oluşturulan uygulamalardakiyle aynı iletişim kutularını görür ve izni yönetmek için kontrolleri aynı yerde bulur.
Bu özellik Bubblewrap aracılığıyla eklenebilir ve Android projesine ek bağımlılıklar eklediği için yalnızca web uygulaması Coğrafi Konum iznini kullanırken etkinleştirmeniz gerekir.
Optimize edilmiş ikili programlar
Depolama alanı sınırlı cihazlar dünyanın belirli bölgelerinde yaygındır ve bu cihazların sahipleri genellikle daha küçük uygulamaları tercih eder. Güvenilir Web Etkinliği'ni kullanan uygulamalar küçük ikili dosyalar oluşturur. Bu da kullanıcıların endişelerinin bir kısmını ortadan kaldırır.
Bubblewrap, gerekli Android kitaplıklarının listesi azaltılarak optimize edildi. Bu sayede, oluşturulan ikili dosyalar 800 bin daha küçük oldu. Pratikte bu, önceki sürümlerin oluşturduğu ortalama boyutun yarısından azdır. Daha küçük ikili dosyalardan yararlanmak için Bubblewrap'ın en son sürümünü kullanarak uygulamanızı güncellemeniz yeterlidir.
Mevcut bir uygulamayı güncelleme
Bubblewrap tarafından oluşturulan bir uygulama, bir web uygulamasından ve PWA'yı açan hafif bir Android sarmalayıcıdan oluşur. Güvenilir Web Etkinliği'nin içinde açılan PWA, herhangi bir web uygulamasıyla aynı güncelleme döngülerini izlese de yerel sarmalayıcı güncellenebilir ve güncellenmelidir.
Uygulamanızı, en son hata düzeltmelerini ve özellikleri içeren sarmalayıcının en son sürümünü kullandığından emin olacak şekilde güncellemelisiniz. Bubblewrap'ın en son sürümü yüklüyken update komutu, sarmalayıcının en son sürümünü mevcut bir projeye uygular:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Bu uygulamaları güncellemenin bir diğer nedeni de web manifest'indeki değişikliklerin uygulamaya uygulanmasını sağlamaktır. Bunun için yeni merge komutunu kullanın:
bubblewrap merge
bubblewrap update
bubblewrap build
Kalite ölçütlerinde yapılan güncellemeler
Chrome 86'da Güvenilir Web Etkinliği Kalite Kriterlerinde değişiklikler yapıldı. Bu değişiklikler Güvenilir Web Etkinliği kullanan PWA'lar (Progresif Web Uygulaması) için kalite kriterlerinde değişiklikler başlıklı makalede ayrıntılı olarak açıklanmıştır.
Özetlemek gerekirse, uygulamalarınızın kilitlenmesini önlemek için aşağıdaki senaryoları ele aldığından emin olmanız gerekir:
- Uygulamanın başlatılması sırasında dijital öğe bağlantılarının doğrulanmaması
- Çevrimdışı ağ kaynağı isteği için HTTP 200 döndürülememesi
- Uygulamada HTTP 404 veya 5xx hatası döndürülmesi.
Uygulamanın Dijital Öğe Bağlantıları doğrulamasını geçmesini sağlamanın yanı sıra, kalan senaryolar bir hizmet çalışanı tarafından ele alınabilir:
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, hizmet işçileri kullanırken en iyi uygulamaları temel alır ve standart metinleri kaldırır. Alternatif olarak, bu senaryoları yönetmek için bir Workbox eklentisi kullanabilirsiniz:
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,
});
}
}