Membuat Progressive Web App dengan Angular CLI

Anda ingin membuat aplikasi Angular dapat diinstal? Tunggu apa 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, yang perlu Anda lakukan hanyalah menjalankan satu perintah:

ng add @angular/pwa

Perintah ini akan:

• Buat pekerja layanan dengan konfigurasi penyimpanan cache default.
• Buat file manifes, yang memberi tahu browser tentang perilaku aplikasi Anda saat diinstal di perangkat pengguna.
• Tambahkan link ke file manifes di index.html.
• Tambahkan tag theme-color <meta> ke index.html.
• Buat ikon aplikasi di direktori src/assets.

Secara default, pekerja layanan akan didaftarkan dalam beberapa detik setelah halaman pertama dimuat. Jika tidak, pertimbangkan untuk memodifikasi registrationStrategy.

Menyesuaikan PWA

Postingan Precaching dengan pekerja layanan Angular menjelaskan cara mengonfigurasi pekerja layanan Angular. Di sana, Anda dapat menemukan cara menentukan sumber daya mana yang Anda inginkan untuk di-cache oleh pekerja layanan dan strategi apa yang harus digunakan untuk melakukannya.

File manifes aplikasi memungkinkan Anda menentukan nama aplikasi, nama pendek, ikon, warna tema, dan detail lainnya. Baca 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 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 Add to Home screen:

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

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 dalam file manifest.webmanifest agar sesuai dengan project Anda.
3. Perbarui ikon di direktori src/assets/icons agar sesuai dengan project Anda.
4. Anda juga dapat mengedit theme-color di index.html.