Jadikan aplikasi Anda offline dengan pekerja layanan

Pekerja layanan dapat digunakan untuk meningkatkan waktu pemuatan dan dukungan offline untuk situs dan aplikasi web Anda. Dalam tutorial ini kami akan menunjukkan kepada Anda bagaimana secara progresif meningkatkan aplikasi web dengan pekerja layanan. Pertama kita akan membahas apa itu pekerja layanan dan bagaimana siklus hidupnya bekerja, maka kami akan menunjukkan kepada Anda cara menggunakannya kemudian untuk mempercepat situs Anda (halaman ini) dan menawarkan konten offline (halaman 2).

Maka kami akan menunjukkan kepada Anda caranya Cara Membangun Aplikasi dengan pekerja layanan. Anda akan belajar bagaimana membentuk pekerja telanjang yang akan men-cache dan melayani aset statis (memberikan peningkatan kinerja besar pada beban berikutnya), lalu bagaimana cara menyimpan respons API dinamis dan memberikan dukungan Offline Aplikasi Demo kami. Pertama, mari kita lihat apa sebenarnya pekerja layanan, dan bagaimana mereka berfungsi.

Membangun situs web? Merampingkan proses Anda dengan hebat Pembangun Situs Web , dan pertahankan dengan yang layak hosting web. layanan. Dan dapatkan penyimpanan Anda diurutkan dengan ini penyimpanan awan pilihan.

Apa itu pekerja layanan?

Jadi apa itu pekerja layanan? Ini adalah skrip, ditulis dalam JavaScript, bahwa browser Anda berjalan di latar belakang. Itu tidak mempengaruhi utas utama (di mana JavaScript biasanya berjalan pada halaman web), dan tidak akan bertentangan dengan kode aplikasi Anda atau memengaruhi kinerja runtime.

Seorang pekerja layanan tidak memiliki akses langsung ke DOM atau acara dan interaksi pengguna yang terjadi di halaman web itu sendiri. Anggap saja sebagai lapisan yang berada di antara halaman web dan jaringan, yang memungkinkannya untuk mencegat dan memanipulasi permintaan jaringan (mis. Permintaan Ajax) yang dibuat oleh halaman Anda. Ini membuatnya ideal untuk mengelola cache dan mendukung penggunaan offline.

Siklus hidup pekerja

Kehidupan seorang pekerja layanan mengikuti aliran sederhana, tetapi bisa sedikit membingungkan ketika Anda terbiasa dengan skrip JS hanya bekerja segera:

Menginstal & GT; Menunggu (diinstal) & gt; Mengaktifkan & gt; Diaktifkan & gt; Mubazir

Ketika halaman Anda pertama kali dimuat, kode pendaftaran yang kami tambahkan ke index.html Mulai instalasi pekerja layanan. Ketika tidak ada pekerja yang ada, pekerja layanan baru akan segera diaktifkan setelah instalasi. Halaman web hanya dapat memiliki satu pekerja layanan yang aktif pada suatu waktu.

Jika seorang pekerja sudah diinstal, pekerja layanan baru akan diinstal dan kemudian duduk di langkah menunggu sampai halaman ditutup sepenuhnya dan kemudian dimuat ulang. Sederhananya menyegarkan tidak cukup karena Anda mungkin memiliki tab lain terbuka. Anda perlu memastikan semua contoh halaman ditutup jika pekerja baru tidak akan aktif. Anda tidak harus menutup tab, Anda bisa menavigasi ke situs lain dan kembali.

Kedua Install dan mengaktifkan Acara hanya akan terjadi satu kali per pekerja. Setelah diaktifkan, pekerja layanan kemudian akan memiliki kontrol halaman dan dapat mulai menangani acara seperti mengambil untuk memanipulasi permintaan.

Akhirnya seorang pekerja jasa akan menjadi mubazir jika browser mendeteksi bahwa file pekerja itu sendiri telah diperbarui atau jika instalasi atau aktivasi gagal. Browser akan mencari byte perbedaan untuk menentukan apakah skrip pekerja telah diperbarui.

Penting untuk dicatat bahwa Anda tidak boleh mengubah (atau Rev) nama pekerja layanan Anda. Anda juga tidak harus men-cache file pekerja itu sendiri di server, karena Anda tidak akan dapat memperbaruinya dengan mudah, meskipun browser sekarang cukup pintar untuk mengabaikan header caching.

01. Klon aplikasi demo

Oke, mari kita mulai belajar cara membangun aplikasi web dengan bantuan dari pekerja layanan. Untuk tutorial ini, Anda akan memerlukan versi Node.js dan NPM terbaru yang diinstal pada komputer Anda.

Kami telah merobohkan aplikasi demo yang akan kami gunakan sebagai dasar untuk tutorial ini ( mengkloning aplikasi demo di sini ). Aplikasi ini adalah proyek kecil yang menyenangkan yang mengambil ramalan cuaca lima hari berdasarkan lokasi pengguna. Ini kemudian akan memeriksa apakah hujan diperkirakan sebelum akhir hari dan memperbarui UI sesuai.

Ini telah dibangun secara tidak efisien (dengan sengaja) menggunakan perpustakaan besar dan tidak perlu seperti jQuery dan bootstrap, dengan gambar besar yang tidak dibuka untuk menunjukkan perbedaan kinerja saat menggunakan pekerja layanan. Saat ini beratnya pada 4,1MB yang konyol.

02. Dapatkan kunci API Anda

Untuk mengambil data cuaca dari API, Anda harus mendapatkan kunci API gratis dari Openweathermap. :

Setelah Anda mendapatkan kunci, buka index.html dan cari window.api_key. variabel dalam & lt; head & gt; . Tempel kunci Anda ke nilai:

    window.API_KEY = 'paste-your-key-here';

03. Mulai server pengembangan

Sekarang kami siap untuk mulai mengerjakan proyek. Pertama-tama mari kita instal dependensi dengan menjalankan:

    npm install

Ada dua tugas untuk alat build. Lari NPM Mulai Untuk memulai server pengembangan pada port 3000. Jalankan NPM Run Build. untuk menyiapkan versi 'produksi'. Ingatlah bahwa ini hanya demo, jadi sebenarnya bukan versi produksi - tidak ada minifikasi atau apa pun - file hanya 'revved'.

Algoritma digunakan untuk membuat hash, seperti 9C616053E5, dari konten file. Algoritma akan selalu menghasilkan hash yang sama untuk konten yang sama, artinya selama Anda tidak memodifikasi file, hash tidak akan berubah. Hash kemudian ditambahkan ke nama file, jadi misalnya styles.css mungkin menjadi gaya-9c616053e5.css. Hash mewakili revisi file - karenanya 'revved'.

Anda dapat dengan aman menyimpan setiap revisi file di server Anda tanpa harus membatalkan cache Anda, yang mahal, atau khawatir tentang beberapa cache pihak ketiga lainnya yang menyajikan versi yang salah.

04. Memperkenalkan Pekerja Layanan Anda

Sekarang mari kita mulai dengan pekerja layanan kami. Buat file bernama sw.js di root dari src direktori. Kemudian tambahkan dua pendengar acara ini untuk mencatat Install dan mengaktifkan Acara:

 self.addeventlistener ('install', (acara) = & gt; {
      konsol.log (acara);
    });

    self.addeventlistener ('aktifkan', (acara) = & gt; {
      konsol.log (acara);
    }); 

Itu diri Variabel di sini mewakili ruang lingkup baca-read-only pekerja layanan. Ini agak seperti jendela objek di halaman web.

Selanjutnya kita perlu memperbarui file index.html kita dan menambahkan perintah untuk menginstal pekerja layanan. Tambahkan skrip ini tepat sebelum penutupan & lt; / body & gt; menandai. Ini akan mendaftarkan pekerja kami dan mencatat statusnya saat ini.

 & lt; script & gt;
     Jika ('ServiceWorker' di Navigator) {
       navigator.serviceworker.register ('/ sw.js')
         . Kemudian (fungsi (reg) {
           if (reg.installing) {
             konsol.log ('sw installing');
           } else if (reg.waiting) {
             konsol.log ('sw waiting');
           } else if (reg.active) {
             konsol.log ('sw diaktifkan');
           }
         }). menangkap (fungsi (kesalahan) {
           // registrasi gagal
           konsol.log ('pendaftaran gagal dengan' + kesalahan);
         });
     }
   & lt; / script & gt; 

Mulai server pengembangan Anda dengan berjalan NPM Mulai dan buka halaman di browser modern. Kami akan merekomendasikan menggunakan Google Chrome karena memiliki dukungan pekerja-pekerja yang baik di devtools, yang akan kami maksudkan sepanjang tutorial ini. Anda harus melihat tiga hal yang masuk ke konsol Anda; dua dari pekerja layanan untuk Install dan mengaktifkan Acara, dan yang lainnya akan menjadi pesan dari pendaftaran.

05. Aktifkan pekerja

Kita akan memberi tahu pekerja kita untuk melewati langkah tunggu dan aktifkan sekarang. Buka file sw.js dan tambahkan baris ini di mana saja di dalam Install Pendengar acara:

 self.kipwaiting (); 

Sekarang, ketika kita memperbarui skrip pekerja, itu akan mengambil kontrol halaman segera setelah instalasi. Perlu diingat bahwa ini dapat berarti pekerja baru akan mengendalikan halaman yang mungkin telah dimuat oleh versi sebelumnya dari pekerja Anda - jika itu akan menyebabkan masalah, jangan gunakan opsi ini di aplikasi Anda.

Anda dapat mengkonfirmasi ini dengan menavigasi dari halaman dan kemudian kembali. Anda harus melihat Install dan mengaktifkan Acara menembak lagi ketika pekerja baru telah diinstal.

Chrome DevTools memiliki opsi bermanfaat yang berarti Anda dapat memperbarui pekerja Anda hanya dengan memuat ulang. Buka DevTools dan buka tab Aplikasi, lalu pilih Pekerja Layanan dari kolom kiri. Di bagian atas panel adalah kotak centang berlabel pembaruan pada Reload, centang. Pekerja Anda yang diperbarui sekarang akan diinstal dan diaktifkan pada refresh.

06. Konfirmasikan perubahan

Mari kita konfirmasikan ini dengan menambahkan konsol.log ('foo') Panggil di salah satu pendengar acara dan menyegarkan halaman. Ini menangkap kami karena kami berharap untuk melihat log in konsol ketika kami menyegarkan, tetapi yang kami lihat adalah pesan 'ACTICATED'. Ternyata Chrome menyegarkan halaman dua kali ketika pembaruan pada opsi isi ulang ditandai.

Anda dapat mengkonfirmasi ini dengan mencentang kotak centang Log Conerve di panel Pengaturan Konsol dan menyegarkan lagi. Anda harus melihat instal dan mengaktifkan acara yang dicatat, bersama dengan 'foo', diikuti oleh 'dinavigasi ke http: // localhost: 3000 /' untuk menunjukkan bahwa halaman itu dimuat ulang dan kemudian pesan 'SW Activated'.

07. Lacak acara fetch

Saatnya menambahkan pendengar lain. Kali ini kita akan melacak mengambil Acara yang dipecat setiap kali halaman memuat sumber daya, seperti file CSS, gambar atau bahkan respons API. Kami akan membuka cache, mengembalikan respons permintaan ke halaman dan kemudian - di latar belakang - cache respons. Pertama mari kita tambahkan pendengar dan refresh sehingga Anda dapat melihat apa yang terjadi. Di konsol Anda harus melihat banyak FetchEvent. log.

 self.addeventlistener ('fetch', (acara) = & gt; {
 konsol.log (acara);
}); 

Mode Servis kami menggunakan BrowserSync, yang menambahkan skripnya sendiri ke halaman dan membuat permintaan WebSet. Anda akan melihat penjagaan untuk ini juga, tetapi kami ingin mengabaikannya. Kami juga hanya ingin cache mendapatkan permintaan dari domain kami sendiri. Jadi mari kita tambahkan beberapa hal untuk mengabaikan permintaan yang tidak diinginkan, termasuk secara eksplisit mengabaikan Dan Jalur Indeks:

 self.addeventlistener ('fetch', (acara) = & gt; {
 // abaikan permintaan crossdomain
 if (! event.request.url.startswith (diri.location.origin)) {
   kembali;
 }
 // abaikan permintaan non-dapatkan
 if (event.request.method! == 'get') {
   kembali;
 }
 // abaikan sinkronisasi browser
 if (event.request.url.indexof ('browser-sync') & gt; -1) {
   kembali;
 }
 // Mencegah rute indeks di-cache
 if (event.request.url === (self.location.origin + '/')) {
   kembali;
 }
 // cegah index.html di-cache
 if (event.request.url.endswith ('index.html')) {
   kembali;
 }
 konsol.log (acara);
}); 

Sekarang log harus jauh lebih bersih dan aman untuk memulai caching.

08. Cache aset

Sekarang kita bisa mulai melakukan caching respons ini. Pertama, kita perlu memberi nama cache kita. Mari kita sebut milik kita v1-aset. . Tambahkan baris ini ke bagian atas file SW.JS:

 const assetscachename = 'v1-aset'; 

Maka kita perlu membajak FCHEVENTS sehingga kita dapat mengontrol apa yang dikembalikan ke halaman. Kita bisa melakukan itu menggunakan acara Tanggapi metode. Metode ini menerima janji sehingga kami dapat menambahkan kode ini, mengganti konsol.log. :

 // Katakan ambil untuk merespons dengan rantai janji ini
 event.espondedwith (
   // buka cache
   cache.open (asetscachename)
     .then ((cache) = & gt; {
       // Buat permintaan ke jaringan
       Pengambilan Pengambilan (Event.Request)
         . Kemudian ((respons) = & gt; {
           // Cache respons
           cache.put (event.request, response.clone ());
           // kembalikan respons aslinya ke halaman
           respons pengembalian;
         });
     })
 ); 

Ini akan meneruskan permintaan ke jaringan kemudian menyimpan respons dalam cache, sebelum mengirim respons asli kembali ke halaman.

Perlu dicatat di sini bahwa pendekatan ini tidak akan benar-benar men-cache respons sampai kedua kalinya pengguna memuat halaman. Pertama kali akan menginstal dan mengaktifkan pekerja, tetapi pada saat itu mengambil Pendengar sudah siap, semuanya akan diminta.

Refresh beberapa kali dan periksa cache di DevTools & GT; Tab aplikasi. Perluas pohon penyimpanan cache di kolom kiri dan Anda akan melihat cache Anda dengan semua tanggapan yang tersimpan.

09. Sajikan dari cache

Semuanya di-cache tetapi kami sebenarnya tidak menggunakan cache untuk melayani file apa pun. Mari kita kaitkan itu sekarang. Pertama kita akan mencari pasangan untuk permintaan dalam cache dan jika itu ada kita akan melayani itu. Jika tidak ada, kami akan menggunakan jaringan dan kemudian cache respons.

// Katakan ambil untuk merespons dengan rantai ini
 event.espondedwith (
   // buka cache
   cache.open (asetscachename)
     .then ((cache) = & gt; {
       // cari permintaan yang cocok di cache
       Return cache.match (event.request)
         . Kemudian ((cocok) = & gt; {
           // Jika pertandingan ditemukan mengembalikan versi yang di-cache terlebih dahulu
           Jika (cocok) {
             kembali cocok;
           }
           // Kalau tidak, lanjutkan ke jaringan
           Pengambilan Pengambilan (Event.Request)
             . Kemudian ((respons) = & gt; {
               // Cache respons
               cache.put (event.request, response.clone ());
               // kembalikan respons aslinya ke halaman
               respons pengembalian;
             });
         });
     })
); 

Simpan file dan refresh. Periksa devtools & gt; Tab Jaringan dan Anda harus melihat (dari serviceworker) yang tercantum dalam kolom ukuran untuk masing-masing aset statis.

Foth, kita sudah selesai. Untuk sejumlah kecil kode, ada banyak yang harus dipahami. Anda harus melihat itu menyegarkan halaman setelah semua aset di-cache cukup tajam tetapi mari kita lakukan pemeriksaan beban cepat (tidak ilmiah) pada koneksi throttled (devtools & gt; tab jaringan).

Tanpa pekerja layanan, memuat melalui jaringan 3G cepat yang disimulasikan memakan waktu hampir 30 detik untuk memuat semuanya. Dengan pekerja layanan, dengan koneksi tipis yang sama tetapi memuat dari cache, dibutuhkan hanya sebentar.

Periksa kotak offline dan refresh dan Anda juga akan melihat bahwa halaman memuat tanpa koneksi, meskipun kita tidak bisa mendapatkan data perkiraan dari API. Pada halaman 2 Kami akan kembali ke ini dan mempelajari cara men-cache juga API.

Halaman Selanjutnya: Gunakan Pekerja Layanan untuk Menawarkan Akses Online

• 1
• 2.

Halaman saat ini: Halaman 1: Pemuatan Lebih Cepat