Geçen yıl Güvenilir Web Etkinliği kullanıma sunulduğundan beri Chrome ekibi ürün üzerinde çalışmaya devam ederek Bubblewrap ile kullanımı kolaylaştırdı. Yakında eklenecek olan Google Play Faturalandırma entegrasyonu gibi yeni özellikler eklendi. Böylece Chrome, ChromeOS gibi daha fazla platformda çalışacak. Bu makalede, Güvenilir Web Etkinliği ile ilgili en son ve yakında yapılacak güncellemeler özetlenmektedir.
Yeni Bubble wrap ve Güvenilir Web Etkinliği özellikleri
Bubblewrap, platforma özgü araçlar hakkında bilgi sahibi olmanız gerekmeden 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 her ikisi de hataya açık olan Java Geliştirme Kiti ve Android SDK'nın manuel olarak ayarlanması gerekiyordu. Araç artık ilk kez çalıştırıldığında dış bağımlılıkları otomatik olarak indirmeyi teklif etmektedir.
İsterseniz mevcut bir bağımlılık yüklemesini kullanmayı da seçebilirsiniz. Yeni doctor komutu, sorunların bulunmasına yardımcı olur ve yapılandırmayla ilgili düzeltmeler önerir. Bu komut artık updateConfig komutu kullanılarak komut satırından güncellenebilir.
Gelişmiş sihirbaz
Bubblewrap, init ile proje oluştururken Android uygulamasını oluşturmak için bilgiye ihtiyaç duyar. Araç, Web Uygulaması Manifest'inden değerleri ayıklar ve mümkün olduğunda varsayılan değerleri sağlar.
Bu değerleri yeni bir proje oluştururken 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ğrulamalarla yeniden oluşturuldu.
ekran: tam ekran ve yön desteği
Bazı durumlarda, uygulamanızın ekranın mümkün olduğunca çok kısmını kullanmasını isteyebilirsiniz. PWA'ları oluştururken bu durum, Web Uygulaması Manifest'inden display alanını fullscreen değerine ayarlayarak uygulanır.
Bubblewrap, Web Uygulaması Manifest'inde tam ekran seçeneğini algıladığında Android uygulamasını da Android'e özgü terimlerle tam ekran veya etkileyici modda başlatılacak şekilde yapılandırır.
Web Uygulaması Manifest'indeki orientation alanı, uygulamanın dikey modda mı, yatay modda mı yoksa cihazın kullanmakta olduğu yönde mi başlatılması gerektiğini tanımlar. Bubblewrap artık Web Uygulama Manifest alanını okuyor ve Android uygulamasını oluştururken bu alanı varsayılan olarak kullanıyor.
Her iki yapılandırmayı bubblewrap init akışı kapsamında özelleştirebilirsiniz.
AppBundles Çıkışı
App Bundle, son APK oluşturma ve Play'e imzalama yetkisi veren uygulamalar için bir yayınlama biçimidir. Pratikte bu, uygulamayı mağazadan indirirken kullanıcılara daha küçük dosyaların sunulmasını sağlar.
Bubblewrap artık uygulamayı app-release-bundle.aab adlı bir dosyada App Bundle olarak paketler. 2021'in ikinci yarısından itibaren mağaza tarafından zorunlu tutulacağı için Play Store'da uygulama yayınlarken bu biçimi tercih etmeniz gerekir.
Coğrafi konum yetkisi
Kullanıcılar, cihazlarında yüklü uygulamaların teknolojiden bağımsız olarak tutarlı bir şekilde çalışmasını bekler. Güvenilir Web Etkinliği içinde kullanıldığında, GeoLocation izni artık İşletim Sistemine verilebilir ve etkinleştirildiğinde kullanıcılar Kotlin veya Java ile oluşturulan uygulamalarla aynı iletişim kutularını görür ve izni aynı yerden yönetmek için kontrollere ulaşabilir.
Bu özellik Bubblewrap aracılığıyla eklenebilir ve Android projesine ekstra bağımlılıklar eklediğinden, bu özelliği yalnızca web uygulaması Coğrafi Konum iznini kullanırken etkinleştirmelisiniz.
Optimize edilmiş ikili programlar
Sınırlı depolama alanına sahip cihazlar, dünyanın belirli bölgelerinde yaygın olarak kullanılı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şturarak bu kullanıcıların endişelerinin bir kısmını ortadan kaldırır.
Bubble wrap, gerekli Android kitaplıklarının listesi azaltılarak optimize edilmiştir. Bu sayede, ikili programların 800 binden daha küçük olması sağlanır. Pratikte bu, önceki sürümlerin oluşturduğu ortalama boyutun yarısından azdır. Daha küçük ikili dosyalardan yararlanmak için tek yapmanız gereken uygulamanızı en son Bubblewrap sürümünü kullanarak güncellemenizdir.
Mevcut uygulamaları 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 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 olmak için güncellemeniz gerekir. Bubblewrap'un en son sürümü yüklü olduğunda 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üncellemek için bir diğer neden, Web Manifest dosyasındaki 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 Kriterleri'nde değişiklikler yaptı. Bu değişiklikler, Güvenilir Web Etkinliği'ni kullanan PWA'lar için kalite ölçütlerinde yapılan değişiklikler başlıklı makalede tümüyle açıklanmıştır.
Özetle, uygulamalarınızın kilitlenmesini önlemek için aşağıdaki senaryolara uygun hareket ettiğinizden emin olmanız gerekir:
- Başvuru başlatılırken dijital varlık bağlantılarını doğrulamama
- Çevrimdışı ağ kaynağı isteği için HTTP 200 döndürülememe
- Uygulamada HTTP 404 veya 5xx hatası döndürmesi.
Uygulamanın Dijital Öğe Bağlantıları doğrulamasını geçtiğinden emin olmanın yanı sıra, geri 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, en iyi uygulamaları en iyi şekilde işler ve Service Worker'ları kullanırken ortak metni 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,
});
}
}
Google Play Faturalandırma
Google Play Faturalandırma, uygulamanızın Play Store'da dijital ürünler ve abonelikler satmasına izin vermenin yanı sıra kataloğunuzu, fiyatlarınızı ve aboneliklerinizi yönetmeniz için araçlar, faydalı raporlar ve kullanıcılarınıza zaten aşina olan Play Store tarafından desteklenen bir ödeme akışı sunar. Ayrıca Play Store'da yayınlanan ve dijital ürünler satan uygulamalar için de zorunludur.
Chrome 88, Android'de Güvenilir Web Etkinlikleri, Ödeme İsteği API'si ve Dijital Ürünler API'si entegrasyonuna olanak tanıyarak Google Play Faturalandırma aracılığıyla satın alma işlemleri gerçekleştirmenizi sağlayan bir kaynak denemesiyle kullanıma sunulacak. Bu Kaynak Denemesinin, ChromeOS 89 sürümünde de kullanıma sunulacağını tahmin ediyoruz.
Önemli: Google Play Faturalandırma API'sinin kendi terminolojisi vardır ve istemci ile arka uç bileşenlerini içerir. Bu bölümde, API'nin yalnızca Digital Goods API ve Güvenilir Web Etkinliği kullanımına özel küçük bir bölümü ele alınmaktadır. Bir üretim uygulamasına entegre etmeden önce Google Play Faturalandırma belgelerini okuduğunuzdan ve burada belirtilen kavramları anladığınızdan emin olun.
Temel akış
Play Store üzerinden dijital ürünler sağlamak için Play Store'da kataloğunuzu yapılandırmanız ve PWA'nızdan ödeme yöntemi olarak Play Store'u bağlamanız gerekir.
Kataloğunuzu yapılandırmaya hazır olduğunuzda, işe Play Console'da sol taraftaki menüde Ürünler bölümünü bularak başlayın:
Burada, mevcut uygulama içi ürün ve aboneliklerinizi görüntüleme seçeneğinin yanı sıra yenilerini eklemek için "Oluştur" düğmesini de bulacaksınız.
Yeni bir uygulama içi ürün oluşturmak için ürün kimliği, ad, açıklama ve fiyata ihtiyacınız vardır. Anlamlı ve hatırlaması kolay ürün kimlikleri oluşturmak önemlidir. Bunlara daha sonra ihtiyacınız olacaktır ve kimlikler oluşturulduktan sonra değiştirilemez.
Abonelik oluştururken fatura dönemi de belirtmeniz gerekir. Aboneliğinizin avantajlarını listeleyebilir ve ücretsiz deneme, tanıtım fiyatı, ek süre ve yeniden abone olma gibi özellikleri ekleyebilirsiniz.
Her bir ürünü oluşturduktan sonra etkinleştirerek uygulamanızda kullanılabilir hale getirin.
İsterseniz ürünlerinizi Play Developers API aracılığıyla ekleyebilirsiniz.
Kataloğunuz yapılandırıldıktan sonraki adım, ödeme akışını PWA'dan yapılandırmaktır. Bunun için Digital Goods API ile Payment Request API'yi birlikte kullanacaksınız.
Dijital Ürünler API'sı ile ürün fiyatını getirme
Google Play Faturalandırma hizmetini kullanırken kullanıcılara gösterilen fiyatın mağaza girişindeki fiyatla eşleştiğinden emin olmanız gerekir. Bu fiyatları manuel olarak senkronize etmek imkansızdır, bu nedenle Digital Goods API, web uygulamasının fiyatlar için temel ödeme sağlayıcıyı sorgulaması için bir yol sağlar:
// 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;
}
window nesnesinde getDigitalGoodsService() bulunup bulunmadığını kontrol ederek Digital Goods API desteğini tespit edebilirsiniz.
Ardından, parametre olarak Google Play Faturalandırma tanımlayıcısıyla window.getDigitalGoodsService() çağırın.
Bu, Google Play Faturalandırma için bir hizmet örneği döndürür. Diğer satıcılar, Dijital Ürünler API'si için destek uygulayabilir ve farklı tanımlayıcılara sahip olur.
Son olarak, öğe için STB'yi parametre olarak ileten Google Play Faturalandırma nesnesine referansla ilgili olarak getDetails() yöntemini çağırın. Yöntem, öğenin kullanıcıya gösterilebileceği hem fiyatını hem de para birimini içeren bir ayrıntı nesnesi döndürür.
Satın alma akışını başlatma
Ödeme İsteği API'si, web'de satın alma akışları sağlar ve Google Play Faturalandırma entegrasyonu için de kullanılır. Ödeme İsteği API'sini kullanmaya yeni başladıysanız daha fazla bilgi edinmek için Ödeme İsteği API'sinin İşleyiş Şekli bu makaleye göz atın.
API'yi Google Play Faturalandırma ile birlikte kullanmak için https://play.google.com/billing adında desteklenen bir metoda sahip bir ödeme aracı eklemeniz ve STB'yi araç verilerinin bir parçası olarak eklemeniz gerekir:
const supportedInstruments = [{
supportedMethods: "https://play.google.com/billing",
data: {
sku: sku
}
}];
Ardından, her zamanki gibi bir PaymentRequest nesnesi oluşturun ve API'yi her zamanki gibi kullanın.
const request = new PaymentRequest(supportedInstruments, details);
Satın alma işlemini onaylayın
İşlem tamamlandığında ödemeyi onaylamak için Digital Goods API'yi kullanmanız gerekir. PaymentRequest öğesindeki yanıt nesnesi, işlemi onaylamak için kullanacağınız bir jeton içerir:
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');
Digital Goods API ve Payment Request API, kullanıcının kimliği hakkında bilgiye sahip değildir. Sonuç olarak, satın alma işlemini arka ucunuzda kullanıcıyla ilişkilendirmek ve kullanıcının satın alınan öğelere erişebildiğinden emin olmak size bağlıdır. Satın alma işlemini bir kullanıcıyla ilişkilendirirken, satın alma işleminin iptal edildiğini veya geri ödeme yapıldığını ya da bir aboneliğin hâlâ etkin olup olmadığını doğrulamak için jetona ihtiyaç duyabileceğinizden satın alma jetonunu kaydetmeyi unutmayın. Arka ucunuzda bu tür durumları ele almak için uç noktalar sağladıkları için Real Time Developer Notifications API ve Google Play Developer API'ye göz atın.
Mevcut yararlanma haklarını kontrol edin
Bir kullanıcı bir promosyon kodu kullanmış olabilir veya ürününüze yönelik mevcut bir aboneliğine sahip olabilir. Kullanıcının uygun yararlanma haklarına sahip olduğunu doğrulamak için dijital ürünler hizmetinde listPurchases() komutunu çağırabilirsiniz. Bu, müşterinizin uygulamanızda gerçekleştirdiği tüm satın alma işlemlerini iade eder. Kullanıcının yararlanma haklarını doğru bir şekilde kullandığından emin olmak için onaylanmamış satın alma işlemlerini de burada onaylayabilirsiniz.
const purchases = await itemService.listPurchases();
for (p of purchases) {
if (!p.acknowledged) {
await itemService.acknowledge(p.purchaseToken, 'onetime');
}
}
ChromeOS Play Store'a yükleyin
Güvenilir Web Etkinlikleri, Chrome 85 sürümünden itibaren ChromeOS Play Store'da da kullanılabilir. Uygulamanızı mağazada listeleme işlemi ChromeOS'te ve Android'de aynıdır.
Uygulama paketinizi oluşturduktan sonra Play Console, uygulamayı Play Store'da listelemek için gerekli adımlarda size yol gösterir. Play Console dokümanlarında uygulama girişinizi oluşturma, apk dosyalarınızı ve diğer ayarlarınızı yönetme, ayrıca test etme ve uygulamanızı güvenli bir şekilde yayınlama ile ilgili talimatlar bulabilirsiniz.
Uygulamanızı yalnızca Chromebook'larla kısıtlamak için uygulamayı Bubblewrap'ta başlatırken --chromeosonly işaretini ekleyin:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Uygulamanızı Bubblewrap olmadan manuel olarak oluştururken Android manifest'inize uses-feature işareti ekleyin:
<uses-feature android:name="org.chromium.arc" android:required="true"/>
Girişiniz bir Android uygulamasıyla paylaşılıyorsa yalnızca ChromeOS paket sürümünün her zaman Android uygulama paketi sürümünden yüksek olması gerekir. ChromeOS paket sürümünü Android sürümünden çok daha yüksek bir sayıya ayarlayabilirsiniz. Böylece, her sürümde iki sürümü de güncellemeniz gerekmez.