Menampilkan Notifikasi Install PWA di Blogger

Menampilkan Notifikasi Install PWA di Blogger - PWA (Progressive Web Apps) sepertinya bakalan jadi sebuah teknologi dalam pengembangan web dan aplikasi mobile. Karena dengan PWA sebuah web dapat di install (pasang) pada perangkat device yang kalian gunakan dengan bantuan web browser yang sudah mendukung proses penginstallan PWA, diantaranya dari yang saya tahu yaitu google chrome. Dari membaca berbagai keunggulan menggunakan PWA di internet itulah yang membuat saya juga mulai ngulik bagaimana agar blogger dapat juga menggunkan PWA walaupun belum ada fitur untuk manambahkan manifest.json dan service-worker.js karena kedua file itu yang menjadi persyaratan untuk dapat mengaktifkan PWA. Dari situlah saya mengatahui tentang worker cloudflare yang dapat menghandle sebuah request dan routing yang sepertinya dapat saya manfaatkan.

Berikut langkah-langkah Menampilkan Notifikasi Install PWA di Blogger

Langkah Pertama: Integrasikan blog dengan Cloudflare

Sebelum masuk ke tutorial cara menampilkan notifikasi install PWA pada blogger, kalian harus memasangka cloudflare pada domain blog kalian silahkan baca : Mengintegrasikan Custom Domain Blogger Dengan Cloudflare. Karena fitur pada layanan cloudflare inilah yang dapat menjembatani manifest.json dan sw.js mungkin sampai blogger menyedikan fitur ini didalannya nanti.

Langkah Kedua: Tutorial buat blogger support pwa

Selanjutnya kalian dapat baca : Cara Membuat Blog Blogger Support PWA untuk memulai tutorial mengaktifkan PWA di blogger

Sedikit update dari saya, agar muncul notifikasi install pwa pada blogger yaitu kalian ubah manifest.json pada tutorial Cara Membuat Blog Blogger Support PWA dengan code manifest.json yang ada di bawah ini. sesuaikan Marwanto606 dengan nama blog kalian

addEventListener("fetch", event => {
  const data = {
    name: "Marwanto606",
    short_name: "Marwanto606",
    display: "standalone",
    prefer_related_applications: false,
    start_url: "/?utm_source=homescreen",
    background_color: "#007fa0",
    theme_color: "#007fa0",
    icons:[
      {
      src: "\/main\/android-icon-36x36.png",
      sizes: "36x36",
      type: "image\/png",
      density: "0.75",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-48x48.png",
      sizes: "48x48",
      type: "image\/png",
      density: "1.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-72x72.png",
      sizes: "72x72",
      type: "image\/png",
      density: "1.5",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-96x96.png",
      sizes: "96x96",
      type: "image\/png",
      density: "2.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/apple-icon-144x144.png",
      sizes: "144x144",
      type: "image\/png",
      density: "3.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-192x192.png",
      sizes: "192x192",
      type: "image\/png",
      density: "4.0",
      purpose: "any maskable"
      },
      {
      src: "\/main\/android-icon-512x512.png",
      sizes: "512x512",
      type: "image/png",
      density: "4.0",
      purpose: "any maskable"
      },
    ]
  }

  const json = JSON.stringify(data, null, 2)

  return event.respondWith(
    new Response(json, {
      headers: {
        "content-type": "application/json;charset=UTF-8"
      }
    })
  )
})

Langkah ketiga: Sesuaikan Code PWA

lalu penyebab lainnya kenapa notifikasi install PWA tidak muncul karena pemasangan tombol install button PWA sebelumya : Cara Membuat Tombol Install PWA Blogger, karena tombol ini lah yeng terpicu telebih dahulu sebelum notif install app nya muncul.

penyesuaian yang saya lakukan yaitu mengunakan tag conditional blogger untuk hanya menampilkan install button pada peangkat desktop saja. kalian tinggal merubah code javascript pada tutorial Cara Membuat Tombol Install PWA Blogger dengan code dibwah ini

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
  //<![CDATA[
// install btn pwa
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>
</b:if>

Sebenarnya sedikit berbada dengan notifikasi install app, tombol install akan terus dapat ditampilkan ke user sampai user menginstall blog sedangkan notifikasi app akan tidak ditampilkan lagi saat user mengklik close nya

Langkah Alternative

Untuk Tutorial alternative lainnya untuk dapat memunculkan notifikasi install PWA, kalian dapat baca di blog kompiajaib : Mengaktifkan PWA Pada Blogger Non AMP