Arka Plan Getirme ile tanışın

Jake Archibald

2015'te, Service Worker'ın kullanıcı internete bağlanana kadar işi ertelemesine olanak tanıyan Arka Plan Senkronizasyonu'nu kullanıma sunduk. Bu sayede kullanıcı bir mesaj yazıp gönder düğmesine basabilir ve mesajın hemen veya bağlantısı olduğunda gönderileceğini bilerek siteden ayrılabilir.

Bu kullanışlı bir özelliktir ancak getirme işlemi sırasında hizmet çalışanının etkin olması gerekir. Bu, mesaj gönderme gibi kısa işlemler için sorun oluşturmaz ancak görev çok uzun sürerse tarayıcı hizmet çalışanını sonlandırır. Aksi takdirde, kullanıcının gizliliği ve pili için risk oluşur.

Peki film, podcast veya oyun seviyeleri gibi uzun süren bir indirme işleminiz varsa ne yapabilirsiniz? Arka planda getirme bu sorunu çözmek için tasarlanmıştır.

Arka Planda Getirme, Chrome 74'ten itibaren varsayılan olarak kullanılabilir.

Aşağıda, arka planda getirme özelliğinin kullanılmadığı ve kullanıldığı durumları gösteren iki dakikalık kısa bir demo verilmiştir:

Demoyu kendiniz deneyin ve koda göz atın.

İşleyiş şekli

Arka planda getirme işlemi şu şekilde işler:

1. Tarayıcıya arka planda bir grup getirme işlemi gerçekleştirmesini söylersiniz.
2. Tarayıcı bu öğeleri alıp ilerleme durumunu kullanıcıya gösterir.
3. Getirme işlemi tamamlandığında veya başarısız olduğunda tarayıcı, servis çalışanınızı açar ve ne olduğunu size bildirmek için bir etkinlik tetikler. Burada, varsa yanıtlarla ne yapacağınıza karar verirsiniz.

Kullanıcı 1. adımdan sonra sitenizin sayfalarını kapatırsa sorun değil, indirme işlemi devam eder. Getirme işlemi son derece görünür ve kolayca iptal edilebilir olduğundan, çok uzun süren bir arka plan senkronizasyon görevinin gizlilikle ilgili bir endişesi yoktur. Hizmet çalışanı sürekli çalışmadığından, arka planda bitcoin madenciliği yapmak gibi sistemi kötüye kullanabileceği konusunda endişelenmenize gerek yoktur.

Bazı platformlarda (Android gibi), tarayıcı getirme işlemini işletim sistemine devredebileceğinden 1. adımdan sonra kapanabilir.

Kullanıcı indirme işlemini çevrimdışıyken başlatırsa veya indirme sırasında çevrimdışı olursa arka planda getirme duraklatılır ve daha sonra devam ettirilir.

API

Özellik algılama

Her yeni özellikte olduğu gibi, tarayıcının bu özelliği destekleyip desteklemediğini tespit etmek istersiniz. Arka planda getirme için yapmanız gerekenler:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Arka planda getirme işlemini başlatma

Ana API, bir Service Worker kaydına bağlıdır. Bu nedenle, önce bir Service Worker kaydettiğinizden emin olun. Ardından:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch üç bağımsız değişken alır:

backgroundFetch.fetch, BackgroundFetchRegistration ile çözülen bir promise döndürür. Ayrıntıları daha sonra ele alacağız. Kullanıcı indirmeleri devre dışı bıraktıysa veya sağlanan parametrelerden biri geçersizse söz verme işlemi reddedilir.

Tek bir arka plan getirme işlemi için birçok istek göndermek, kullanıcı için mantıksal olarak tek bir şey olan öğeleri birleştirmenize olanak tanır. Örneğin, bir film 1.000'lerce kaynağa bölünebilir (MPEG-DASH ile yaygındır) ve resimler gibi ek kaynaklar içerebilir. Bir oyunun seviyesi birçok JavaScript, resim ve ses kaynağına yayılabilir. Ancak kullanıcı için önemli olan sadece "film" veya "seviye"dir.

Mevcut bir arka planda getirme işlemini alma

Mevcut bir arka plan getirme işlemini şu şekilde alabilirsiniz:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

İstediğiniz arka plan getirme işleminin id ileterek Söz konusu kimlikle etkin bir arka plan getirme işlemi yoksa get undefined değerini döndürür.

Arka planda getirme işlemi, kaydedildiği andan başarılı, başarısız olan veya iptal edilene kadar "etkin" olarak kabul edilir.

getIds kullanarak tüm etkin arka plan getirme işlemlerinin listesini alabilirsiniz:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Arka planda getirme kayıtları

BackgroundFetchRegistration (yukarıdaki örneklerde bgFetch), aşağıdakileri içerir:

İlerleme durumunu izleme

Bu işlem, progress etkinliği aracılığıyla yapılabilir. downloadTotal değerinin sağladığınız değer olduğunu veya bir değer sağlamadıysanız 0 olduğunu unutmayın.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

İstekleri ve yanıtları alma

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record bir BackgroundFetchRecord'dir ve şu şekilde görünür:

Hizmet çalışanı etkinlikleri

Etkinlik nesneleri şunları içerir:

Başarıya/başarısızlığa tepki verme

progress etkinliğini zaten görmüştük ancak bu yalnızca kullanıcının sitenize açık bir sayfası olduğunda faydalıdır. Arka planda getirmenin en büyük avantajı, kullanıcı sayfadan ayrıldıktan veya hatta tarayıcıyı kapattıktan sonra işlemlerin çalışmaya devam etmesidir.

Arka planda getirme işlemi başarıyla tamamlanırsa servis çalışanınız backgroundfetchsuccess etkinliğini alır ve event.registration, arka planda getirme kaydı olur.

Bu etkinlikten sonra, getirilen istek ve yanıtlara artık erişilemez. Bu nedenle, bunları tutmak isterseniz önbellek API'si gibi bir yere taşıyın.

Çoğu hizmet çalışanı etkinliğinde olduğu gibi, hizmet çalışanının etkinliğin ne zaman tamamlandığını bilmesi için event.waitUntil değerini kullanın.

Örneğin, servis çalışanınızda:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

Hata, tek bir 404 hatasına neden olmuş olabilir ve bu sizin için önemli olmayabilir. Dolayısıyla, yine de bazı yanıtları yukarıdaki gibi bir önbelleğe kopyalamanız yararlı olabilir.

Tıklamalara tepki verme

İndirme işleminin ilerleme durumunu ve sonucunu gösteren kullanıcı arayüzü tıklanabilir. Hizmet çalışanındaki backgroundfetchclick etkinliği, buna tepki vermenize olanak tanır. Yukarıda belirtildiği gibi event.registration, arka plan getirme kaydı olacaktır.

Bu olayla ilgili olarak genellikle bir pencere açılır:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Ek kaynaklar

• Açıklayıcı
• Özellik
• chromestatus.com girişi

Düzeltme: Bu makalenin önceki bir sürümünde, Arka Planda Getirme özelliği "web standardı" olarak yanlış bir şekilde belirtilmişti. API şu anda standartlar kapsamında değil. Şartname, WICG'de taslak topluluk grubu raporu olarak bulunabilir.