Güncelle

PWA'nızı yayınladınız: Bazı kullanıcılar PWA'yı tarayıcıdan kullanırken bazıları cihazlarına yükler. Uygulamayı güncellerken bazı tehlikeleri önlemek için en iyi uygulamalardan yararlanmak önemlidir.

Şunları güncelleyebilirsiniz:

• Uygulama verileri'ne dokunun.
• Öğeler cihazlarda zaten önbelleğe alınmış.
• Service Worker dosyası veya bağımlıları.
• Manifest meta verisi.

Şimdi bu unsurların her biriyle ilgili en iyi uygulamalara göz atalım.

Veriler güncelleniyor

IndexedDB'de depolananlar gibi verileri güncellemek için Fetch, WebRTC veya WebSockets API gibi araçları kullanabilirsiniz. Uygulamanız herhangi bir çevrimdışı özelliği destekliyorsa söz konusu özellikleri destekleyen verileri de güncel tutmayı unutmayın.

Uyumlu tarayıcılarda, yalnızca kullanıcı PWA'yı açtığında değil, arka planda da veri senkronize etme seçenekleri mevcuttur. Bu seçenekler şunlardır:

• Arka plan senkronizasyonu: Başarısız olan istekleri kaydeder ve hizmet çalışanının senkronizasyonunu kullanarak bu istekleri yeniden dener.
• Web düzenli arka plan senkronizasyonu: Verileri arka planda düzenli aralıklarla, belirli zamanlarda senkronize ederek, kullanıcı uygulamayı henüz açmamış olsa bile uygulamanın güncellenmiş verileri sağlamasına olanak tanır.
• Arka Planda Getirme: PWA kapalı olsa bile büyük dosyalar indirilir.
• Web push: Sunucudan, hizmet çalışanını uyandıran ve kullanıcıyı bilgilendiren bir mesaj gönderir. Buna genellikle "push bildirimi" denir. Bu API, kullanıcının iznini gerektiriyor.

Tüm bu API'ler, hizmet çalışanı bağlamında yürütülür. Şu anda yalnızca Chromium tabanlı tarayıcılarda, Android ve masaüstü işletim sistemlerinde kullanılabilmektedir. Bu API'lerden birini kullanırken hizmet çalışanı iş parçacığında kod çalıştırabilirsiniz. örneğin, sunucunuzdan veri indirip IndexedDB verilerinizi güncelleyebilirsiniz.

Öğeler güncelleniyor

Öğeleri güncelleme, uygulamanın arayüzünü oluşturmak için kullandığınız HTML, CSS, JavaScript ve resimler gibi dosyalarda yapılan tüm değişiklikleri içerir. Örneğin, uygulamanızın mantığında yapılan bir değişiklik, arayüzünüzün parçası olan bir resim veya bir CSS stil sayfası.

Kalıpları güncelle

Uygulama güncellemelerini işlemeye yönelik yaygın kalıplardan bazıları aşağıda verilmiştir, ancak istediğiniz zaman süreci kendi ihtiyaçlarınıza göre özelleştirebilirsiniz:

• Tam güncelleme: Küçük bir değişiklik de dahil olmak üzere her değişiklik, tüm önbellek içeriğinin değiştirilmesini tetikler. Bu kalıp, cihaza özel uygulamaların güncellemeleri işleme şeklini taklit eder, daha fazla bant genişliği kullanır ve daha fazla zaman alır.
• Değiştirilen öğeler güncellemesi: Yalnızca son güncellemeden bu yana değişen öğeler önbellekte değiştirilir. Genellikle Workbox gibi bir kitaplık kullanılarak uygulanır. Bu süreç, önbelleğe alınmış dosyaların bir listesini, dosyanın karma gösterimini ve zaman damgalarını oluşturmayı içerir. Hizmet çalışanı bu bilgilerden yararlanarak bu listeyi önbelleğe alınan öğelerle karşılaştırır ve hangi öğelerin güncelleneceğine karar verir.
• Bağımsız öğe güncellemesi: Değişen her öğe ayrı ayrı güncellenir. Yayınlama bölümünde açıklanan eski yeniden doğrulama stratejisi, öğelerin tek tek güncellenmesine örnektir.

Ne zaman güncellenir?

Diğer bir iyi uygulama da güncellemeleri kontrol etmek ve uygulamak için uygun bir zaman bulmaktır. İşte bazı seçenekler:

• Service Worker uyandığında. Şu anda dinlenecek bir etkinlik yok ancak tarayıcı, hizmet çalışanı uyandığında global kapsamındaki tüm kodları yürütür.
• Uygulamanın daha yavaş yüklenmesini önlemek için PWA'nızın ana pencere bağlamında tarayıcı sayfayı yükledikten sonra.
• PWA'nızın push bildirimi alması veya arka plan senkronizasyonunun etkinleşmesi gibi arka plan etkinlikleri tetiklendiğinde. Önbelleğinizi güncelleyebilirsiniz. Böylece kullanıcılarınız uygulamayı bir sonraki açışlarında öğenin yeni sürümüne sahip olur.

Canlı güncellemeler

Ayrıca, bir güncellemenin uygulama açıkken (yayında) mı yoksa kapalıyken mi uygulanacağını seçebilirsiniz. Uygulama kapalıyken, uygulama yeni öğeler indirmiş olsa bile herhangi bir değişiklik yapmaz ve bir sonraki yüklemede yeni sürümleri kullanır.

Canlı güncelleme, öğe önbellekte güncellenir güncellenmez, PWA'nızın mevcut yüklemedeki öğeyi değiştirir. Bu, bu kursta ele alınmayan karmaşık bir görevdir. Bu güncellemeyi uygulamaya yardımcı olan bazı araçlar arasında livereload-js ve CSS öğe güncellemesi CSSStyleSheet.replace() API yer alır.

Hizmet çalışanını güncelleme

Hizmet çalışanınız veya bağımlıları değiştiğinde tarayıcı bir güncelleme algoritmasını tetikler. Tarayıcı, önbelleğe alınmış dosyalar ile ağdan gelen kaynaklar arasındaki bayt bazında karşılaştırmayı kullanarak güncellemeleri algılar.

Ardından tarayıcı, Service Worker'ın yeni sürümünü yüklemeye çalışır. Yeni hizmet çalışanı, Service Worker'lar bölümünde açıklandığı gibi bekleme durumunda olur. Yeni yükleme, yeni hizmet çalışanı için install etkinliğini çalıştırır. Bu etkinlik işleyicideki öğeleri önbelleğe alıyorsanız öğeler de yeniden önbelleğe alınır.

Hizmet çalışanı değişikliklerini algılama

Yeni bir hizmet çalışanının hazır ve yüklenmiş olduğunu algılamak için hizmet çalışanı kaydındaki updatefound etkinliğini kullanırız. Bu etkinlik, yeni hizmet çalışanı yüklemeye başladığında tetiklenir. statechange etkinliği için durumunun installed olarak değişmesini beklememiz gerekiyor; aşağıdakilere göz atın:

async function detectSWUpdate() {
  const registration = await navigator.serviceWorker.ready;

  registration.addEventListener("updatefound", event => {
    const newSW = registration.installing;
    newSW.addEventListener("statechange", event => {
      if (newSW.state == "installed") {
         // New service worker is installed, but waiting activation
      }
    });
  })
}

Geçersiz kılmaya zorla

Yeni hizmet çalışanı yüklenecek ancak varsayılan olarak etkinleştirilmesi bekleniyor. Bekleme, yeni hizmet çalışanının yeni sürümle uyumlu olmayabilecek eski istemcileri devralmasını önler.

Önerilmese de yeni Service Worker bu bekleme süresini atlayıp etkinleştirmeyi hemen başlatabilir.

self.addEventListener("install", event => {
   // forces a service worker to activate immediately
   self.skipWaiting();
  });

self.addEventListener("activate", event => {
  // when this SW becomes activated, we claim all the opened clients
  // they can be standalone PWA windows or browser tabs
  event.waitUntil(clients.claim());
});

Geçerli sayfayı kontrol eden hizmet çalışanı değiştiğinde controllerchange etkinliği tetiklenir. Örneğin, yeni bir çalışan beklemeyi atlayıp yeni etkin çalışan haline gelir.

navigator.serviceWorker.addEventListener("controllerchange", event => {
   // The service worker controller has changed
 });

Meta verileri güncelleme

Uygulamanızın temel olarak web uygulaması manifest'inde ayarlanan meta verilerini de güncelleyebilirsiniz. Örneğin, simge, ad veya başlangıç URL'sini güncelleyebilir ya da uygulama kısayolları gibi yeni bir özellik ekleyebilirsiniz. Peki, cihazlarına eski simgeyle birlikte uygulamayı yüklemiş olan kullanıcılara ne olacak? Güncellenmiş sürümü nasıl ve ne zaman alıyorlar?

Bu sorunun cevabı platforma göre değişir. Size sunulan seçeneklere göz atalım.

iOS, iPadOS ve Android tarayıcılarda Safari

Bu platformlarda, yeni manifest meta verilerini almanın tek yolu uygulamayı tarayıcıdan yeniden yüklemektir.

WebAPK ile Android'de Google Chrome

Kullanıcı, WebAPK'nın etkin olduğu Google Chrome'u kullanarak (Chrome PWA yüklemelerinin çoğu) Google Chrome'u kullanarak PWA'nızı Android'e yüklediğinde, güncelleme algılanır ve bir algoritmaya göre uygulanır. Bu manifest güncellemeleri makalesindeki ayrıntıları inceleyin.

Süreçle ilgili bazı ek notlar:

Kullanıcı PWA'nızı açmazsa WebAPK'sı güncellenmez. Sunucu, manifest dosyasıyla yanıt vermezse (404 hatası vardır) kullanıcı PWA'yı açsa bile Chrome en az 30 gün boyunca güncellemeleri kontrol etmez.

"Güncelleme gerekiyor" durumunu görmek için Android'deki Chrome'da about:webapks adresine gidin işaretleyip güncelleme isteğinde bulunabilirsiniz. Araçlar ve hata ayıklama bölümünde bu hata ayıklama aracı hakkında daha fazla bilgi edinebilirsiniz.

WebAPK ile Android'de Samsung Internet

İşlem, Chrome sürümüne benzer. Bu durumda, PWA manifesti için güncelleme gerekiyorsa sonraki 24 saat içinde güncellenen WebAPK'sının basılmasından sonra WebAPK kablosuz ağ üzerinde güncellenir.

Masaüstünde Google Chrome ve Microsoft Edge

Masaüstü cihazlarda PWA kullanıma sunulduğunda tarayıcı, yerel manifestte değişiklik olup olmadığını en son ne zaman kontrol ettiğini belirler. Manifest, tarayıcının son başlatılmasından bu yana incelenmediyse veya son 24 saat içinde kontrol edilmediyse tarayıcı, manifest için bir ağ isteğinde bulunur ve ardından, yerel kopyayla karşılaştırır.

Seçili özellikler güncellendiğinde, tüm pencereler kapatıldıktan sonra bir güncelleme tetiklenir.

Kullanıcıyı uyarma

Bazı güncelleme stratejilerinin yeniden yüklenmesi veya istemciler arasında yeni bir gezinme paneli yapılması gerekiyor. Kullanıcıya bekleyen bir güncelleme olduğunu bildirmeniz gerekir. Ancak ona en uygun zamanda sayfayı güncelleme şansı da verin.

Kullanıcıları bilgilendirmek için kullanabileceğiniz seçenekler şunlardır:

• Ekranda bildirim oluşturmak için DOM veya canvas API'yi kullanın.
• Web Notifications API'yi kullanın. Bu API, işletim sisteminde bildirim oluşturmaya yönelik push izninin bir parçasıdır. Sunucunuzda push mesajlaşma protokolünü kullanmasanız bile bu API'yi kullanmak için web push izni istemeniz gerekir. PWA açılmadıysa tek seçeneğimiz bu.
• PWA'nın yüklü simgesinde güncellemelerin mevcut olduğunu göstermek için Badging API'yi kullanın.

.

Badging API hakkında daha fazla bilgi

Badging API, uyumlu tarayıcılarda PWA'nızın simgesini rozet numarası veya rozet noktasıyla işaretlemenize olanak tanır. Rozet noktası, yüklü simgenin içinde bulunan ve uygulamanın içinde bir şey beklediğini belirten küçük bir işarettir.

Rozet numarası ayarlamak için navigator nesnesinde setAppBadge(count) öğesini çağırmanız gerekiyor. Bu işlemi, kullanıcıyı uyaracak bir güncelleme olduğunu bildiğiniz durumlarda pencereden veya hizmet çalışanının bağlamından yapabilirsiniz.

let unreadCount = 125;
navigator.setAppBadge(unreadCount);

Rozeti temizlemek için aynı nesnede clearAppBadge() öğesini çağırırsınız:

navigator.clearAppBadge();

Kaynaklar

• Hizmet Çalışanı Yaşam Döngüsü
• Chrome, web uygulaması manifest dosyasındaki güncellemeleri nasıl işler?
• PWA'ları arka planda senkronize etme ve güncelleme
• Periodic Background Sync API ile daha zengin çevrimdışı deneyimler
• Push API'sı
• Push bildirimlerine genel bakış
• Uygulama simgeleri için rozetler
• Workbox 4: Workbox-window modülünü kullanarak yenilemeden güncelleme sürümüne akışı uygulama