Cara Membuat Tombol Install PWA Blogger

Cara Membuat Tombol Install PWA Blogger - Setelah selesai dan berhasil menginstallasi PWA (progressive wap apps) support untuk blogger yang dapat kalian baca pada artikel ini Cara Membuat Blog Blogger Support PWA maka artikel kali ini juga masih berhubungan dengan PWA, yaitu cara membuat atau memasang install button pada blog yang bertujuan untuk mempermudah dan menarik perhatian visitor untuk mau menginstall blog ke perangkat (device) yang digunakannya.

Install button (tombol install) ini merupakan bagian dari fitur PWA sehingga untuk dapat memasangkannya blog harus sudah support pwa dan browser yang digunakan untuk mengakses blog nya juga harus sudah support dengan PWA karena jika menggunakan web browser yang belum support pwa maka install button akan otomatis tidak muncul sebab service worker tidak dapat di register ke brower nya.

Secara default dari pwa sendiri akan menampilkan notifikasi untuk menambahkan ke home screen (menginstall) blog kepada user saat pertama mengaksesnya. Namun kadang notifikasi ini tidak akan muncul kembali saat user meng abaikan nya (ignore).

Sedangkan untuk button install sendiri akan terus tampil pada halaman selama service worker ter pelatuk/picu :d (triger) dan user terdeteksi belum menginstall blog nya. Nah dari situlah kelubihan memasang install button ini.

Tampilan Install button pada pc desktop dan laptop (chrome browser)

Cara memasang install button pwa

Disini saya anggap blog kalian sudah pwa support dan tingal memasang install buttonnya saja.

1. pertama kalian masuk terlebih dahulu ke menu edit template blog kalian

2. copykan code css style tampilan install button dibawah ini dan taruh diatas code </head>

<style rel='stylesheet' type='text/css'>
#install_button{margin: 10px;text-align: center; color: #fff;background: #007fa0;border: 1px solid #007fa0;padding: 5px 19px;cursor: pointer;font-size: 30px;border-radius: 20px;}
#install_button:hover{color: teal;background: #fff;border: 1px solid #007fa0; }
</style>

3. kemudian copykan javascript dari install button pwa, dan taruh diatas </body><.p>

update code javascript install button yang dapat menampilkan notifikasi install app dapat kalian baca di : Menampilkan Notifikasi Install PWA di Blogger

<script type='text/javascript'>
  //<![CDATA[
const installButton = document.getElementById("install_button");window.addEventListener("beforeinstallprompt", e => {e.preventDefault();deferredPrompt = e;installButton.hidden = false;installButton.addEventListener("click", installApp);});function installApp() {deferredPrompt.prompt();installButton.disabled = true;deferredPrompt.userChoice.then(choiceResult => {if (choiceResult.outcome === "accepted") {installButton.hidden = true;} else {}installButton.disabled = false;deferredPrompt = null;});}window.addEventListener("appinstalled", evt => {console.log("appinstalled fired", evt);});
  //]]> 
</script>

4. setelah itu kalian klik simpan template.

5. selanjutnya masuk ke menu tata letak blogger > pilih gedet html/javascript.

6. copykan kode html di bawah ini dan masukkan ke dalam gadget html/javascript sesuai lokasi yang kalian inginkan di tata letak blogger.

<button hidden='' id='install_button'>Install Now</button>

7. selesai.

8. kalian dapat merubah tampilannya sesuai dengan yang kalian inginkan dengan menedit bagian css nya.

Tampilan Install button pada mobile android (chrome browser)