Anda ingin membuat aplikasi Angular dapat diinstal? Tunggu apa lagi!
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>
keindex.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:
- Tambahkan
@angular/pwa
ke project Anda menggunakan Angular CLI. - Edit opsi dalam file
manifest.webmanifest
agar sesuai dengan project Anda. - Perbarui ikon di direktori
src/assets/icons
agar sesuai dengan project Anda. - Anda juga dapat mengedit
theme-color
diindex.html
.