Cara Memasang Tombol Install PWA Di Blogger

Apa Itu PWA?

Progressive Web Apps ( PWA ) adalah aplikasi web yang dibuat dan disempurnakan dengan API modern untuk memberikan peningkatan kemampuan, keandalan, dan kemampuan pemasangan sambil menjangkau siapa saja, di mana saja, di perangkat apa pun, semua dengan basis kode tunggal.

Tentang Tombol Install PWA

Tombol ini Dapat Digunakan untuk memberitahukan Pengguna untuk Menginstal Aplikasi PWA kita, Sebagai contoh, Berikut adalah Tombol Install PWA pada Situs yang dapat Digunakan untuk Kompresi Gambar, Mengurangi ukuran Gambar, Dan lain lainnya, Yaitu Squoosh

Syarat Memasang Tombol Install PWA Di Blogger

Syaratnya Hanya Satu Yaitu:

1. Situs sudah Mendukung PWA.

Jika Situs anda Belum mendukung PWA, Maka anda Bisa Membaca Tutorial Ini.

Postingan Terkait

Sebelum Memulai Pemasangannya, Anda dapat melihat Contohnya terlebih Dahulu

Lihat Demo

Cara Memasang Tombol Install PWA Di Blogger

1. Buka Dashboard Blogger.

2. Pada Dashboard Blogger, Klik  Tema.

3. Kemudian Klik  Dan Klik Edit HTML.

4. Cari Bagian /*]]>*/</style> atau ]]></b:skin> Dan Tempel Kode CSS Berikut Tepat Diatasnya.

.ist-pwa-btn{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:5px;line-height:20px;color:#fffdfc;background:#ffa900;font-size:14px;font-family:Google Sans Text,Arial,Helvetica,sans-serif;white-space:nowrap;overflow:hidden;max-width:320px;cursor:pointer}.ist-pwa-btn:hover{opacity:.9}

Kemudian Cari Bagian </body> Dan Tempel Kode Berikut Tepat Diatasnya.

<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>

5. Lalu Klik  Simpan, Selesai.

Tambahkan Kode ini Di Sembarang Tempat untuk Memunculkan Tombol Install nya.

<button class='ist-pwa-btn' id='install_button'>Install Sekarang</button>

Penutup

Jadi Ini Adalah Cara Memasang Tombol Install PWA Di Blogger. Saya harap Artikel ini dapat membantu anda, Jika ada yang ingin ditanyakan maka tanyakan Di Kolom Komentar.

Referensi:
https://www.marwanto606.com/2021/01/cara-membuat-tombol-install-pwa-blogger.html

Buka untuk Melanjutkan

Pergi ke Tautan