Yayınlanma tarihi: 2 Aralık 2020
Güvenilir Web Etkinliği kullanıma sunulduğundan beri 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 özel araçlar hakkında bilgi sahibi olmanıza gerek kalmadan 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'i kullanmak için Java Development Kit ve Android SDK'nın manuel olarak ayarlanması gerekiyordu. Bu işlemler hataya açıktır. 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 bir yüklemesini kullanmayı tercih edebilirsiniz. Yeni doctor komutu, sorunları bulmaya yardımcı olur ve yapılandırmayla ilgili düzeltmeler önerir. Bu düzeltmeler artık updateConfig komutu kullanılarak komut satırından güncellenebilir.
İyileştirilmiş sihirbaz
init ile proje oluştururken Bubblewrap'in Android uygulamasını oluşturmak için bilgilere ihtiyacı vardır. Araç, değerleri web uygulaması manifestinden alır ve 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. 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önlendirme desteği görüntüleme
Bazı durumlarda uygulamanızın ekranın mümkün olduğunca büyük bir kısmını kullanmasını isteyebilirsiniz. PWA'lar oluştururken bu, web uygulaması manifest dosyasındaki display alanını fullscreen olarak ayarlayarak uygulanır.
Bubblewrap, web uygulaması manifestinde tam ekran seçeneğini algıladığında Android uygulamasını da tam ekranda veya Android'e özgü terimlerle yoğun içerik modunda başlatılacak şekilde yapılandırır.
Web uygulaması manifestindeki orientation alanı, uygulamanın dikey modda mı, yatay modda mı yoksa cihazın o anda kullandığı yönde mi başlatılması gerektiğini tanımlar. Bubblewrap artık Web Uygulaması Manifesti alanını okur ve Android uygulamasını oluştururken varsayılan olarak kullanır.
Her iki yapılandırmayı da bubblewrap init akışının bir parçası olarak özelleştirebilirsiniz.
AppBundles Çıkışı
App Bundle'lar, nihai APK oluşturma ve imzalama işlemini Google Play'e devreden bir uygulama yayınlama biçimidir. Uygulamada bu, kullanıcıların uygulamayı mağazadan indirirken daha küçük dosyalar indirmesini sağlar.
Bubblewrap artık uygulamayı app-release-bundle.aab adlı bir dosyada uygulama paketi olarak paketler. 2021'den itibaren Play Store'da zorunlu tutulduğu için uygulamaları Play Store'da yayınlarken bu biçimi tercih etmeniz gerekir.
Coğrafi konum yetkisi
Kullanıcılar, cihazlarına yüklenen uygulamaların teknolojiden bağımsız olarak tutarlı bir şekilde davranmasını bekler. Güvenilir Web Etkinliği içinde kullanıldığında GeoLocation izni artık işletim sistemine devredilebilir. Bu izin etkinleştirildiğinde kullanıcılar, Kotlin veya Java ile oluşturulmuş uygulamalarla 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ğinden, yalnızca web uygulaması Coğrafi Konum iznini kullanırken etkinleştirilmelidir.
Optimize edilmiş ikili programlar
Depolama alanı sınırlı olan 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 kullanan uygulamalar küçük ikili programlar oluşturur. Bu da kullanıcıların endişelerini azaltır.
Bubblewrap, gerekli Android kitaplıklarının listesi azaltılarak optimize edildi. Bu sayede, oluşturulan ikili programlar 800 bin daha küçük hale geldi. Pratikte bu, önceki sürümler tarafından oluşturulan ortalama boyutun yarısından daha azdır. Daha küçük ikili programlardan yararlanmak için uygulamanızı Bubblewrap'in en yeni sürümünü kullanarak güncellemeniz yeterlidir.
Mevcut bir uygulamayı güncelleme
Bubblewrap tarafından oluşturulan bir uygulama, bir web uygulaması ve PWA'yı açan hafif bir Android sarmalayıcıdan oluşur. Güvenilir Web Etkinliği içinde açılan PWA, diğer web uygulamalarıyla aynı güncelleme döngülerini izlese de yerel sarmalayıcı güncellenebilir ve güncellenmelidir.
Uygulamanızı güncelleyerek sarmalayıcının en son hata düzeltmelerini ve özelliklerini içeren en yeni sürümünü kullandığından emin olmanız gerekir. Bubblewrap'in en yeni sürümü yüklüyken update komutu, sarmalayıcının en yeni 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 manifestinde yapılan değişikliklerin uygulamaya uygulandığından emin olmaktır. Bunun için yeni merge komutunu kullanın:
bubblewrap merge
bubblewrap update
bubblewrap build
Kalite ölçütlerinde yapılan güncellemeler
Chrome 86, Güvenilir Web Etkinliği Kalite Ölçütleri'nde değişiklikler yaptı. Bu değişiklikler, Güvenilir Web Etkinliği kullanan PWA'lar için kalite ölçütlerinde yapılan değişiklikler başlıklı makalede ayrıntılı olarak açıklanmıştır.
Özetle, uygulamalarınızın kilitlenmesini önlemek için aşağıdaki senaryoları ele aldığından emin olmanız gerekir:
- Uygulama başlatılırken Digital Asset Links dosyaları doğrulanamadı
- Çevrimdışı ağ kaynağı isteği için HTTP 200 döndürülemedi
- Uygulamada HTTP 404 veya 5xx hatası döndürülmesi
Uygulamanın Digital Asset Links doğrulamasını geçmesini sağlamanın yanı sıra, kalan senaryolar bir hizmet çalışanı tarafından işlenebilir:
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 çalışanlarını kullanırken en iyi uygulamaları uygular 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,
});
}
}