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

Saat pengguna memiliki akses jaringan yang terbatas—atau tidak sama sekali—fungsi aplikasi web dapat menurunkan performa secara signifikan dan sering kali gagal. Dengan menggunakan service worker untuk menyediakan precaching, Anda dapat mencegat permintaan jaringan dan mengirimkan respons langsung dari cache lokal, bukan mengambilnya dari jaringan. Setelah aset aplikasi di-cache, pendekatan ini benar-benar dapat mempercepat aplikasi dan membuatnya berfungsi saat pengguna sedang offline.

Postingan ini membahas cara menyiapkan precaching di aplikasi Angular. Tutorial ini mengasumsikan Anda sudah terbiasa dengan precaching dan pekerja layanan secara umum. Jika Anda perlu mengingat kembali, lihat postingan Service worker dan Cache Storage API.

Memperkenalkan pekerja layanan Angular

Tim Angular menawarkan modul pekerja layanan dengan fungsi precaching yang terintegrasi secara 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 seharusnya 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 tersebut menyertakan konfigurasi default yang akan Anda sesuaikan nanti.)

Sekarang, bangun 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 dalam aplikasi. File ini dihasilkan selama proses build berdasarkan konfigurasi (ngsw-config.json) dan aset yang dihasilkan pada waktu build.

Sekarang mulailah server HTTP di direktori yang berisi aset produksi aplikasi Anda, buka URL publik, dan periksa 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 precache 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 akan menambahkan semua gambar PNG dalam folder /assets ke grup aset resource app. Karena installMode untuk grup aset ini disetel ke prefetch, pekerja layanan akan melakukan pra-cache semua aset yang ditentukan—yang sekarang menyertakan gambar PNG.

Menentukan aset lain yang akan di-pracache sama mudahnya: perbarui pola di grup aset resource app.

Kesimpulan

Menggunakan pekerja layanan untuk precaching dapat meningkatkan performa aplikasi Anda dengan menyimpan aset ke cache lokal, yang membuatnya lebih dapat diandalkan pada jaringan yang buruk. Untuk menggunakan precaching 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.