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.
  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
  • 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.
  • 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 sedikit ketelitian ya.

  • Pertama kalian masuk ke akun cloudflare kalian, kemudian klik menu Workers
  • Disini kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
  • 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
  • 
    addEventListener("fetch", event => {
      event.respondWith(handleRequest(event))
    })
    
    //const BUCKET_NAME = "main"
    const BUCKET_URL = `https://cdn.statically.io/gh/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 })
      }
    }
    
  • Ganti marwanto606/icon-blog sesuai username dan repository github kalian ya.
  • 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.
  • 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 : https://www.kompiajaib.com/2021/04/mengaktifkan-pwa-pada-blogger-amp-html.html

Next Post Previous Post
107 Comments
  • AdiCore
    AdiCore 02 April, 2021

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

    • Marwanto606
      Marwanto606 02 April, 2021

      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.

  • AdiCore
    AdiCore 02 April, 2021

    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?

    • Marwanto606
      Marwanto606 02 April, 2021

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

  • AdiCore
    AdiCore 08 April, 2021

    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?

    • Marwanto606
      Marwanto606 09 April, 2021

      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.

  • AdiCore
    AdiCore 08 April, 2021

    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.

    • Marwanto606
      Marwanto606 09 April, 2021

      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.

  • AdiCore
    AdiCore 10 April, 2021

    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

    • Marwanto606
      Marwanto606 10 April, 2021

      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

    • ⠀
      15 Agustus, 2021

      madsut agan seperti di blog : farih.web.id

    • Marwanto606
      Marwanto606 24 Agustus, 2021

      ya kurang lebih seperti itu :d

  • AdiCore
    AdiCore 10 April, 2021

    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

    • Marwanto606
      Marwanto606 10 April, 2021

      nah cara itu sepertinya lebih mudah di terapkan.

  • AdiCore
    AdiCore 10 April, 2021

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

    • Marwanto606
      Marwanto606 11 April, 2021

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

    • AdiCore
      AdiCore 12 April, 2021

      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

    • Marwanto606
      Marwanto606 12 April, 2021

      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.

    • AdiCore
      AdiCore 12 April, 2021

      kalau pakai google drive bisa gak ya mas?

    • AdiCore
      AdiCore 12 April, 2021

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

    • Marwanto606
      Marwanto606 13 April, 2021

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

    • AdiCore
      AdiCore 14 April, 2021

      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

    • Marwanto606
      Marwanto606 14 April, 2021

      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.

    • AdiCore
      AdiCore 18 April, 2021

      Halo mas itu ternyata masalahnya pada cname ghs.google.com saat saya aktifkan awan kuning, file pada github bisa saya akses, namun homepage tidak bisa belum bisa diakses, apa saat mengaktifkan awan kuning pada cname tersebut sedang terjadi proses propagasi yang lama atau gimana ya mas, karena saat tidak mengaktifkan awan proxy terasa proses propagasinya cukup cepat dan file github tidak bisa diakses. apa benar seperti itu mas?

    • Marwanto606
      Marwanto606 18 April, 2021

      saya rasa saat mengaktifkan awan proxy akan ada jeda karena cloudflare mulai mengaktifkan fitur" yang ada, tapi jeda nya tidak terlalu lama gan.

    • AdiCore
      AdiCore 18 April, 2021

      sekarang sudah bisa mas dan juga sudah saya aktifkan pwa juga.

    • AdiCore
      AdiCore 18 April, 2021

      saya tunggu tutorial lainnya mas seputar cloudflare workers atau fitur lain cloudflare seperti transform rules atau sejenisnya. karena cloudflare workers menurut saya masih banyak manfaatnya untuk platform blogger juga

    • Marwanto606
      Marwanto606 18 April, 2021

      sip lah kalo sudah bisa :d, saya baru test tranform rules dan gagal gan, tidak bisa rewrite urlnya.

  • AdiCore
    AdiCore 10 April, 2021

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

    • Marwanto606
      Marwanto606 11 April, 2021

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

  • AdiCore
    AdiCore 10 April, 2021

    ada fitur baru di cloudflare transform rules apa mas sudah mengetahuinya

    • Marwanto606
      Marwanto606 11 April, 2021

      baru tau gan :d

    • AdiCore
      AdiCore 12 April, 2021

      sudah mencobanya mas

    • Marwanto606
      Marwanto606 13 April, 2021

      belum gan.

  • AdiCore
    AdiCore 11 April, 2021

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

    • Marwanto606
      Marwanto606 11 April, 2021

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

  • Adhy Suryadi
    Adhy Suryadi 12 April, 2021

    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.

    • Marwanto606
      Marwanto606 12 April, 2021

      ok mas sama-sama :d

  • Virm Aditya
    Virm Aditya 12 April, 2021

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

    • Marwanto606
      Marwanto606 12 April, 2021

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

    • Adhy Suryadi
      Adhy Suryadi 12 April, 2021

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

    • Marwanto606
      Marwanto606 12 April, 2021

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

    • Adhy Suryadi
      Adhy Suryadi 12 April, 2021

      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.

    • Marwanto606
      Marwanto606 12 April, 2021

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

    • Virm Aditya
      Virm Aditya 12 April, 2021

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

    • Marwanto606
      Marwanto606 12 April, 2021

      sip lah :d

  • Adhy Suryadi
    Adhy Suryadi 12 April, 2021

    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.

    • Marwanto606
      Marwanto606 12 April, 2021

      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.

    • AdiCore
      AdiCore 12 April, 2021

      Tanya aja langsung ke admin thehackernews emailnya [email protected]

  • Virm Aditya
    Virm Aditya 12 April, 2021

    Mau tanya lagi donk mas :)

    apakah blogger support news sitemap?

    • Marwanto606
      Marwanto606 12 April, 2021

      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.

    • AdiCore
      AdiCore 12 April, 2021

      tanya ke mas adhy kompiajaib saja mas

  • Azid Zainuri, S.Pd
    Azid Zainuri, S.Pd 13 April, 2021

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

    • Marwanto606
      Marwanto606 13 April, 2021

      bisa gan, dibuat dulu github pages di repo nya.

  • Adhy Suryadi
    Adhy Suryadi 14 April, 2021

    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.

    • Marwanto606
      Marwanto606 14 April, 2021

      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.

    • Adhy Suryadi
      Adhy Suryadi 14 April, 2021

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

    • Marwanto606
      Marwanto606 14 April, 2021

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

    • Ahmady
      Ahmady 05 September, 2021

      Para suhu ngumpul...
      Ijin nimbrung, sekalian ijin nerapin tutornya...
      🙏

  • Virm Aditya
    Virm Aditya 02 Mei, 2021

    Image blank mas,,blogspot lgi demam😆

    • Marwanto606
      Marwanto606 02 Mei, 2021

      udah sembuh gan, tadi abis kerokan :d

    • AdiCore
      AdiCore 04 Mei, 2021

      mungkin bisa menggunakan cara seperti ini https://www.marwanto606.com/2021/04/cara-membuat-cdn-image-blogger-dengan-domain-sendiri.html. tapi agar tampil gambarnya

  • Admin
    Admin 09 Mei, 2021

    kok file worker saya tidak bisa diakses semua ya www.aliif.space/manifest.json ?

    • Marwanto606
      Marwanto606 10 Mei, 2021

      kalo file tidak bisa diakses pastikan file aslinya bisa diakses dulu gan, kemudian tinggal cek route untuk workernya. bisa juga di test requestnya pada debug tool pada worker cloudflare nya gan.

  • Admin
    Admin 10 Mei, 2021

    mas mau tanya untuk script src yg di manifest.json bisa pake link cdn image-iconnya satu2 langsung dari githubnya gak misal https://aliifam.github.io/icon-blog/android-icon-512x512.png ?

    • Marwanto606
      Marwanto606 10 Mei, 2021

      bisa gan. saya juga menggunakan cdn di github pages, setelah repo dibuat github pages nya, tinggal sesuain aja route workernya. kalo mau pake setingan route yang ada /main/ request url nya diubah ke let url = new URL(event.request.url.replace('/main/', '/'))

  • Admin
    Admin 13 Mei, 2021

    alhamdulillah mas work di blog saya terimakasih tutorialnya sangat bermanfaat

    • Marwanto606
      Marwanto606 14 Mei, 2021

      ok gan, sip :d

  • Muhamad Sahrudin
    Muhamad Sahrudin 17 Mei, 2021

    "Origin SSL Certificate Error" saat akses icon, itu gimana ya mas? padahal settingan dns proxy sudah on, ssl udah Full (strict).

    • Marwanto606
      Marwanto606 18 Mei, 2021

      itu cdn icon nya di mana gan, coba di akses dulu url icon nya. coba test juga ssl nya ke full saja.

    • Kang Ismet
      Kang Ismet 18 Mei, 2021

      masalahnya di CDN Rawgit org mas, SSL issues

    • Marwanto606
      Marwanto606 19 Mei, 2021

      mungkin paling baik jika menggunakan github page sebagai cdn icon langsung.

    • Kang Ismet
      Kang Ismet 19 Mei, 2021

      iya mas.. saya sudah buat tutorialnya, kalau menggunakan CDN lain terkadang ada aja masalh

  • Kang Ismet
    Kang Ismet 18 Mei, 2021

    Akhirnya berhasil, penggabanguna tutor Mas Marwanto sama Kang Adhy Kompi Ajaib, ijin merangkumnya mas... lumayan puyeng soalnya hehe

    • Marwanto606
      Marwanto606 18 Mei, 2021

      sip lah kalo berhasil mas, silahkan di rangkum mas. biar makin banyak refrensi tutorial nya.

  • Unknown
    Unknown 21 Mei, 2021

    Where is this page?
    /p/offline.html

    And how to adjust it?

    • Marwanto606
      Marwanto606 21 Mei, 2021

      it's a page on blogger, you just need to create it in the page menu on blogger dashboard.

  • Ayo Belajar
    Ayo Belajar 22 Mei, 2021

    mas merubah search/label jadi category script worker sama routenya gimana?

    • AdiCore
      AdiCore 22 Mei, 2021

      saya juga sama menunggunya mas.

    • Marwanto606
      Marwanto606 23 Mei, 2021

      masih ada beberapa bug gan,

    • AdiCore
      AdiCore 23 Mei, 2021

      bug seperti apa mas?

    • AdiCore
      AdiCore 23 Mei, 2021

      apa kalau di akses dari /search/label/ tidak bisa otomatis redirect ke /category/ ?

    • Marwanto606
      Marwanto606 23 Mei, 2021

      breadcrums pada post tidak valid jika terdapat spasi pada url category nya. harusnya spasi di urlencode menjadi %20

    • AdiCore
      AdiCore 23 Mei, 2021

      saat saya test breadcrumbs tidak ada masalahnya mas, https://search.google.com/test/rich-results?utm_campaign=sdtt&utm_medium=url&id=C1GFjTuyDRIYmpBM7j1jvA

    • Marwanto606
      Marwanto606 23 Mei, 2021

      ini yang saya maksud ex: https://search.google.com/test/rich-results?utm_campaign=sdtt&utm_medium=url&id=3MSnnRyXglv-89bseKfsLw

    • AdiCore
      AdiCore 23 Mei, 2021

      kalau ganti pakai breadcrumbs ld+json apa bisa mas?

    • Ayo Belajar
      Ayo Belajar 23 Mei, 2021

      pada ngomongin apaan sih ga ngerti, saya cuma mau test script aja hehe

    • AdiCore
      AdiCore 30 Mei, 2021

      saya sudah berhasil menerapkan pada website saya

  • YZG
    YZG 24 Mei, 2021

    Alhamdulillah terima kasih banyak tutorialnya Mas, akhirnya muncul tombolnya di tampilan mobile. Sukses selalu Mas Adhy dan Mas Marwanto!

    • Marwanto606
      Marwanto606 24 Mei, 2021

      sip lah kalo berhasil gan :d

  • Mbah Kung
    Mbah Kung 27 Agustus, 2021

    mas saya sudah buat sesuai tutorial tapi kenapa ya url icon blog saya jika di buka bukan nya tampil malah jadi otomatis download

    • Marwanto606
      Marwanto606 21 Januari, 2022

      coba diakses dulu gambar asli yang di cdn github sebelum di route cloudfare mbah, apakah kedownload juga?

  • DEPRIHANTA
    DEPRIHANTA 10 Desember, 2021

    Mas, kalo cf sekarang tidak ada create new worker dan yg ada create new service di worker nya apa masih sama buatnya? Karena punya saya gak bisa diakses

    • Marwanto606
      Marwanto606 21 Januari, 2022

      masih sama gan, saya sudah buat beberapa worker baru.

    • AdiCore
      AdiCore 22 Januari, 2022

      Halo mas, kalau permintaan workersnya di cache agar tidak terlalu banyak memakan kuota requst harian workernya apa bisa?

    • Marwanto606
      Marwanto606 23 Januari, 2022

      wah kurang tahu kalo itu gan, setahu saya yg ke cache itu response nya gan.

    • AdiCore
      AdiCore 23 Januari, 2022

      kalau pakai caara ini apa bisa mas? https://developers.cloudflare.com/workers/examples/cache-using-fetch

    • Marwanto606
      Marwanto606 25 Januari, 2022

      kalo yang aku tau cara itu untuk menjalankan api cache cloudflare, sepertinya hampir sama dengan yang saya tulis di artikel https://www.marwanto606.com/2021/08/menerapkan-cache-strategi-menggunakan-cloudflare.html

  • AdiCore
    AdiCore 24 Mei, 2022

    Halo Mas, ada fitur baru cloudflare R2 mirip seperti bucket AWS S3. kalau versi gratisnya bisa sampai 10 jt request perbulan. bisa untuk alternatif pengimpanan di github yang melalui workers diatas.

    • Marwanto606
      Marwanto606 27 Mei, 2022

      belum nyobain gan, saya malah cobain simpan assetnya di cloudflare pages.

    • AdiCore
      AdiCore 27 Mei, 2022

      ya mas kalau pakai R2 cloudflare versi gratis dapat 10jt request. cocok untuk yang ingin menyimpan file seperti direktori. kalau saya saat ini juga masih menyimpan di github dan saya sambungkan ke cloudflare pages. btw bagus mas template barunya.

    • AdiCore
      AdiCore 27 Mei, 2022

      jadi kalau pakai R2 mungkin bisa menghemat kuota workers harian kalau ingin menyimpan file seperti direktori tapi juga bisa menggunakan cloudflares page sama seperti github page.

  • KangBatch
    KangBatch 30 Juni, 2022

    Pak, laman offline saya kok gak muncul keterangan "Oops, You are offline" kaya blog ini. Tapi malah error "This site can't reached"

    • Marwanto606
      Marwanto606 01 Juli, 2022

      itu keterangan error nya situs tidak bisa diakses, coba cek url halaman offline nya gan.

  • Inputekno
    Inputekno 25 Mei, 2023

    Kenapa ya mas doamin url https://domain.com/main/ tidak bisa diakses? isi halaman "Not Found". Sedangkan alamat url yang milik mas dapat diakses. Solusinya, padahal respon worker sudah terhubung. Apakah perlu di purge cache mas?

    • Marwanto606
      Marwanto606 02 Juni, 2023

      itu di githubnya saya buatkan file README.md yang akan diakses di awal seperti file index.html gan silahkan dicoba dbuat gan,

  • Inputekno
    Inputekno 25 Mei, 2023

    mau nanya Mas URL /../main/ gak bisa diakses, error 404. Lalu muncul notif error url icon /main/ms-icon-144x144.png . Disini saya pakai alamat custom github page di BUCKET_UR nya (domain_com/icon-blog/), padahal milik mas url www.marwanto606.com/main/ juga langsung pakai alamat custom github page tapi bisa diakses. Mohon solusinya mas.

    Ketika saya pakai https://cdn.statically.io/gh/...../icon-blog di router responnya error 400

Add Comment
comment url