Add To Home Screen
Salah satu teknik progressive web apps atau dikenal dengan ama PWA adalah Add To Home Screen. Teknik ini memungkinan membuat logo icon di home screen android dan menjadikannya menyerupai applikasi native. So, apa yang harus di lakukan?
Siapkan Gambar
Siapkan gambar dengan ukuran 512x512 pixel. Yang nantinya akan di jadikan sebagai icon dan logo splash saat aplikasi di buka. Contohnya seperti ini:
Export gambar / save gambar dalam bentuk jpg seperti langkah berikut:
Pilih opsi progressive sebagai opsi jika akan di load di web juga.
Membuat Manifest files
Setelah semua gambar sesuai ukuran, bukalah halaman sesuai url ini https://app-manifest.firebaseapp.com/ untuk membuat manifest.js yang nantinya akan kita pasang di web
Lengkapi isian dari :
- App Name : Merupkan nama aplikasi yang nanti akan muncul saat splash.
- Theme color : merukan warna dasar dar panel browser mobile nantinya saat dibuka warna akan menyesuaikan sesuai yang kita definisikan di manifest
- Display Mode : pilihannya adalah browser, minimal ui, standalone full screen. Untuk kali ini pilih standalone
- Application Scope : ini di isi dengan ./
- Short Name : Diisi dengan nama short name app yang nantinya akan muncul di device android.
- Background Color : adalah warna background saat splash screen muncul.
- Orientation : default dari app portrait atau landscape
- Start URL : awalan url yang akan di akses. Kali ini saya menggunakan index.html
- Bagian icon, di upload file yang sudah kita siapkan tadi.
Memasang ke dalam webapps
Setelah semua sudah complate, tinggal tekan generate zip untuk membuat manifest.js dan icon2 yang di butuhkan. File otomatis akan ke download, kemudian silahkan di extract dan di pindah ke public_html webapps yang akan kita pasang. Hasil generate zip serperti di bawah ini:
terdapat 1 file manifest.json dan images yang isinya berupa file icon yang sudah teresize sesuai dengan kebutuhan webapps nantinya.
Untuk melakukan proses load manifest.js di htmlnya hanya menambahkan tag html berikut:
<link href="manifest.json" rel="manifest"/>
Silahkan di coba dibuka webapps dengan chrome browser:
Buka webapps yang di tuju.
Pilih menu > Add To Home Screen
Kalau dari situs sumbernya PWA ini, Add to Home screen otomatis akan ditawarkan ke user yang sudah melakukan 2x kunjungan ke web yang di maksud.
Dirubah namanya atau sesuai dengan nama yang sudah ada.
Notifikasi sukses add to home screen.
Add To Home Screen Success
Splash screen
So, sangat mudah bukan? untuk menjadikan sebuah webapps bisa add to home screen dengan fitur PWA. Teknik ini sudah di implementasikan di : https://www.dyangalih.com
Sekian dulu dari Mr. G. Silahkan di share sebanyak mungkin untuk kepentingan bersama.
bang kalau PWA di terapin di blogspot gimana caranya bang ?
ReplyDelete