Setelah pengguna menginstal PWA Anda, PWA akan:
- Memiliki ikon di peluncur, layar utama, menu start, atau launchpad.
- Muncul sebagai hasil saat pengguna menelusuri aplikasi di perangkat mereka.
- Memiliki jendela terpisah dalam sistem operasi.
- Mendapatkan dukungan untuk kemampuan tertentu.
Kriteria penginstalan
Setiap browser memiliki kriteria yang menandai bahwa situs atau aplikasi web adalah Progressive Web App dan dapat diinstal untuk pengalaman mandiri. Metadata untuk PWA Anda ditetapkan 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 penginstalan. Pengecualian untuk hal ini adalah Safari untuk macOS, yang tidak mendukung kemampuan penginstalan.
Persyaratan untuk mengizinkan penginstalan berbeda-beda di antara berbagai browser, artikel ini menjelaskan kriteria Google Chrome dan menyertakan link ke persyaratan untuk browser lain.
Karena pengujian bahwa 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 (ikon) instal 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 pop-up di bawah yang mengundang pengguna untuk menginstalnya sebagai aplikasi.
Menu drop-down browser juga menyertakan "Instal
Hanya mode tampilan UI mandiri dan minimal yang didukung di sistem operasi desktop.
PWA yang diinstal di desktop:
- Memiliki ikon di menu Start atau layar Mulai di PC Windows, di dok atau desktop dengan GUI Linux, di launchpad macOS, atau peluncur aplikasi Chromebook.
- Memiliki ikon di pengalih aplikasi dan dok saat aplikasi aktif, baru saja digunakan, atau dibuka di latar belakang.
- Muncul di penelusuran aplikasi, misalnya, penelusuran di Windows atau Spotlight di macOS.
- Dapat menyetel nomor badge pada ikon mereka, untuk menunjukkan notifikasi baru. Hal ini dilakukan dengan Badging API.
- Dapat menetapkan menu kontekstual untuk ikon dengan App Shortcuts.
- 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 mereka ingin aplikasi Anda terbuka secara otomatis saat startup.
Penginstalan iOS dan iPadOS
Permintaan browser untuk menginstal PWA Anda 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 beranda 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 tertentu 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 utama adalah:
- Buka menu Bagikan, yang tersedia di bagian bawah atau atas browser.
- Klik Tambahkan ke Layar Utama.
- Konfirmasi nama aplikasi; nama tersebut dapat diedit 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 ke pintasan browser; jika Anda menggunakan layar penuh, layar akan kembali ke mandiri.
PWA yang diinstal di iOS dan iPadOS:
- Muncul di layar utama, penelusuran Spotlight, Saran Siri, dan penelusuran Library Aplikasi.
- Tidak muncul di folder kategori Galeri Aplikasi.
- Kurangnya dukungan untuk kemampuan seperti badge dan pintasan aplikasi.
Secara tidak sengaja, Safari menggunakan teknologi native yang dikenal sebagai Web Clips untuk membuat ikon PWA di sistem operasi. Mereka hanyalah file XML dalam format {i>Property List<i} Apple yang disimpan di sistem file.
Penginstalan Android
Di Android, perintah penginstalan PWA berbeda menurut perangkat dan browser. Pengguna mungkin melihat:
- Variasi kata-kata di item menu untuk penginstalan, seperti Instal atau Tambahkan ke Layar Utama.
- Dialog penginstalan mendetail.
Pada gambar berikut, Anda dapat melihat dua versi dialog penginstalan yang berbeda, 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 tepercaya, biasanya di cloud, di server minting WebAPK. Metode ini digunakan oleh Google Chrome pada perangkat yang dilengkapi Layanan Seluler Google (GMS), dan browser Internet Samsung, tetapi hanya pada perangkat buatan Samsung, seperti ponsel atau tablet Galaxy. Bersama-sama, hal ini merupakan kontribusi sebagian besar pengguna Android.
Saat pengguna menginstal PWA dari Google Chrome dan WebAPK, server pencetakan "mint" (paket) dan menandatangani APK untuk PWA. Proses tersebut memerlukan waktu, tetapi saat APK siap, browser akan menginstal aplikasi tersebut secara otomatis di perangkat pengguna. Karena penyedia tepercaya (Layanan Play atau Samsung) menandatangani APK, ponsel akan menginstalnya tanpa menonaktifkan keamanan, seperti halnya aplikasi apa pun yang berasal dari Play Store. 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 dalam OS.
- Dapat memperbarui ikon dan metadata aplikasi.
- Tidak dapat diinstal dua kali.
Pintasan
Meskipun WebAPK memberikan pengalaman terbaik untuk pengguna Android, Anda tidak selalu dapat membuatnya. Jika tidak bisa, browser akan kembali membuat pintasan situs. Karena Firefox, Microsoft Edge, Opera, Brave, dan Samsung Internet (pada perangkat selain Samsung) tidak memiliki server pencetakan yang mereka percaya, mereka akan membuat pintasan. Google Chrome juga akan melakukannya jika layanan pencetakan tidak tersedia atau PWA Anda tidak memenuhi persyaratan penginstalan.
PWA yang diinstal dengan pintasan:
- Tampilkan ikon 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 aplikasinya.
- Dapat diinstal berkali-kali, bahkan menggunakan browser yang sama; jika 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.
Saat PWA Anda diinstal sebagai QuickApp, pengguna akan mendapatkan pengalaman yang serupa dengan yang mereka miliki dengan pintasan, tetapi dengan ikon dengan badge ikon QuickApps (gambar kilat). Aplikasi ini juga akan tersedia untuk diluncurkan dari QuickApp Center.
Meminta penginstalan
Di browser berbasis Chromium di perangkat desktop dan Android, dialog penginstalan browser dapat dipicu dari PWA Anda. 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 dan memungkinkan pengguna menemukannya di tempat yang sama tempat mereka menemukan aplikasi lain. Sebagian besar toko dan katalog aplikasi mendukung teknologi yang memungkinkan Anda memublikasikan paket yang tidak menyertakan seluruh aplikasi web (seperti HTML dan aset Anda). Teknologi ini memungkinkan Anda membuat peluncur saja untuk mesin rendering web mandiri yang akan memuat aplikasi dan memungkinkan pekerja layanan meng-cache aset yang diperlukan.
Katalog dan toko aplikasi 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 Terikat Aplikasi.
- Microsoft Store untuk Windows 10 dan 11, menggunakan paket APPX.
- Samsung Galaxy Store, menggunakan server pencetakan Samsung WebAPK.
- Huawei AppGaleri, menggunakan penampung QuickApp untuk aplikasi HTML Anda.
Jika Anda ingin mempelajari lebih lanjut cara memublikasikan PWA ke katalog dan toko aplikasi, lihat BubbleWrap CLI dan PWA Builder.