Setelah pengguna menginstal PWA Anda, PWA akan:
- Memiliki ikon di peluncur, layar utama, menu mulai, atau launchpad.
- Muncul sebagai hasil saat pengguna menelusuri aplikasi di perangkatnya.
- Memiliki jendela terpisah dalam sistem operasi.
- Memiliki dukungan untuk kemampuan tertentu.
Kriteria penginstalan
Setiap browser memiliki kriteria yang menandai apakah situs atau aplikasi web adalah Progressive Web App dan dapat diinstal untuk pengalaman mandiri. Metadata untuk PWA Anda disetel oleh file berbasis JSON yang dikenal sebagai Manifes Aplikasi Web, yang akan kita bahas secara mendetail di modul berikutnya.
Sebagai persyaratan minimum untuk kemampuan penginstalan, sebagian besar browser yang mendukungnya menggunakan file Manifes Aplikasi Web dan properti tertentu seperti nama aplikasi, dan konfigurasi pengalaman terinstal. Pengecualian untuk hal ini adalah Safari untuk macOS, yang tidak mendukung kemampuan penginstalan.
Persyaratan untuk mengizinkan penginstalan berbeda di antara berbagai browser, artikel ini menjelaskan kriteria untuk Google Chrome dan menyertakan link ke persyaratan untuk browser lain.
Karena pengujian untuk memastikan PWA memenuhi persyaratan kemampuan penginstalan dapat memerlukan waktu beberapa detik, kemampuan penginstalan itu sendiri mungkin tidak tersedia segera setelah respons URL diterima.
Penginstalan desktop
Penginstalan PWA desktop saat ini didukung oleh Google Chrome dan Microsoft Edge di Linux, Windows, macOS, dan Chromebook. Browser ini akan menampilkan badge penginstalan (ikon) di kolom URL (lihat gambar di bawah), yang menyatakan bahwa situs saat ini dapat diinstal.
Saat pengguna berinteraksi dengan situs, mereka mungkin melihat pop-up seperti di bawah yang mengundang pengguna untuk menginstalnya sebagai aplikasi.
Menu drop-down browser juga menyertakan item "Instal
Hanya mode tampilan mandiri dan UI minimal yang didukung pada sistem operasi desktop.
PWA yang diinstal di desktop:
- Memiliki ikon di menu Start atau Layar Start di PC Windows, di dok atau desktop dengan GUI Linux, di launchpad macOS, atau peluncur aplikasi Chromebook.
- Memiliki ikon di pengalih dan dok aplikasi saat aplikasi aktif, baru saja digunakan, atau dibuka di latar belakang.
- Muncul di penelusuran aplikasi, misalnya, penelusuran di Windows atau Spotlight di macOS.
- Dapat menetapkan nomor badge pada ikon mereka, untuk menunjukkan notifikasi baru. Tindakan ini dilakukan dengan Badging API.
- Dapat menetapkan menu kontekstual untuk ikon dengan Pintasan App.
- Tidak dapat diinstal dua kali dengan browser yang sama.
Setelah menginstal aplikasi di desktop, pengguna dapat membuka about:apps, mengklik kanan PWA, dan memilih "Mulai Aplikasi saat Login" jika pengguna ingin aplikasi Anda terbuka secara otomatis saat memulai.
Penginstalan iOS dan iPadOS
Perintah browser untuk menginstal PWA tidak ada di iOS dan iPadOS. Di platform ini, PWA juga dikenal sebagai aplikasi web layar utama. Aplikasi ini harus ditambahkan secara manual ke layar utama melalui menu yang hanya tersedia di Safari. Sebaiknya tambahkan tag apple-touch-icon ke html Anda.
Untuk menentukan ikon, sertakan jalur ke ikon Anda ke bagian <head> HTML, seperti ini:
<link rel="apple-touch-icon" href="/icons/ios.png">
Safari akan menggunakan informasi tersebut untuk membuat pintasan dan jika Anda tidak memberikan ikon khusus untuk perangkat Apple, ikon di layar utama akan menjadi screenshot PWA Anda saat pengguna menginstalnya.
Penting untuk dipahami bahwa penginstalan PWA hanya tersedia jika pengguna menjelajahi situs Anda dari Safari. Browser lain yang tersedia di App Store, seperti Google Chrome, Firefox, Opera, atau Microsoft Edge, tidak dapat menginstal PWA di layar utama.
Langkah-langkah untuk menambahkan aplikasi ke layar beranda adalah:
- Buka menu Bagikan, yang tersedia di bagian bawah atau atas browser.
- Klik Tambahkan ke Layar Utama.
- Konfirmasi nama aplikasi; nama dapat diedit oleh pengguna.
- Klik Tambahkan. Di iOS dan iPadOS, bookmark ke situs dan PWA terlihat sama di layar utama.
Di iOS dan iPadOS, hanya mode tampilan mandiri yang didukung. Oleh karena itu, jika Anda menggunakan mode UI minimal, mode tersebut akan kembali menjadi pintasan browser; jika Anda menggunakan layar penuh, mode tersebut akan kembali menjadi mandiri.
PWA yang diinstal di iOS dan iPadOS:
- Muncul di layar utama, penelusuran Spotlight, Saran Siri, dan penelusuran Koleksi Aplikasi.
- Tidak muncul di folder kategori Galeri Aplikasi.
- Kurangnya dukungan untuk kemampuan seperti badge dan pintasan aplikasi.
Secara kebetulan, Safari menggunakan teknologi native yang dikenal sebagai Web Clips untuk membuat ikon PWA di sistem operasi. Itu hanyalah file XML dalam format {i>Property List<i} Apple yang disimpan dalam sistem file.
Penginstalan Android
Di Android, perintah penginstalan PWA berbeda di setiap perangkat dan browser. Pengguna mungkin melihat:
- Variasi dalam kata-kata item menu untuk diinstal seperti Instal atau Tambahkan ke Layar Utama.
- Dialog penginstalan mendetail.
Pada gambar berikut, Anda dapat melihat dua versi berbeda dari dialog penginstalan, yaitu infobar mini sederhana (kiri) dan dialog penginstalan mendetail (kanan).
Bergantung pada perangkat dan browser, PWA Anda akan diinstal sebagai WebAPK, pintasan, atau QuickApp.
WebAPKs
WebAPK adalah paket Android (APK) yang dibuat oleh penyedia perangkat pengguna yang tepercaya, biasanya di cloud, pada server pembuatan WebAPK. Metode ini digunakan oleh Google Chrome di perangkat yang menginstal Layanan Seluler Google (GMS), dan oleh browser Internet Samsung, tetapi hanya di perangkat yang diproduksi Samsung, seperti ponsel atau tablet Galaxy. Bersama-sama, semua ini diperhitungkan untuk sebagian besar pengguna Android.
Saat pengguna menginstal PWA dari Google Chrome dan WebAPK digunakan, server pembuatan akan "mencetak" (paket) dan menandatangani APK untuk PWA. Proses tersebut membutuhkan waktu, tetapi saat APK sudah siap, browser menginstal aplikasi tersebut secara otomatis di perangkat pengguna. Karena penyedia tepercaya (Layanan Play atau Samsung) menandatangani APK, ponsel akan menginstalnya tanpa menonaktifkan keamanan, seperti aplikasi apa pun yang berasal dari toko. Anda tidak perlu melakukan sideload aplikasi.
PWA yang diinstal melalui WebAPK:
- Memiliki ikon di peluncur aplikasi dan layar utama.
- Muncul di Setelan, Aplikasi.
- Dapat memiliki beberapa kemampuan, seperti pemberian badge, pintasan aplikasi, dan mengambil link di dalam OS.
- Dapat mengupdate ikon dan metadata aplikasi.
- Tidak dapat diinstal dua kali.
Pintasan
Meskipun WebAPK memberikan pengalaman terbaik bagi pengguna Android, tidak selalu dapat dibuat. Ketika mereka tidak bisa, browser kembali untuk membuat pintasan {i>website<i}. Karena Firefox, Microsoft Edge, Opera, Brave, dan Samsung Internet (pada perangkat non-Samsung) tidak memiliki server minting yang dipercaya, mereka akan membuat pintasan. Google Chrome juga akan melakukannya jika layanan minting tidak tersedia atau PWA Anda tidak memenuhi persyaratan penginstalan.
PWA yang diinstal dengan pintasan:
- Memiliki ikon dengan badge browser di layar utama (lihat contoh berikut).
- Tidak memiliki ikon di Peluncur atau di Setelan, Aplikasi.
- Tidak dapat menggunakan kemampuan apa pun yang memerlukan penginstalan.
- Tidak dapat memperbarui ikon dan metadata aplikasi.
- Dapat diinstal berkali-kali, bahkan menggunakan browser yang sama. Ketika hal ini terjadi, semua akan mengarah ke instance yang sama, dan menggunakan penyimpanan yang sama.
QuickApps
Beberapa produsen, termasuk Huawei dan ZTE, menawarkan platform yang dikenal sebagai QuickApps untuk membuat aplikasi web ringan yang mirip dengan PWA, tetapi menggunakan technology stack yang berbeda. Beberapa browser di perangkat ini, seperti browser Huawei, dapat menginstal PWA yang dikemas sebagai QuickApp, meskipun Anda tidak menggunakan stack QuickApp.
Jika PWA Anda diinstal sebagai QuickApp, pengguna akan mendapatkan pengalaman yang serupa dengan yang mereka dapatkan dengan pintasan, tetapi dengan ikon yang diberi badge dengan ikon QuickApps (gambar halus). Aplikasi tersebut juga akan dapat diluncurkan dari QuickApp Center.
Meminta penginstalan
Di browser berbasis Chromium di perangkat desktop dan Android, Anda dapat memicu dialog penginstalan browser dari PWA. Bab Perintah Penginstalan akan membahas pola untuk melakukannya dan cara menerapkannya.
Katalog dan toko aplikasi
PWA Anda juga dapat dicantumkan di katalog aplikasi dan toko untuk meningkatkan jangkauannya serta memungkinkan pengguna menemukannya di tempat yang sama saat mereka menemukan aplikasi lain. Sebagian besar katalog aplikasi dan menyimpan teknologi dukungan yang memungkinkan Anda memublikasikan paket yang tidak menyertakan seluruh aplikasi web (seperti HTML dan aset Anda). Teknologi ini memungkinkan Anda hanya membuat peluncur untuk mesin rendering web mandiri yang akan memuat aplikasi dan membiarkan pekerja layanan meng-cache aset yang diperlukan.
Katalog aplikasi dan toko yang mendukung publikasi PWA adalah:
- Google Play Store untuk Android dan ChromeOS, menggunakan Aktivitas Web Tepercaya.
- Apple App Store untuk iOS, macOS, dan iPadOS, menggunakan WKWebView dan Domain App-Bound.
- Microsoft Store untuk Windows 10 dan 11, menggunakan paket APPX.
- Samsung Galaxy Store, menggunakan server minting Samsung WebAPK.
- Huawei AppGaleri, menggunakan penampung QuickApp untuk aplikasi HTML Anda.
Jika Anda ingin mempelajari lebih lanjut cara memublikasikan PWA ke katalog aplikasi dan toko, lihat BubbleWrap CLI dan PWA Builder.