Geçen yıl Güvenilir Web Etkinliği kullanıma sunulduğundan beri Chrome ekibi, Google Play'in yeni sürümü gibi yeni özellikler ekleyerek, BubbleWrap ile kullanımını kolaylaştırdı. Faturalandırma entegrasyonu ve ChromeOS gibi daha fazla platformda çalışmasını sağlama. Bu makalede, Güvenilir Web Etkinliği için en son ve yaklaşan güncellemeleri özetler.
Yeni Baloncuğu ve Güvenilir Web Etkinliği özellikleri
Bubblepack'i kullanmak, herhangi bir sorun yaşamadan Güvenilir Web Etkinliği'nde PWA'larınızı başlatan uygulamalar oluşturmanıza yardımcı olur bilgi gerektirir.
Basitleştirilmiş kurulum akışı
Daha önce, Bubblepack'i kullanmak Java Geliştirme Kiti'nin ve Android SDK'dır. Her ikisi de hataya açıktır. Araç artık harici web sayfalarını otomatik olarak ve bağımlılıkları belirlemenize yardımcı olur.
Dilerseniz bağımlılıkların mevcut bir kurulumunu da kullanabilirsiniz
Yeni doctor komutu ise sorunları bulmaya yardımcı olur ve yapılandırmayla ilgili düzeltmeler önerir. Böylece,
komut satırından updateConfig komutu kullanılarak güncellenebilir.
İyileştirilmiş sihirbaz
init ile proje oluştururken Bubblepack'in Android uygulamasını oluşturmak için bilgilere ihtiyacı var. İlgili içeriği oluşturmak için kullanılan
araç, Web Uygulaması Manifest'ten değerleri ayıklar ve mümkün olduğunda varsayılan ayarlar sağlar.
Yeni proje oluştururken bu değerleri değiştirebilirsiniz. Ancak daha önce her alanın anlamı değildi. açık. Başlatma iletişim kutuları, her biri için daha iyi açıklamalar ve doğrulama içerecek şekilde yeniden oluşturuldu. giriş alanına ekleyebilirsiniz.
ekran: tam ekran ve yön desteği
Bazı durumlarda, uygulamanızın ekranı mümkün olduğunca çok kullanmasını isteyebilirsiniz.
PWA oluşturmak için bu, Web Uygulaması Manifest'teki display alanının
fullscreen.
Bubblepack, Web Uygulaması Manifest'te tam ekran seçeneğini algıladığında Android'i yapılandırır. veya yoğun içerik modunda başlatılabilir.
Web uygulaması manifestindeki orientation alanı, uygulamanın
dikey mod, yatay mod veya cihazın şu anda kullandığı yönde. Hemen baloncukluk yapın
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 Çıkışı
App Bundle, son APK oluşturma ve değerlendirme için yetki veren uygulamalara yönelik bir yayınlama biçimidir. Google Play'de oturum açıyoruz. Pratikte bu, küçük boyutlu dosyaların kullanıcılar tarafından indirilirken uygulama mağazasından satın alabilirsiniz.
BubbleWrap artık uygulamayı App Bundle olarak adlandırılan bir dosyada paketler.
app-release-bundle.aab Play Store'da uygulama yayınlarken bu biçimi tercih etmelisiniz.
(2021'in ikinci yarısından itibaren mağaza için zorunlu olacaktır.
Coğrafi konum yetkisi
Kullanıcılar, cihazlarında yüklü olan uygulamaların teknolojisidir. GeoLocation izni, Güvenilir Web Etkinliği içinde kullanıldığında artık yetki verilmiş bir uygulamadır. Etkinleştirildiğinde kullanıcılar, yerleşik olarak bulunan uygulamalarla aynı iletişim kutularını görür. oluşturabilir ve izni aynı yerde yönetebileceğiniz kontrolleri bulabilirsiniz.
Bu özellik BubbleWrap ile eklenebilir, çünkü Android'e fazladan bağımlılıklar ekler. projesinde yer alıyorsa bunu yalnızca web uygulaması Coğrafi Konum izni kullanıyorsa etkinleştirmeniz gerekir.
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 daha küçük uygulamaları tercih ediyor. Güvenilir Web Etkinliği'ni kullanan uygulamalar, bu kullanıcıların endişelerinin bir kısmını ortadan kaldırıyor.
Bubblepack, gerekli Android kitaplıklarının listesi azaltılarak optimize edilmiştir. Bu da daha küçük boyutlu ikili kodlar oluşturalım. Pratikte bu, ortalama boyutun yarısından daha az önceki sürümler tarafından oluşturulan verilerdir. Daha küçük ikili programlardan yararlanmak için yalnızca tek yapmanız gereken uygulamanızı BubbleWrap'ın en yeni sürümünü kullanarak.
Mevcut bir uygulamayı güncelleme
BubbleWrap tarafından oluşturulan bir uygulama, bir web uygulaması ve hafif bir Android uygulamasından oluşuyor. sarmalayıcıyı kullanabilirsiniz. PWA, Güvenilir Web Etkinliği içinde açılmış olsa da yerel sarmalayıcı güncellenebilir ve güncellenmelidir.
Uygulamanızı, en son sürümle sarmalayıcının en yeni sürümünü kullandığından emin olmak için güncellemeniz gerekir.
hata düzeltmeleri ve özellikler. BubbleWrap'ın en son sürümü yüklendiğinde update komutu
sarmalayıcının en son sürümünü mevcut bir projeye uygulayın:
npm update -g @bubblewrap/cli
bubblewrap update
bubblewrap build
Bu uygulamaları güncellemenin bir başka nedeni de Web Manifest'te yapılan değişikliklerin,
nasıl tanımlanacağını gösterir. Bunun için yeni merge komutunu kullanın:
bubblewrap merge
bubblewrap update
bubblewrap build
Kalite Kriterleri'nde Yapılan Güncellemeler
Chrome 86'da Güvenilir Web Etkinliği Kalite Kriterleri'nde değişiklikler yapılmıştır. Bunlar, Güvenilir Web Etkinliği kullanan PWA'lar (Progresif Web Uygulaması) için kalite ölçütlerinde yapılan değişiklikler başlıklı makaleden inceleyebilirsiniz.
Kısa bir özet, uygulamalarınızın aşağıdaki senaryoları ele aldığından emin olmanız gerektiğidir: kilitlenmelerini önler:
- Başvuru başlangıcında dijital varlık bağlantılarının doğrulanamaması
- Çevrimdışı ağ kaynağı isteği için HTTP 200 döndürülemedi
- Uygulamada HTTP 404 veya 5xx hatasının döndürülmesi.
Uygulamanın Dijital Varlık Bağlantıları doğrulamasını geçmesinin yanı sıra bazı senaryolar 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ı sağlar ve Service Worker'ları kullanırken ortak 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,
});
}
}
Google Play Faturalandırma
Uygulamanızın Play Store'da dijital ürünler ve abonelikler satmasına izin vermenin yanı sıra, Google Play Faturalandırma; kataloğunuzu, fiyatlarınızı ve aboneliklerinizi yönetmeniz için faydalı araçlar sunar. kullanıcılarınızın aşina olduğu Play Store destekli bir ödeme akışı sağlar. Google aynı zamanda Play Store'da yayınlanan dijital ürünler satan uygulamalar için de bir gerekliliktir.
Chrome 88, Android'de aşağıdakilerin entegrasyonunu sağlayan bir kaynak denemesiyle kullanıma sunulacaktır: Güvenilir Web Etkinlikleri, Ödeme İsteği API'si ve Digital Goods API'yi satın alma akışlarını Google Play Faturalandırma üzerinden uygulamalıdır. Kaynak Denemesi'nin de kullanıma sunulmasını bekliyoruz. 89 sürümünde bir ChromeOS sürümünü gerektirir.
Önemli: Google Play Faturalandırma API'sinin kendi terminolojisi vardır ve istemci arka uç bileşenleridir. Bu bölüm, API'nin yalnızca Digital Goods API ve Güvenilir Web Etkinliği. Şunu okuduğunuzdan emin olun: Google Play Faturalandırma belgelerini ve kavramlarını anladığınızdan emin olun. üretim uygulaması.
Temel akış
Play Store üzerinden dijital ürünler sağlamak için Play'de kataloğunuzu yapılandırmanız gerekir oluşturabilir ve Play Store'u PWA'nızdan ödeme yöntemi olarak bağlayabilirsiniz.
Kataloğunuzu yapılandırmaya hazır olduğunuzda ilk olarak soldaki Ürünler bölümünü bulun yan menü:
Burada mevcut uygulama içi ürünlerinizi ve aboneliklerinizi görüntüleme seçeneğini, yenilerini eklemek için oluştur düğmesini bulun.
Yeni bir uygulama içi ürün oluşturmak için ürün kimliği, ad, açıklama ve fiyata ihtiyacınız olacaktır. İnsanların anlamlı ve hatırlanması kolay ürün kimlikleri oluşturmak açısından önemli olduğundan, bunlara daha sonra değiştirilemez.
Abonelik oluştururken fatura dönemi de belirtmeniz gerekir. Şunları yapabilirsiniz: abonelik avantajlarınızı listeleyin ve ücretsiz deneme, ücretsiz deneme tanıtım fiyatı, ek süre ve yeniden abone olma seçeneği sunar.
Her bir ürünü oluşturduktan sonra etkinleştirerek bu ürünleri uygulamanızda kullanılabilir hale getirin.
Dilerseniz ü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. Siz Şuna ulaşmak için Digital Goods API'nin ve Payment Request API'nin bir kombinasyonunu kullanacaktır. bu.
Digital Goods API'yi kullanarak ürün fiyatı getirme
Google Play Faturalandırma hizmetini kullanırken kullanıcılara gösterilen fiyatın eşleştiğinden emin olmanız gerekir. fiyat. Bu fiyatları manuel olarak senkronize etmek imkansızdır. Digital Goods API, web uygulamasının temel ödemeyi sorgulaması için bir yöntem sağlar sağlayıcı:
// 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;
}
getDigitalGoodsService() öğesinin olup olmadığını kontrol ederek Digital Goods API desteğini tespit edebilirsiniz.
window nesnesinde kullanılabilir.
Ardından parametre olarak Google Play Faturalandırma Kimliği'ni kullanarak window.getDigitalGoodsService() adlı müşteriyi çağırın.
Bu, Google Play Faturalandırma için bir hizmet örneği döndürür ve diğer tedarikçiler destek uygulayabilir
ve farklı tanımlayıcılara sahip olacaktır.
Son olarak, şunun için SKU'yu ileten Google Play Faturalandırma nesnesine ilişkin referans için getDetails() çağrısı yapın:
kullanabilirsiniz. Yöntem, hem fiyat hem de
kullanıcıya görüntülenebilecek öğenin para birimi.
Satın alma akışını başlatma
Ödeme İsteği API'si, web'de satın alma akışları sunar ve Google Play için Faturalandırma entegrasyonu. Ödeme özelliğini kullanmaya yeni başladıysanız daha fazla bilgi edinmek için Ödeme İsteği API'sinin İşleyiş Şekli adlı makaleye göz atın API isteğinde bulunun.
API'yi Google Play Faturalandırma ile kullanmak için ödeme aracı eklemeniz gerekir.
https://play.google.com/billing adında desteklenen bir yönteme sahip ve SKU'yu verilerin bir parçası olarak ekleyin
araç için:
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ıktan sonra,
bir kontrol noktası
görevi görebilir. PaymentRequest öğesinden gelen yanıt nesnesi, kullanacağınız jetonu içerecek
işlemi onaylayın:
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 Mals API ve Payment Request API, kullanıcının kimliği hakkında bilgiye sahip değildir. Kullanıcı Bu durumda, satın almayı arka ucunuzda kullanıcıyla ilişkilendirmek ve erişim izni verebilirsiniz. Satın alma işlemini bir kullanıcıyla ilişkilendirirken (satın alma işleminin iptal edilip edilmediğini veya geri ödenmediğini ya da satın alma işlemi için geri ödeme yapılıp yapılmadığını bir abonelik hâlâ etkin durumdaysa. Real Time Developer Notifications API'ye göz atın Arka ucunuzda bu tür durumların ele alınması için uç noktalar sağladığı için Google Play Developer API.
Mevcut yararlanma haklarını kontrol et
Bir kullanıcı, bir promosyon kodu kullanmış veya ürününüz için mevcut bir aboneliği olabilir. İçinde
kullanıcının uygun yararlanma haklarına sahip olduğunu doğrulamak için
listPurchases() komutunun kullanılması anlamına gelir. Bu işlem, yaptığınız tüm satın alma işlemlerini
en az bir kaç dönüşüm gerçekleştirdi. Burası ayrıca onaylanmayan veya kabul edilmeyen
kullanıcının yararlanma haklarını doğru şekilde kullandığından emin olmak için satın alma işlemi gerçekleştirin.
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 ayrıca Chrome 85'ten itibaren ChromeOS Play Store'da mevcuttur. Süreç ChromeOS ve Android'de aynı mağazadaki uygulamanızı listelemeniz gerekir.
Uygulama paketinizi oluşturduktan sonra Play Console size adımları uygulayın. Play Console dokümanlarında uygulama girişinizi oluşturma, apk dosyalarınızı ve diğer ayarların yanı sıra talimatları yönetme test etmek ve uygulamanızı güvenli bir şekilde yayınlamak için kullanın.
Uygulamanızı yalnızca Chromebook'larla kısıtlamak için ilk kullanıma hazırlarken --chromeosonly işaretini ekleyin
BubbleWrap'taki uygulama:
bubblewrap init --manifest="https://example.com/manifest.json" --chromeosonly
Uygulamanızı BubbleWrap olmadan manuel olarak oluştururken uygulamanıza uses-feature işareti ekleyin.
Android manifesti:
<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ü her zaman Android uygulama paketi sürümünden daha yüksek olması gerekir. ChromeOS paket sürümünü çok daha fazla olduğu için her iki sürümü de güncellemeniz gerekmez. kullanabilirsiniz.