Bangun aplikasi yang berfungsi offline

Sep 12, 2025

Bagaimana caranya

Untuk waktu yang lama, fungsionalitas offline, sinkronisasi latar belakang dan pemberitahuan push telah membedakan aplikasi asli dari rekan web mereka. Itu Layanan Pekerja Layanan adalah teknologi yang mengubah permainan yang membesarkan lapangan bermain. Dalam tutorial ini, kami akan menggunakannya untuk membangun halaman yang dapat menyajikan konten bahkan sementara tidak ada koneksi internet.

Unduh kode dari filesilo

01. Server HTTPS

Cara termudah untuk berpikir tentang pekerja layanan adalah sebagai sepotong kode yang dipasang oleh situs pada mesin klien, berjalan di latar belakang, dan kemudian memungkinkan permintaan yang dikirim ke situs itu untuk dicegat dan dimanipulasi. Karena ini adalah kemampuan yang kuat, untuk bekerja dengan pekerja layanan dalam lingkungan hidup yang Anda butuhkan untuk menjalankan HTTPS. Ini memastikan mereka tidak dapat dieksploitasi, dengan memastikan pekerja layanan yang diterima browser dari halaman asli.

Namun untuk keperluan pengembangan, kami dapat berjalan tanpa https sejak itu http: // localhost / diizinkan sebagai pengecualian untuk aturan ini. Cara paling sederhana untuk memulai adalah dengan NPM http-server. paket.

 NPM Instal HTTP-server -g
http-server -p 8000 -c-1

02. Siapkan halaman dasar

Tidak ada apa-apa di server sekarang, jadi mari kita buat halaman dasar untuk menyajikan. Kami akan membuat file index.html baru, dan ketika kami menjalankan server sekarang akan dapat diakses di http: // localhost: 8000 .

Pada tahap ini, Anda akan menemukan bahwa jika Anda mengakhiri server HTTP dan menyegarkan halaman di browser, Anda akan mendapatkan halaman kesalahan karena situs tidak dapat dihubungi. Ini sepenuhnya diharapkan karena kami belum menyimpan konten offline apa pun.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "UTF-8" / & gt;
  & lt; judul & gt; pekerja layanan & lt; / judul & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; tautan rel = "stylesheet" type = "teks / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; tubuh & gt;
  & lt; header & gt;
  & lt; h1 & gt; selamat datang & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "konten" & gt;
  & lt; p & gt; konten di sini & lt; / p & gt;
  & lt; img src = "kitty.jpg" width = "100%" & gt;
  & lt; / div & gt;
  & lt; / body & gt;
& lt; / html & gt;

03. Daftarkan Pekerja Layanan

Kami sekarang telah menjalankan halaman yang cukup biasa-biasa saja, dan saatnya untuk mulai berpikir untuk menerapkan pekerja layanan. Sebelum kita mendapatkan coding, ada baiknya meluangkan waktu untuk memahami siklus hidup pekerja.

Proses dimulai dengan 'pendaftaran' pekerja layanan di JavaScript Anda, yang memberitahu browser untuk mulai menginstal pekerja - langkah pertama siklus hidupnya. Sepanjang siklus hidupnya, pekerja layanan akan berada di salah satu negara berikut:

Menginstal: Setelah seorang pekerja layanan telah terdaftar, instalasi biasanya digunakan untuk mengunduh dan cache konten statis
Diinstal: Pekerja secara teoritis siap digunakan tetapi tidak segera aktif
Mengaktifkan: Pekerja layanan yang diinstal akan mengaktifkan sendiri jika tidak ada pekerja layanan yang ada, atau kondisi tertentu memimpin yang sudah ada untuk kedaluwarsa; Aktivasi biasanya digunakan untuk menghapus file lama dari konten offline yang di-cache
Diaktifkan: Pekerja layanan sekarang memiliki kontrol atas dokumen, dan dapat menangani permintaan
Mubazir: Jika pekerja layanan gagal menginstal atau mengaktifkan, atau jika digantikan oleh pekerja layanan yang lebih baru

04. Periksa Anda terdaftar

Mari mendaftarkan seorang pekerja layanan. Ini secara efektif menunjuk browser ke file javascript yang mendefinisikan perilaku pekerja layanan. Pendaftaran dilakukan dengan menggunakan objek SERVICEWNER yang merupakan titik masuk ke API. Kami juga akan memeriksa API sebenarnya ada di browser sebelum mencoba melakukannya.

Itu daftar() Fungsi dapat dengan aman dipanggil setiap kali halaman memuat, dan browser akan menentukan apakah pekerja layanan telah terdaftar.

 Jika ('ServiceWorker' di Navigator) {
  window.addeventlistener ('muat', fungsi () {
  navigator.serviceworker.register ('ServiceWorker.js', {Scope: '
  Console.Log ("Pekerja layanan berhasil mendaftar.");
  }, fungsi (kesalahan) {
  konsol.log ("kesalahan pendaftaran pekerja layanan:" + kesalahan);
  });
  });
}

05. Menerapkan Pekerja Layanan

Selanjutnya kita perlu mengimplementasikan pekerja layanan itu sendiri. Pekerja layanan dapat mendengarkan berbagai peristiwa yang terkait dengan siklus hidup mereka sendiri dan aktivitas pada halaman. Yang paling penting adalah instal, aktifkan dan ambil.

Mari kita mulai dengan membuat pendengar untuk Install Acara, yang memicu setelah instalasi pekerja selesai. Ini memungkinkan kami untuk menginstruksikan pekerja layanan untuk menambahkan beberapa konten offline di folder saat ini ke cache. Kita juga perlu memberi nama cache kita - karena cache lama dapat bertahan, memperbarui / versi nama cache ini memungkinkan Anda untuk menyajikan versi konten yang lebih baru nanti.

 var currentCache = 'Demo-cache';
self.addeventlistener (instal ', acara = & gt; {
  peristiwa.wauntilil (
  cache.open (currentCache). Kemudian (fungsi (cache) {
  konsol.log ("menambahkan konten ke cache.");
  kembalikan cache.adall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './custom.css'
  ];
  })
  );
});

06. ambil acara

Halaman kami sekarang akan membentuk konten saat dimuat, tetapi kami memerlukan beberapa mekanisme untuk mencegat permintaan dan mengarahkannya ke cache ini. Untuk melakukan ini, kita perlu mendengarkan mengambil acara, yang dipicu ketika permintaan seperti mendapatkan kami index.html file dibuat di seluruh jaringan. Kami kemudian mencocokkan permintaan terhadap cache, dan menyajikan sumber daya yang di-cache jika ditemukan. Kalau tidak, kami kembali ke permintaan API fetch ke server.

Nilainya pada saat ini mencatat bahwa kami memiliki ketergantungan yang berat pada janji javascript untuk bekerja. Ini bisa sedikit rumit, jadi layak untuk membiasakan jika Anda belum menggunakannya sebelumnya.

 self.addeventlistener ('fetch', event = & gt; {
  event.espondedwith (
  cache.match (event.request). Kemudian (respons = & gt; {
  Return Response || ambil (event.request);
  })
   );
    });

07. Perpanjang acara fetch

Jika Anda mengujinya sekarang (hentikan server HTTP dan refresh halaman), Anda harus menemukan bahwa halaman Anda berfungsi online dan offline. Namun, kemungkinan Anda akan menginginkan perilaku offline yang lebih cerdas, dengan konten atau fungsi yang berbeda tersedia ketika server tidak tersedia.

Untuk mencapai ini, kita dapat memperluas mengambil Respons peristiwa lebih lanjut untuk memeriksa secara khusus untuk permintaan navigasi dan merespons dengan halaman offline yang berbeda ketika seseorang terdeteksi. Ini index_offline.html. file dapat menjadi variasi dari halaman online Anda, atau sesuatu yang sama sekali berbeda, dan juga dapat menggunakan sumber daya lain yang telah Anda centang seperti custom.css. .

 self.addeventlistener ('fetch', event = & gt; {
  if (event.request.mode === 'navigate') {
  event.espondedwith (
  ambil (event.quest) .catch (error = & gt; {
  konsol.log ("halaman tidak tersedia. mengembalikan konten offline.");
  Kembalikan cache.match ('./ index_offline.html');
  })
  );
  } lain {
  event.espondedwith (
  cache.match (event.request). Kemudian (respons = & gt; {
  Return Response || ambil (event.request);
  })
  );
  }
});

08. Hapus cache

Ada satu hal lagi yang kita butuhkan. Jika Anda sekarang mencoba memodifikasi konten offline Anda, Anda akan menemukannya tidak memperbarui ketika Anda menguji halaman Anda - Anda masih mendapatkan versi lama! Ini karena file yang lebih lama masih di-cache.

Anda perlu menerapkan sesuatu untuk membersihkan file yang sudah ketinggalan zaman dari cache untuk mencegahnya disajikan. Ini dilakukan dengan menanggapi mengaktifkan Acara dan menghapus semua cache yang tidak cocok dengan nama yang ditentukan dalam CurrentCache. Anda kemudian dapat menambahkan nomor versi ke CurrentCache setiap kali Anda memodifikasi konten offline Anda, untuk memastikan itu di-refresh.

 this.addeventlistener ('aktifkan', acara = & gt; {
  var activeCaches = [CurrentCache];
  konsol.log ("pekerja layanan diaktifkan. Cache memeriksa terbaru.");
  peristiwa.wauntilil (
  caches.keys (). lalu (keylist = & gt; {
  return janji.all (keylist.map (kunci = & gt; {
  If (ActiveCaches.indexof (kunci) === -1) {
  konsol.log ("menghapus cache lama" + tombol);
  pengembalian cache.delete (kunci);
  }
  }));
  })
  );
});

Artikel ini diterbitkan dalam Majalah Web Designer Magazine # 268. Berlangganan sekarang.

Baca lebih lajut:

Panduan Coder untuk API
Mulailah dengan WebGL menggunakan three.js
12 tren desain web besar untuk 2018

Bangun aplikasi yang berfungsi offline

01. Server HTTPS

02. Siapkan halaman dasar

03. Daftarkan Pekerja Layanan

04. Periksa Anda terdaftar

05. Menerapkan Pekerja Layanan

06. ambil acara

07. Perpanjang acara fetch

08. Hapus cache

Bagaimana caranya - Artikel Terpopuler

Gunakan Adobe XD untuk membuat interaksi mikro

Mulai dengan BULMA

Memahami Properti Tampilan CSS

Cara melukis cityscape dengan blok warna

Buat karakter dengan pose yang kuat di Photoshop

Gambarlah potret pensil seekor anjing

Bangun tata letak kompleks dengan Postcss-Flexbox

Cara Mengambil Pergerakan dalam Render 3D Anda

Kategori