Membuat Progressive Web App dengan Angular CLI

Ingin membuat aplikasi Angular Anda dapat diinstal? Jangan tunggu lagi!

Minko Gechev

Dalam postingan ini, Anda akan mempelajari cara menggunakan antarmuka command line (CLI) Angular untuk membuat Progressive Web App (PWA).

Anda dapat menemukan contoh kode dari panduan ini di GitHub.

Membuat PWA yang dapat diinstal

Untuk menjadikan aplikasi Angular Anda sebagai PWA, Anda hanya perlu menjalankan satu perintah:

ng add @angular/pwa

Perintah ini akan:

• Membuat pekerja layanan dengan konfigurasi caching default.
• Membuat file manifes, yang memberi tahu browser cara aplikasi Anda berperilaku saat diinstal di perangkat pengguna.
• Menambahkan link ke file manifes di index.html.
• Menambahkan tag theme-color <meta> ke index.html.
• Membuat ikon aplikasi di direktori src/assets.

Secara default, pekerja layanan Anda harus terdaftar dalam beberapa detik setelah pemuatan halaman pertama. Jika tidak, pertimbangkan untuk mengubah registrationStrategy.

Menyesuaikan PWA

Postingan Menyimpan ke cache terlebih dahulu dengan pekerja layanan Angular menjelaskan cara mengonfigurasi pekerja layanan Angular. Di sana, Anda dapat menemukan cara menentukan resource mana yang ingin Anda cache oleh pekerja layanan dan strategi apa yang harus digunakan untuk melakukannya.

File manifes aplikasi memungkinkan Anda menentukan nama aplikasi, nama singkat, ikon, warna tema, dan detail lainnya. Baca tentang kumpulan lengkap properti yang dapat Anda tetapkan di postingan Menambahkan manifes aplikasi web.

Lihat file manifes yang dihasilkan oleh Angular CLI:

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Anda dapat menyesuaikan salah satu properti ini dengan mengubah nilai yang relevan di manifest.webmanifest.

PWA mereferensikan file manifesnya dengan elemen link di index.html. Setelah menemukan referensi, browser akan menampilkan perintah Tambahkan ke Layar utama:

Karena skema ng-add menambahkan semua yang diperlukan untuk membuat aplikasi Anda dapat diinstal, skema ini akan menghasilkan beberapa ikon pintasan yang ditampilkan setelah pengguna menambahkan aplikasi ke desktopnya:

Pastikan Anda menyesuaikan properti dan ikon manifes sebelum men-deploy PWA ke produksi.

Kesimpulan

Untuk membuat aplikasi Angular yang dapat diinstal:

1. Tambahkan @angular/pwa ke project Anda menggunakan Angular CLI.
2. Edit opsi di file manifest.webmanifest agar sesuai dengan project Anda.
3. Perbarui ikon di direktori src/assets/icons agar sesuai dengan project Anda.
4. Secara opsional, edit theme-color di index.html.