Cara Membuat Blog Blogger Support PWA

Cara Membuat Blog Blogger Support PWA

Cara Membuat Blog Blogger Support PWA - Setelah sebelumnya saya menulis artikel tentang Kenalan dengan PWA (Progressive Web Apps) dan Mengintegrasikan Custom Domain Blogger Dengan Cloudflare. artikel kali ini juga masih merupakan sambungan bagian dari artikel sebelumnya, dan merupakan tutorial terakhir nya yang bertujuan membuat blog kalian yang di hosting oleh blogger dan sudah terpasang cloudflare menjadi support PWA dan dapat di install selayaknya aplikasi mobile atau desktop software.

Nah untuk tutoral kali ini, pastikan blog kalian sudah terpasang cloudflare ya. karena dengan cloudflare yang akan menjembatani asset yang akan di akses oleh blog seolah-olah langsung melalui blogger dengan bantuan worker yang ada di cloudflare. berbeda dengan CMS seperti wordpress selfhosted, yang dimana kita dapat mengelola file asset secara langsung sehingga membuat wordpress sefthosted menjadi support PWA jauh lebih mudah karena juga sudah tersedia plugin PWA yang dapat langsung dipasangkan seperti SuperPWA dll. Untuk membuat blogger support pwa caranya jauh sedikit lebih rumit karena blogger sendiri belum menyediakan fasilitas ini, jadi tutorial ini merupakan tutorial unofficial yang dapat dicoba untuk membuat blogger support pwa.


Persiapan :
  • akun dan repo di github untuk menyimpan asset nya ex: https://github.com/marwanto606/icon-blog
  • buat 1 icon/logo (ukuran 512x512 pixel) dari blog kalian yang akan digunakan sebagai assets yang akan digenerate ukuran lainnya secara automatis nantinya.
  • buat sebuah halaman pada blog kalian beri judul dan isi nya offline lalu publikasikan sehingga url nya akan menjadi /p/offline.html

Tutorial pemasangan:

Tahapan pertama membuat icon apps

1. generate dahulu logo yang akan digunakan sebagai favicon dan icon apps nya di sini

2. klik Choose File kemudian cari logo yang sudah kalian punya

3. klik Create Favicon untuk memulai proses pembuatan icon dalam berbagai ukurannya.

mengenerate logo favicon blog

4. jika proses sudah selesai sekarang tinggal di download file .zip icon nya

5. ekstrack file zip nya didalamnya sudah ada berbagai ukuran icon apps kalian

6. ubah nama icon 512x512px yang kalian buat menjadi android-icon-512x512

Tahapan kedua upload semua icon ke dalam repo github

  • pertama kalian buat dulu repository pada akun github kalian, atur kurang lebih seperti gambar dibawah ini
buat repository Github
  • kemudian kalian masuk ke repo yang barusan kalian buat, klik Add file > Upload files
  • Klik pada chose your file untuk mencari file icon nya pada komputer, lalu klik ok setelah proses upload seselai klik commit changes.
upload file ke repository github
  • Tahapan kedua selesai sekarang semua icon sudah tersimpan di github.

Tahapan ketiga membuat worker di cloudflare

nah di tahapan ketiga ini yang sedikit lebih jelimet sedikit. jadi perlu ketelitian ya :d

  • Pertama kalian masuk ke akun cloudflare kalian, kemudian klik menu Workers
menu Workers Cloudflare
  • Disini kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
workers cloudflare setup
  • Dibagian kedua kalian diminta untuk memilih Plan, pilih yang Free saja :d Continue with Free
  • Selanjutnya klik Create a Worker
  • lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini
Ganti marwanto606/icon-blog sesuai username dan repository github kalian ya.

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event))
})

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://ghcdn.rawgit.org/marwanto606/icon-blog`

async function serveAsset(event) {
  const url = new URL(event.request.url)
  const cache = caches.default
  let response = await cache.match(event.request)

  if (!response) {
    response = await fetch(`${BUCKET_URL}${url.pathname}`)
    const headers = { "cache-control": "public, max-age=14400" }
    response = new Response(response.body, { ...response, headers })
    event.waitUntil(cache.put(event.request, response.clone()))
  }
  return response
}

async function handleRequest(event) {
  if (event.request.method === "GET") {
    let response = await serveAsset(event)
    if (response.status > 399) {
      response = new Response(response.statusText, { status: response.status })
    }
    return response
  } else {
    return new Response("Method not allowed", { status: 405 })
  }
}
  • lalu klik Save and Deploy
  • Script diatas berfungsi untuk menyajikan asset icon yang sudah ada di github dapat di akses melalui domain blog. ex : https://www.marwanto606.com/main/android-icon-192x192.png
  • Selanjutnya Rename (ubah nama) worker nya menjadi worker3 agar nanti tidak bingung saat hendak membuat route nya
  • klik pada worker > klik Rename > rubah nama menjadi worker3 > Rename and Deploy
  • Kita buat lagi sebuah worker klik Create a Worker
  • lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

Rubah Marwanto606 sesuai nama blog kalian, update pembaruan code manifest.json lainnya dapat kalian baca di : Menampilkan Notifikasi Install PWA di Blogger


addEventListener("fetch", event => {
  const data = {
    name: "Marwanto606",
    short_name: "Marwanto606",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "\/",
    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"
      }
    })
  )
})
  • lalu klik Save and Deploy
  • Script diatas adalah file manifest.json yang akan digunakan di blog ex : https://www.marwanto606.com/manifest.json
  • rubah juga nama worker nya klik pada worker > klik Rename > rubah nama menjadi worker2 > Rename and Deploy.
  • Kita buat lagi sebuah worker klik Create a Worker
  • lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

Pastikan /p/offline.html sesuai dengan halaman offline untuk blog kalian yang kalian buat diatas,


const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/offline.html";
function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(a.map(a=>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});

`

async function handleRequest(request) {
  return new Response(js, {
    headers: {
      "content-type": "application/javascript;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})
  • lalu klik Save and Deploy
  • Script diatas adalah file service worker yang akan digunakan di blog ex : https://www.marwanto606.com/sw.js
  • rubah juga nama worker nya klik pada worker > klik Rename > rubah nama menjadi worker > Rename and Deploy.
  • Sekarang tinggal membuat route untuk ketiga worker diatas, klik pada menu Workers > klik add route.
workers cloudflare add route
  • Masukkan route www.marwanto606.com/main/* untuk worker3
  • Masukkan route www.marwanto606.com/manifest.json untuk worker2
  • Masukkan route www.marwanto606.com/sw.js untuk worker
  • Ganti marwanto606.com sesuai doamian kalian ya.
  • cek apakah semua asset diatas sudah dapat diakses dengan benar melalui domain kalian.
  • jika sudah, tambahkan script dibawah ini taruh di bawah <head> pada template blog kalian

  <link href='/main/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57' />
<link href='/main/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60' />
<link href='/main/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72' />
<link href='/main/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114' />
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120' />
<link href='/main/apple-icon-114x114.png' rel='apple-touch-icon' sizes='144x144' />
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152' />
<link href='/main/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180' />
<link href='/main/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png' />
<link href='/main/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png' />
<link href='/main/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png' />
<link href='/main/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png' />
<meta content='#007fa0' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#007fa0' name='theme-color' />
<link href='/manifest.json' rel='manifest' />
  
  • lalu, tambah kan script di bawah ini taruh diatas </body> pada template blog kalian

<script type='text/javascript'>
  //<![CDATA[
if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log("Service Worker Registered"); });
}
</script>
  • Script diatas untuk meregiter service worker pada browser user saat blog kalian di akses pertama kali oleh user.
  • kalian bisa menambah kata" untuk halaman offline kalian misalnya "kalian sedang dalam mode offline, silahkan aktifkan koneksi internet untuk dapat membaca artikel di blog ini!!!"
  • Selesai.

Baca lanjutannya : Cara Membuat Tombol Install PWA Blogger

Untuk pengguna template AMP (Accelerated Mobile Pages) bisa kalian baca kelanjutannya di blog kompiajaib : Mengaktifkan PWA Pada Blogger AMP HTML

51 Comment "Cara Membuat Blog Blogger Support PWA"

  1. mas kenapa file saya belum bisa diakses ya, lalu bagaimana kalau saya menyimpannya di subdirektori reponya apa juga bisa

    BalasHapus
    Balasan
    1. mungkin pada bagian worker dan route workernya belum bener gan, jadi file belum bisa diakses. pastikan juga pertama file bisa diakses memlaui cdn.statically.io/gh. disimpan di sub dir repo sepertinya juga bisa gan.

      Hapus
  2. kalau saya seperti ini https://cdn.statically.io/gh/adicore/web/colorlib, namun saat saya cek tidak bisa diakses, apa karena itu ya filenya tidak bisa diakses?

    BalasHapus
    Balasan
    1. nah bisa jadi di situ masalahnya. coba pake rawgit.org gan

      Hapus
  3. Halo mas apa kabar, sebelumnya saya sudah mencobanya dan file sudah bisa diakses, namum pada websitenya, seperti pada contoh website saya yang satu ini dimana saat mencoba akses ini bisa: digitalvy.com/voyage/travelign_worker/manifest.json, anehnya saat mencoba akses homepage dan halaman lainnya tidak bisa seperti biasanya. apa ada hal yang kurang ya mas pada pengaturan route atau dnsnya?

    BalasHapus
    Balasan
    1. saya akses home page url itu blank gan, apakah web itu pakai blogger atau cms lain? kalo pake cms yang dapat mengakses hosting, sepertinya akan lebih mudah menerapkan pwa secara langsung tanpa perlu mengunakan worker cloudflare gan.

      Hapus
  4. masnya sudah pernah melihat website thehackernews.com? mereka bisa menggunakan domain mereka untuk custom url gambar mereka seperti ini https://thehackernews.com/images/-SSacYUeyhmM/YG3OeqxtTnI/AAAAAAAACM4/tpUo-R9kSRg80QFxIkHgnbYihrZF_7m7ACLcBGAsYHQ/s728-e1000/android-rust-programming.jpg. katanya mereka menggunakan cloudflare worker untuk custom url tersebut. dan yang unik dari websitenya adalah mereka tidak menggunakan www. pada awal domainnya, katanya pada sekitar tahun 2009 ada celah pada blogger dimana pengguna bisa custom domain blogger mereka tanpa www. namun saat setelah pihak blogger mengetahui celah tersebut mereka langsung memperbaikinya. dan website thehackernews masih bisa custom domain tanpa www.

    BalasHapus
    Balasan
    1. untuk membuat custom url gambar mengunakan cloudflare worker itu mungkin implementasi nya seperti mengakses asset icon dari url github. yang perlu diketahui jumlah request ke worker versi cloudflare free sepertinya terbatas gan. untuk menghilangkan www saya tidak ada infonya gan.

      Hapus
  5. saya pakai blogger mas, namun route-nya saya seperti ini *.digitalvy.com/* tanpa /main/*

    kalau BUCKET_URL saya pakai cloudflare page https://static.in.net/colorlib, kalau pakai statically/jsdeliver sepertinya tidak bisa.


    seperti ini screenshoot workers saya mas silahkan mas cek apa sudah benar https://i.postimg.cc/YqpMbfSJ/workers-cloudflare.png

    BalasHapus
    Balasan
    1. itu routernya kalo langsung seperti *.digitalvy.com/* url di bawahnya seperti url post, page, dll akan di route ke situ semua gan, saya mengunakan /main/* agar url yang ter route lebih spesifik. iya itu kalo mau ambil data pake perintah GET

      Hapus
  6. terkait gambar blogger yang custom domain, mereka mengatakan menggunakan cara seperti ini https://developers.cloudflare.com/workers/examples/bulk-origin-proxy, https://github.com/lebinh/cloudflare-workers/blob/master/src/proxy.ts

    BalasHapus
    Balasan
    1. nah cara itu sepertinya lebih mudah di terapkan.

      Hapus
  7. sekarang kalau saya tambahkan main pada route malah tidak ketemu filenya mas, digitalvy.com/main/voyage/travelign_worker/favicon-96x96.png

    BalasHapus
    Balasan
    1. coba buat routenya *.digitalvy.com/voyage/* agar url routenya lebih spesifik gan

      Hapus
    2. Halo mas, website saya ada masalah lagi sekarang www.travelign.nl/voyage/travelign_worker/manifest.json tidak bisa akses seperti website digitalvy yang kemarin, padahal sudah saya sama persiskan seperti website digitalvy pengaturan workernya

      Hapus
    3. wah bakalan susah gan kalo debug error code tanpa liat codenya, jadi silahkan di cek ulang codenya gan. tapi setau saya kalo gagal dimuat kemungkinan routingnya belum benar atau file pada githubnya yang tidak dapat diakses.

      Hapus
    4. kalau pakai google drive bisa gak ya mas?

      Hapus
    5. apa mungkin ada yang salah dengan pengaturan dns saya ya mas?

      Hapus
    6. belum pernah test cdn di gdrive gan, kalo dns error setau saya web akan tidak bisa diakses semua gan.

      Hapus
    7. punya saya belum bisa-bisa ya mas, mungkin mas bisa bantu menganalisanya

      ini tampilan ss dari cloudflare saya https://postimg.cc/PvDh6FC9, https://postimg.cc/yWxDhVv3, https://postimg.cc/zVR3MxmJ

      Hapus
    8. nah di setingan dns untuk custom domain blogger ke cloudflare, di tutor saya ini https://www.marwanto606.com/2019/10/mengintegrasikan-custom-domain-blogger.html tidak menggunakan ip cloudflare seperti itu gan. coba di ikuti pelan-pelan. untuk setingan ssl, jika ketersediaan https di dashbord blogger status sudah tersedia maka setingan ssl pada cloudflare diatur ke Full (strict) baru awan proxy di www diaktifkan. dan saran saya file icon di buat di repo baru agar tidak sulit membuat route nya gan.

      Hapus
  8. apa mas sudah tahu caranya mengganti domain gambar blogger dengan domain sendiri seperti thehackernews?

    BalasHapus
    Balasan
    1. https://www.marwanto606.com/2021/04/cara-membuat-cdn-image-blogger-dengan-domain-sendiri.html

      Hapus
  9. ada fitur baru di cloudflare transform rules apa mas sudah mengetahuinya

    BalasHapus
  10. btw itu kenapa tombol balas komentar tidak ada ya mas, apa memang tidak muncul atau mas non aktifkan.

    BalasHapus
    Balasan
    1. sepertinya itu akan beringkat kalo pake tombol reply dari yang pertama komen gan.

      Hapus
  11. Terima kasih tutorialnya mas, saya coba gabungkan dengan komponen AMP dan alhamdulillah jalan mas. Malah di AMP untuk notif install app nya otomatis aktif di mobile.

    BalasHapus
  12. Untuk /p/offline.html dibiarkan kosong atau gmn hu?

    BalasHapus
    Balasan
    1. untuk pertama kali judul dan isi nya ditulis kata "offline" saja gan, agar url nya jadinya pasti /p/offline.html. Nanti jika proses pembuatan pwa sudah selesai. bisa diedit halamannya dengan keterangan "halaman offline".

      Hapus
    2. Atau bisa buat /offline.html di worker mas, jadi seperti membuat halaman html sederhana gitu, seperti Hello World.

      Hapus
    3. nah itu malah lebih keren lagi idenya mas. agar halamannya lebih clean.

      Hapus
    4. Iya mas, saya buat tutorialnya untuk blogger AMP, langkah-langkah pokoknya saya suruh mereka ikuti tutorial mas ini, saya hanya menambahkan penyesuaian dengan komponen amp-install-serviceworker saja dan sedikit merubah halaman offline nya saja.

      Hapus
    5. ok mas, terima kasih. untuk tutorial amp nanti juga saya arahkan ke artikel mas. karna saya belum test pwa di amp. :d

      Hapus
    6. matur suwun mas Marwanto dan kang Adhy, langsung work :v

      Hapus
  13. Mas, saya cek blog thehackernews,com bisa otomatis muncul notif install app di mobile. File /sw.js dan /manifest.json nya berbeda. Coba cek mas, jika berhasil coba buat post baru sebagai update artikel ini dan artikel ini jangan diubah karena work untuk AMP. Jika sudah dibuatkan bisa kasih tahu saya biar dilinkkan untuk update pengguna non AMP dapat muncul notif install app di mobile.

    BalasHapus
    Balasan
    1. nah notif install app ini yang bikin saya sedikit bingung mas, karna dulu kadang muncul kadang tidak mau muncul. karna itu saya pasangkan button install app, agar lebih mudah menginstall app saat sw.js terregister. mungkin kapan-kapan saya ulik lagi mas.

      Hapus
    2. Tanya aja langsung ke admin thehackernews emailnya [email protected]

      Hapus
  14. Mau tanya lagi donk mas :)

    apakah blogger support news sitemap?

    BalasHapus
    Balasan
    1. news sitemap untuk google news ya gan? karna saya tidak penah main google news. saya kurang tau gan. kalo sitemap.xml bawaan blogger itu sepertinya sedikit beda tag nya dengan news sitemap. tapi mungkin bisa di implementasikan pake worker cloudflare. idenya dengan membuat sebuah file sitemap yang isinya di ambil dari feeds blog.

      Hapus
    2. tanya ke mas adhy kompiajaib saja mas

      Hapus
  15. klo langsung pakai github.io/... tanpa bantuan dari staticaly.io apa bisa mas?

    BalasHapus
    Balasan
    1. bisa gan, dibuat dulu github pages di repo nya.

      Hapus
  16. Untuk blog non AMP, saya berhasil membuat notif install app muncul otomatis mas, sedikit perubahan di manifest.json dan sw.js

    Saya sudah bagikan di blog saya caranya mas, untuk langkah-langkahnya masih tetap suruh ke sini, saya hanya membagikan perubahan kode manifest dan sw saja.

    BalasHapus
    Balasan
    1. saya juga sudah berhasil menampilkan notif install app di mobile mas, saya melakukan perubahan pada manifest.json, dengan menghilangkan scope dan merubah start_url nya. ternyata yang menyebabkan notif install app tidak muncul karna beforeinstallprompt ke triger dan berubah ke button. dan sekarang button installnya saya buat hanya akan muncul di pada versi dektop saja.

      terima kasih mas, saya juga akan menambahkan kan artikel tentang ini. agar semakin banyak tutorial yang dapat di coba.

      Hapus
    2. Iya mas, ada ada alternative yang bisa dicoba ya.
      Iya, barusan saya coba blog Marwanto606 di mobile sudah muncul notif install app nya, mantaf.

      Hapus
    3. iya mas biar makin banyak tutorial yang bisa di coba-coba pembaca lainnya.

      Hapus

Pembaca yang baik selalu meninggalkan jejaknya.
Dilarang berkomentar menggunakan LINK AKTIF.