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 yang terbatas—atau tidak memiliki akses sama sekali—fungsi aplikasi web dapat menurun secara signifikan dan sering kali gagal. Menggunakan pekerja layanan untuk menyediakan precaching memungkinkan Anda menangkap permintaan jaringan dan memberikan 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 pra-caching di aplikasi Angular. Diasumsikan Anda sudah terbiasa dengan precaching dan pekerja layanan secara umum. Jika Anda perlu mengingat kembali, lihat postingan Pekerja layanan dan Cache Storage API.

Memperkenalkan pekerja layanan Angular

Tim Angular menawarkan modul pekerja layanan dengan fungsi precache 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 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 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 jalankan 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 Network

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-cache aset statis yang ditentukan dalam file manifes ngsw.json yang dihasilkan.

Namun, satu aset penting tidak ada: nyan.png. Untuk mem-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 di folder /assets ke grup aset resource app. Karena installMode untuk grup aset ini disetel ke prefetch, pekerja layanan akan melakukan precache semua aset yang ditentukan—yang sekarang menyertakan gambar PNG.

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

Kesimpulan

Menggunakan pekerja layanan untuk precaching bisa meningkatkan performa aplikasi Anda dengan menyimpan aset ke cache lokal, yang membuatnya lebih dapat diandalkan di 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 oleh pekerja layanan dengan mengedit ngsw-config.json.