Güncelle

PWA'nızı yayınladınız: Bazı kullanıcılar bu uygulamayı tarayıcıdan kullanır, bazıları da cihazlarına yükler. Uygulamayı güncellerken tehlikelerden kaçınmak 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ılıkları.
  • Manifest meta verileri.

Şimdi bu unsurların her biriyle ilgili en iyi uygulamalara bakalım.

Veriler güncelleniyor

IndexedDB'de depolananlar gibi verileri güncellemek için Fetch, WebRTC veya WebSockets API gibi araçları kullanabilirsiniz. Uygulamanız çevrimdışı özellikleri destekliyorsa, bu ö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 senkronizasyonu seçenekleri vardır. 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 periyodik arka plan senkronizasyonu: Verileri belirli zamanlarda, arka planda düzenli olarak senkronize ederek kullanıcı henüz uygulamayı 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ı indirir.
  • Web push: Sunucudan, hizmet çalışanını uyandıran ve kullanıcıya bilgi veren bir mesaj gönderir. Buna genellikle "push bildirimi" denir. Bu API için kullanıcının izni gereklidir.

Tüm bu API'ler Service Worker bağlamından yürütülür. Şu anda yalnızca Chromium tabanlı tarayıcılarda, Android ve masaüstü işletim sistemlerinde kullanılabilir. Bu API'lerden birini kullandığınızda, örneğin sunucunuzdan veri indirmek ve IndexedDB verilerinizi güncellemek için Service Worker iş parçacığında kod çalıştırabilirsiniz.

Öğeleri güncelleme

Öğelerin güncellenmesi, uygulamanın arayüzünü oluşturmak için kullandığınız dosyalarda (ör. HTML, CSS, JavaScript ve görseller) yapılan tüm değişiklikleri içerir. Örneğin, uygulamanızın mantığındaki bir değişiklik, arayüzünüzün parçası olan bir resim veya bir CSS stil sayfası.

Kalıpları güncelle

Aşağıda, uygulama güncellemelerini ele alırken yaygın olarak kullanılan bazı kalıpları bulabilirsiniz. Bununla birlikte, süreci istediğiniz zaman kendi ihtiyaçlarınıza göre özelleştirebilirsiniz:

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

Güncellenme zamanı

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. Bu anı dinleyecek bir etkinlik yok ancak tarayıcı, uyandığında hizmet çalışanının genel kapsamındaki herhangi bir kodu yürütür.
  • Uygulamanın daha yavaş yüklenmesini önlemek için, tarayıcı sayfayı yükledikten sonra PWA'nızın ana pencere bağlamında.
  • PWA'nızın push bildirimi alması veya arka plan senkronizasyonunun tetiklenmesi gibi arka plan etkinlikleri tetiklendiğinde. Bunun ardından önbelleğinizi güncelleyebilirsiniz. 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) veya kapalıyken de uygulanıp uygulanmayacağını seçebilirsiniz. Uygulama kapatılırken, 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 mevcut yüklemedeki öğenin yerini alır. Bu, bu kursta ele alınmayan karmaşık bir görevdir. livereload-js ve CSS öğe güncellemesi CSSStyleSheet.replace() API bu güncellemenin uygulanmasına yardımcı olacak bazı araçlardır.

Hizmet çalışanı güncelleniyor

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

Ardından tarayıcı, Service Worker'ın yeni sürümünü yüklemeye çalışır. Yeni Service Worker, Service Worker bölümünde açıklandığı şekilde, beklemede durumunda kalır. Yeni yükleme, yeni Service Worker için install etkinliğini çalıştırır. Söz konusu etkinlik işleyicideki öğeleri önbelleğe alıyorsanız öğeler de yeniden önbelleğe alınır.

Service Worker değişikliklerini algılama

Yeni bir Service Worker'ın hazır ve yüklü olduğunu tespit etmek için Service Worker kaydındaki updatefound etkinliğini kullanırız. Yeni Service Worker yükleme işlemine başladığında bu etkinlik tetiklenir. Durumunun statechange etkinliğinde installed olarak değişmesini beklememiz gerekiyor; aşağıdaki bilgilere 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
      }
    });
  })
}

Zorla geçersiz kılma

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

Önerilmese de yeni hizmet çalışanı bu bekleme süresini atlayarak 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());
});

controllerchange etkinliği, geçerli sayfayı kontrol eden hizmet çalışanı değiştiğinde 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 meta verilerini de güncelleyebilirsiniz. Bu meta veri genellikle web uygulaması manifest dosyasında ayarlanır. Örneğin, simge, ad veya başlangıç URL'sini güncelleyebilir veya uygulama kısayolları gibi yeni bir özellik ekleyebilirsiniz. Peki uygulamayı cihazlarına eski simgeyle yüklemiş olan tüm kullanıcılara ne olur? Güncellenmiş sürümü nasıl ve ne zaman alırlar?

Bu sorunun yanıtı platforma göre değişir. 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'sı ile Android'de Google Chrome

Kullanıcı, WebAPK'sı (Chrome PWA yüklemelerinin çoğu) etkin olan 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ılara göz atın.

Süreçle ilgili bazı ek notlar:

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

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

WebAPK'sı ile Android'de Samsung Internet

İşlem, Chrome sürümüne benzer. Bu durumda, PWA manifesti güncelleme gerektiriyorsa sonraki 24 saat içinde güncellenen WebAPK'sı çıkartıldıktan sonra WebAPK'sı kablosuz bağlantıda güncellenir.

Masaüstünde Google Chrome ve Microsoft Edge

Masaüstü cihazlarda PWA başlatıldığında, tarayıcı yerel manifestte değişiklik olup olmadığını en son ne zaman kontrol ettiğini belirler. Manifest, tarayıcının en 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 istemcilerden yeni bir gezinmesi yapılması gerekir. Kullanıcıya bekleyen bir güncelleme olduğunu bildirmek, ancak kendisi için en uygun zamanda sayfayı güncelleme olanağı vermek iyi bir fikir olabilir.

Kullanıcıyı bilgilendirmek için şu seçenekler vardı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şturmak için kullanılan push izninin bir parçasıdır. Sunucunuzdan push mesajlaşma protokolünü kullanmasanız bile bu özelliği kullanmak için web push izni istemeniz gerekir. PWA açık değilse kullanabileceğimiz tek seçenek budur.
  • PWA'nın yüklü simgesinde güncellemelerin bulunduğunu göstermek için Badging API'yi kullanın

DOM'de gösterilen bir güncelleme bildirimi..

Rozet API'si hakkında daha fazla bilgi

Rozet API'si, 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 şeylerin olduğunu belirten küçük bir işarettir.

Sekiz bildirimi bulunan Twitter ve bayrak türü rozeti gösteren başka bir uygulama örneği.

Rozet numarası ayarlamak için navigator nesnesinde setAppBadge(count) öğesini çağırmanız gerekir. Kullanıcıyı uyaracak bir güncelleme olduğunu biliyorsanız bu işlemi pencereden veya hizmet çalışanının bağlamından yapabilirsiniz.

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

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

navigator.clearAppBadge();

Kaynaklar