Yayınlanma tarihi: 2 Aralık 2020
Güvenilir Web Etkinliği kullanıma sunulduğundan beri Chrome ekibi, BubbleWrap ile kullanımı kolaylaştırmıştır. Google Play Faturalandırma entegrasyonu gibi ek özellikler ekledik ve ChromeOS gibi daha fazla platformda çalışmasını sağladık.
Baloncuk Sarma ve Güvenilir Web Etkinliği özellikleri
Bubblewrap, platforma özgü 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'ı kullanmak için Java Development Kit ve Android SDK'yı manuel olarak ayarlamanız gerekiyordu. Bu işlemler hatalara yol açabiliyordu. 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üzeltme artık updateConfig komutu kullanılarak komut satırından güncellenebilir.
İyileştirilmiş sihirbaz
init ile proje oluştururken BubbleWrap Android uygulamasını oluşturmak için bilgilere ihtiyaç duyar. Bu araç, Web Uygulaması Manifest'ten değerleri ayıklar ve mümkün olduğunda varsayılan ayarlar 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 içerecek şekilde 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'teki orientation alanı, uygulamanın dikey modda mı, yatay modda mı yoksa cihazın şu anda kullandığı yönde mi başlatılması gerektiğini tanımlar. Bubblepack artık Web Uygulaması Manifest alanını okur ve Android uygulamasını oluştururken varsayılan olarak bu alanı kullanır.
Her iki yapılandırmayı da bubblewrap init akışının bir parçası olarak ö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. Coğrafi Konum 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ı 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 yeni hata düzeltmeleri ve özelliklerle birlikte sarmalayıcının en son sürümünü kullandığından emin olacak şekilde güncellemeniz gerekir. 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.
Kısa bir özet olarak, uygulamalarınızın kilitlenmesini önlemek için aşağıdaki senaryolarla ilgili işlem yapabildiğinden 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ülemedi
- 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 tür senaryoları ele almak için bir Çalışma Kutusu 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,
});
}
}