Precaching dengan pekerja layanan Angular

Gunakan pekerja layanan Angular untuk membuat aplikasi Anda lebih cepat dan lebih andal di jaringan dengan konektivitas yang buruk.

Minko Gechev

Menangani konektivitas terbatas

Jika pengguna memiliki akses jaringan terbatas—atau tidak sama sekali—fungsi aplikasi web dapat menurun secara signifikan dan sering kali gagal. Menggunakan service worker untuk menyediakan pra-cache memungkinkan Anda mencegat permintaan jaringan dan mengirimkan respons langsung dari cache lokal, bukan mengambilnya dari jaringan. Setelah aset aplikasi Anda di-cache, pendekatan ini dapat benar-benar mempercepat aplikasi dan membuatnya berfungsi saat pengguna offline.

Postingan ini menjelaskan cara menyiapkan pra-caching di aplikasi Angular. Postingan ini mengasumsikan bahwa Anda sudah memahami pra-caching dan pekerja layanan secara umum. Jika Anda memerlukan pengingat, lihat postingan Service worker dan Cache Storage API.

Memperkenalkan pekerja layanan Angular

Tim Angular menawarkan modul pekerja layanan dengan fungsi pra-cache yang terintegrasi dengan baik dengan framework dan antarmuka command line (CLI) Angular.

Untuk menambahkan pekerja layanan, jalankan perintah ini di CLI:

ng add @angular/pwa

@angular/service-worker dan @angular/pwa kini akan diinstal di aplikasi dan akan muncul di package.json. Skema ng-add juga menambahkan file bernama ngsw-config.json ke project, yang dapat Anda gunakan untuk mengonfigurasi pekerja layanan. (File ini menyertakan konfigurasi default yang akan Anda sesuaikan nanti.)

Sekarang, build project untuk produksi:

ng build --prod

Di dalam direktori dist/service-worker-web-dev, Anda akan menemukan file bernama ngsw.json. File ini memberi tahu pekerja layanan Angular cara meng-cache aset di aplikasi. File ini dibuat selama proses build berdasarkan konfigurasi (ngsw-config.json) dan aset yang dihasilkan pada waktu build.

Sekarang, mulai server HTTP di direktori yang berisi aset produksi aplikasi Anda, buka URL publik, dan lihat permintaan jaringannya di Chrome DevTools:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.

Perhatikan bahwa tab jaringan memiliki banyak aset statis yang langsung didownload di latar belakang oleh skrip ngsw-worker.js:

Ini adalah pekerja layanan Angular yang melakukan pra-caching aset statis yang ditentukan dalam file manifes ngsw.json yang dihasilkan.

Namun, satu aset penting tidak ada: nyan.png. Untuk melakukan pra-cache gambar ini, Anda perlu menambahkan pola yang menyertakannya ke ngsw-config.json, yang berada di root ruang kerja:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/assets/*.png"
        ]
      }
    },
    ...
}

Perubahan ini menambahkan semua gambar PNG di folder /assets ke grup aset resource app. Karena installMode untuk grup aset ini ditetapkan ke prefetch, pekerja layanan akan melakukan pra-cache semua aset yang ditentukan—yang kini menyertakan gambar PNG.

Menentukan aset lain untuk dipra-cache juga mudah: perbarui pola di grup aset resource app.

Kesimpulan

Menggunakan pekerja layanan untuk pra-caching dapat meningkatkan performa aplikasi Anda dengan menyimpan aset ke cache lokal, sehingga membuatnya lebih andal di jaringan yang buruk. Untuk menggunakan pra-caching dengan Angular dan Angular CLI:

1. Tambahkan paket @angular/pwa ke project Anda.
2. Kontrol apa yang di-cache pekerja layanan dengan mengedit ngsw-config.json.