Çevrimdışı çalışan uygulamaları oluşturun

Sep 11, 2025

Nasıl Yapılır

Uzun süredir, çevrimdışı işlevsellik, arka plan senkronizasyonu ve push bildirimleri, web emniyetlerinden gelen yerli uygulamaları farklılaştırılmıştır. Servis işçisi API oyun alanını açan bir oyun değişen teknolojidir. Bu eğitimde, internet bağlantısı olmasa bile içerik kullanabilecek bir sayfa oluşturmak için kullanacağız.

Kodu FileSilo'dan indirin

01. Bir HTTPS Sunucusu

Servis çalışanları hakkında düşünmenin en kolay yolu, bir müşteri makinede bir site tarafından kurulan bir kod parçası olarak, arka planda çalışır ve daha sonra bu siteye girilecek ve manipüle edilecek olan istekleri mümkün kılar. Çünkü bu, bu kadar güçlü bir yetenek, hizmetçilerle birlikte çalışmak için canlı bir ortamda çalışmak için HTTPS üzerinden koşmanız gerekir. Bu, tarayıcının bir sayfadan aldığı tarayıcının bir sayfadan aldığından emin olarak yararlanamamalarını sağlar.

Ancak gelişme amacıyla, o zamandan beri https olmadan çalışabiliriz. http: // localhost / bu kuralın istisnası olarak izin verilir. Başlamanın en basit yolu NPM ile http-sunucusu paket.

 npm http-server -g yüklemek
http-server -P 8000 -C-1

02. Temel bir sayfa ayarlayın

Şu anda sunucuda hiçbir şey yok, bu yüzden hizmet etmek için temel bir sayfa yapalım. Yeni bir index.html dosyası oluşturacağız ve sunucuyu çalıştırdığımızda şimdi erişilebilir olacak http: // localhost: 8000 .

Bu aşamada, HTTP sunucusunu sonlandırırsanız ve tarayıcıdaki sayfayı yenileyerek, siteye ulaşılığından bu yana bir hata sayfası alırsınız. Henüz çevrimdışı içeriği önbelleğe almadıktan beri bu tamamen bekleniyor.

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "UTF-8" / & gt;
  & lt; unvanı ve gt; servis işçisi & lt; / unvan & gt;
  & lt; script src = "site.js" & gt; & lt; / script;
  & l la link rel = "Stylesheet" Type = "Metin / CSS" HREF = "Custom.css" & gt;
  / head & gt;
  & lt; vücut ve gt;
  & lt; başlık ve gt;
  & lt; h1 & gt; Hoşgeldiniz & lt; / h1 & gt;
  & lt; / başlık ve gt;
  & lt; div id = "içeriği" & gt;
  Buradaki içeriği burada & lt; / p & gt;
  & lt; img src = "kitty.jpg" genişliği = "% 100" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Bir servis işçisini kaydedin

Şimdi oldukça olağanüstü bir sayfaya çalıştık ve bir servis işçisini uygulama hakkında düşünmeye başlama zamanı geldi. Kodlanmadan önce, servis çalışanlarının yaşam döngüsünü anlamak için bir dakikanızı almaya değer.

İşlem, Javascript'inizdeki bir servis işçisinin 'kayıt' ile başladı, bu, tarayıcıya işçiyi kurmaya başlamasını söyler - yaşam döngüsünün ilk adımı. Yaşam döngüsü boyunca, bir servis işçisi aşağıdaki durumlardan birinde olacaktır:

Yükleme: Bir servis işçisi kaydedildikten sonra, montajı genellikle statik içeriği indirmek ve önbelleğe almak için kullanılır.
Kurulmuş: İşçi teorik olarak kullanıma hazırdır, ancak hemen etkinleştirilmez
Etkinleştiriliyor: Yüklü bir servis çalışanı, mevcut bir servis çalışanı yoksa veya belirli koşulların mevcut olanın sona ermesini sağladığında kendisini etkinleştirir; Aktivasyon tipik olarak eski dosyaları önbelleğe alınmış çevrimdışı içeriğinden temizlemek için kullanılır.
Aktif: Servis işçisi şimdi belge üzerinde kontrol sahibi ve istekleri yerine getirebilir
Yedekli: Servis çalışanı takılamadı ya da etkinleştirilemedi veya yeni bir servis çalışanı tarafından değiştirilirse

04. Kayıt oldunuz.

Bir servis çalışanı kaydettirelim. Bu, tarayıcıyı, servis çalışanının davranışını tanımlayan JavaScript dosyasına etkili bir şekilde gösterir. Kayıt, API'ye giriş noktası olan Servis İşleme Nesnesi kullanılarak yapılır. Ayrıca, bunu yapmaya çalışmadan önce API'nin gerçekten tarayıcıda bulunduğunu da kontrol edeceğiz.

Kayıt ol() Sayfa yüklendiğinde fonksiyon güvenli bir şekilde çağrılabilir ve tarayıcı, servis çalışanı zaten kayıtlı olup olmadığını belirleyecektir.

 Eğer ('Navigator'da' ServiceWorker '' if (}
  window.addeventlistener ('yük', işlev () {
  navigator.ServiceWorker.Register ('serviceworker.js', {kapsam: './' }).Then (funktions(Registration) {
  konsol.log ("Servis çalışanı başarıyla kaydedildi.");
  }, işlevi (hata) {
  console.log ("Hücre kaydetme işçisi:" + hata);
  });
  });
}

05. Servis işçisini uygulayın

Sonra hizmet işçisinin kendisini uygulamamız gerekiyor. Servis çalışanları, sayfadaki kendi yaşam döngüsü ve etkinlikleriyle ilgili bir dizi etkinlik dinleyebilir. En önemli olanlar kurulum, etkinleştir ve getir.

İçin bir dinleyici oluşturarak başlayalım Yüklemek İşçinin kurulumu bir kez tetikleyen olay. Bu, hizmet çalışanına, geçerli klasöre bir önbellekte çevrimdışı içerik eklememizi sağlıyor. Ayrıca önbelleğimizi adlandırmamız gerekiyor - eski önbelleklerin devam edebileceğinden, bu önbellek adını güncelleyerek / sürümünü verebilir, daha sonra içeriğin daha yeni sürümlerini kullanmanıza olanak sağlar.

 VaR currentcache = 'demo-önbellek';
self.addeventlistener ('install', olay = & gt; {
  Event.waituntil (
  caches.open (currentcache) .Then (fonksiyon (önbellek) {
  konsol.log ("Önbelleğe içerik ekleme");
  Cache.addall ([[
  './index_offline.html',
  './Kitty_Offline.jpg',
  './custom.css'
  ]);
  })
  );
});

06. Etkinlik Alma

Sayfamız şimdi yüklendiğinde içeriği önbelleğe alacak, ancak istekleri engellemek ve onları bu önbelleğe yönlendirmek için bazı mekanizmalara ihtiyacımız var. Bunu yapmak için dinlemeliyiz almak bizim almak gibi bir istek ne zaman tetiklenen olaylar index.html Dosya ağ üzerinden yapılır. Daha sonra talebi önbelleğe alarak eşleştiriyoruz ve eğer varsa önbelleğe alınmış kaynağa hizmet ediyoruz. Aksi takdirde, sunucuya bir API isteğine geri çekiliyoruz.

Bu noktada, JavaScript'in çalışması söz konusu olduğuna dair ağır bir bağımlılığa sahip olduğumuzu belirten değer. Bunlar biraz zor olabilir, bu yüzden daha önce onları kullanmadıysanız tanıdıklar.

 self.addeventlistener ('getiri', olay = & gt; {
  event.respondwith (
  caches.match (event.request) .Then (yanıtı = ve gt; {
  İade Yanıtı || Almak (Event.Request);
  })
   );
    });

07. Fetch Etkinliğini Uzatın

Şimdi test ederseniz (HTTP sunucusunu sonlandırın ve sayfayı yenileyin), sayfanızın hem çevrimiçi hem de çevrimdışı çalıştığını bulmalısın. Bununla birlikte, sunucu kullanılamadığında farklı içerik veya işlevsellik ile daha akıllı çevrimdışı davranışları daha isteyeceğiniz muhtemeldir.

Bunu başarmak için, bizimizi uzatabiliriz. almak Etkinlik yanıtı, spesifik olarak navigasyon istekleri için kontrol etmek ve bir tespit edildiğinde farklı bir çevrimdışı sayfayla yanıt verin. Bu index_offline.html Dosya, çevrimiçi sayfanızın bir varyasyonu veya tamamen farklı bir şey olabilir ve ayrıca gibi önbelleğe alındığınız diğer kaynakları da kullanabilir. custom.css .

 self.addeventlistener ('getiri', olay = & gt; {
  if (event.request.mode === 'Navigate') {
  event.respondwith (
  (Event.Request) .Catch (error = & gt; {
  console.log ("Sayfa kullanılamıyor. Çevrimdışı içeriği döndürme");
  return caches.match ('./ index_offline.html');
  })
  );
  } Başka {
  event.respondwith (
  caches.match (event.request) .Then (yanıtı = ve gt; {
  İade Yanıtı || Almak (Event.Request);
  })
  );
  }
});

08. Önbelleği Sil

İhtiyacımız olan bir şey daha var. Artık çevrimdışı içeriğinizi değiştirmeyi denerseniz, sayfanızı test ettiğinizde güncellenmemesini bulacaksınız - hala eski sürümü elde edersiniz! Bunun nedeni eski dosyaların hala önbelleğe alınmasıdır.

Servis yapmalarını önlemek için eski dosyaları önbellekten temizlemek için bir şey uygulamanız gerekir. Bu cevap vererek yapılır. aktive etmek Etkinlik ve currentcache'de belirtilen adıyla eşleşmeyen tüm önbellekleri silme. Ardından, çevrimdışı içeriğinizi her bir değiştirdiğinizde, yenilenmesini sağlamak için curercache'ye bir sürüm numarası ekleyebilirsiniz.

 this.addeventlistener ('etkinleştir', olay = & gt; {
  var Activecaches = [currentcache];
  console.log ("Servis çalışanı etkin. Önbelleği kontrol etmek güncel");
  Event.waituntil (
  caches.keys (). Sonra (Keylist = & gt; {
  vaat iade.all (Keylist.map (anahtar = ve gt; {
  if (Activecaches.indexof (tuş) === -1) {
  console.log ("eski önbelleği silmek" + anahtar);
  return caches.delete (anahtar);
  }
  }));
  })
  );
});

Bu makale, Web Designer Dergisi Sayı # 268'de yayınlandı. Şimdi abone olun.

Daha fazla oku:

API'lere bir kodlayıcı rehberi
Üç.js kullanarak webgl ile başlayın
2018 için 12 büyük web tasarım eğilimleri

Çevrimdışı çalışan uygulamaları oluşturun

01. Bir HTTPS Sunucusu

02. Temel bir sayfa ayarlayın

03. Bir servis işçisini kaydedin

04. Kayıt oldunuz.

05. Servis işçisini uygulayın

06. Etkinlik Alma

07. Fetch Etkinliğini Uzatın

08. Önbelleği Sil

Nasıl Yapılır - En Popüler Makaleler

Tiktok'ta bir video nasıl düzenlenir

Bileşenleri canlandırmak için reaksiyon yayını nasıl kullanır

WordPress ile bir müşteri portalı oluşturun

Yerel bir geliştirme ortamı nasıl kurulur

Parlayan bir neon metin efekti oluşturun

Flash oyunlarını HTML5'e dönüştürün

Kendi karakterinizi nasıl yapılır?

InDesign ile karışık mürekkepler oluşturun

Kategoriler