Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english

mengaktifkan progressive web app ( pwa ) di blogger

cara mengaktifkan progressive web app ( pwa ) di blogger

Hallo semua pada kesempatan kali ini saya akan membagikan cara mengaktifkan progressive web app ( pwa ) di blogger atau blogspot.

PWA adalah singkatan dari Progressive Web App, sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website yang mampu memberikan pengalaman layaknya menggunakan aplikasi mobile. selain itu juga kita tidak perlu mengeluarkan biaya untuk membuat aplikasi terpisah.

PWA ini boleh di bilang agak mirip dengan aplikasi webview karena sama - sama menampilkan sebuah aplikasi web, jika aplikasi webview harus di upload dulu ke playstore atau appstore agar bisa di dwonload oleh user, sedangkan PWA bisa langsung di instal melalui browser.

sebelumnya saya telah membaca tutorial ini di blog www.kang-ismet.com dan blog www.kompiajaib.com dan sumber utamanya ada di blog www.marwanto606.com dan saya memberikan backlink dofollow kepada 3 blog tersebut sebagai ucapan terima kasih saya.

sebelum memulai pastikan kalian memiliki domain tld, yang di maksud adalah .com .id .co.id dll bukan .blogspot.com, dan pastikan juga domain kalian sudah mengarah ke name server dari cloudflare dan mengaktifkan awan proxy.

dikarenakan saya hanya memiliki 1 domain saja, jadi saya tidak bisa praktekkan cara mengarahkan domain ke cloudflare, dan lagi pula cara setting nya juga berbeda di setiap penyedia jasa domain.

maka itu saya sarankan untuk kalian mencari referensinya langsung di blog penyedia jasa domain yang kalian pakai, biasanya setiap penyedia domain itu ada menyediakan tutorialnya, contohnya saya menggunakan rumahweb.com dan mereka juga ada tutorialnya kalian bisa klik di sini jika menggunakan rumahweb.com.

tutorial ini boleh di bilang agak rumit maka itu harap baca dengan teliti dan ikuti tahap - tahap nya dengan baik, di sini saya juga menyematkan gambar screnshot yang lumayan banyak agar mudah di mengerti. ok buat kalian yang ingin mencobanya mari simak caranya di bawah ini.

Tahap Pertama Membuat Icon App

  1. siapkan icon logo dengan format .png dengan ukuran dimensi 512 x 512 dan beri nama android-icon-512x512.png ( nama icon harus sama agar terbaca nantinya ).

  2. generate icon logo yang sudah di buat tadi ke favicon-generator.org lalu dwonload file .zip iconya.

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
  3. extrak file yang sudah di dwonload tadi dan hapus file browserconfig.xml dan manifest.json karena itu tidak di butuhkan, dan pindahkan icon android-icon-512x512.png yang di buat awal tadi ke dalam 1 file dengan icon yang di dapatkan dari favicon-generator.org.

    cara mengaktifkan progressive web app ( pwa ) di blogger

Tahap Kedua Upload Icon Ke Repo Github

  1. silakan masuk ke github.com, buat yang belum punya akun silakan daftar terlebih dulu.

  2. kemudian buat repository baru dengan cara klik icon + pojok kanan atas > new repository > repository name (bebas apa aja) selebihnya silakan atur seperti gambar di bawah ini, dan create repository.

    cara mengaktifkan progressive web app ( pwa ) di blogger

    lanjut klik add file > upload files

    cara mengaktifkan progressive web app ( pwa ) di blogger

    klik pada choose your files kemudian pilih file icon yang sudah kalian buat di tahap awal gunakan ctrl + a untuk seleksi semua iconnya dan klik open, setelah proses upload selesai lalu klik commit changes

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

Tahap Ketiga Membuat Worker Di Cloudflare

  1. silakan masuk ke cloudflare.com, dan klik menu workers

    cara mengaktifkan progressive web app ( pwa ) di blogger

    jika ini adalah pertama kali kalian membuat workers maka kalian akan di minta membuat subdomain ( bebas yang penting masih tersedia), kemudian kalian akan di minta memilih plan pilih saja continue with free

    CATATAN
    di sini kita akan membuat 4 worker, maka itu di tahap ini kita akan terus mengulang membuat worker sebanyak 4 kali
    1. main
    2. manifest
    3. serviceworker
    4. offline

    selanjutnya klik tombol create a worker > hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    
    addEventListener("fetch", event => {
      event.respondWith(handleRequest(event))
    })
    
    //const BUCKET_NAME = "main"
    const BUCKET_URL = `https://raw.githubusercontent.com/choipanwendy/icon-wendycode`
    
    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 })
      }
    }

    bagian yang saya tandai choipanwendy/icon-wendycode silakan di ganti dengan username dan nama repo kalian, jika bingung silakan kembali ke tahap kedua upload icon ke repo github

    dan rename menjadi main-namabloganda contoh main-wendycode dan klik rename and deploy kemudian klik kembali ke workers

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
  2. klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    addEventListener("fetch", event => {
      const data = {
        name: "Wendy Code",
        short_name: "Wendy Code",
        display: "standalone",
        prefer_related_applications: false,
        start_url: ".",
        scope: "\/",
        background_color: "#fff",
        theme_color: "#f89000",
        description: "Membahas tutorial seputar blogging, blogger tutorial, blogspot tutorial, dan tools gratis.",
        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"
          }
        })
      )
    })

    bagian yang saya tandai silakan di sesuaikan dengan blog kalian

    dan rename menjadi manifest-namabloganda contoh manifest-wendycode dan klik rename and deploy kemudian klik kembali ke workers

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
  3. klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

    dan rename menjadi serviceworker-namabloganda contoh serviceworker-wendycode dan klik rename and deploy kemudian klik kembali ke workers

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    const js = `
    'use strict';
    const CACHE_VERSION=1;
    let CURRENT_CACHES={offline:"offline-v1"};
    const OFFLINE_URL="/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))
    })
  4. klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    const html = `<!DOCTYPE html>
    <head>
    <meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
    </head>
    <body style=" background: #fff; ">
    <div style=" margin: 0 auto; max-width: 1000px; text-align: center; padding-top: 100px; color: #111; ">
    <div style=" font-family: Arial,Helvetica,sans-serif; font-size: 50px; ">Oops, Anda Sedang Offline!</div>
    <div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">Cek Koneksi Internet Anda Dan Coba Kembali.</div>
    </div> </body>`
    
    async function handleRequest(request) {
      return new Response(html, {
        headers: {
          "content-type": "text/html;charset=UTF-8",
        },
      })
    }
    
    addEventListener("fetch", event => {
      return event.respondWith(handleRequest(event.request))
    })

    bagian yang saya tandai pesan kata - kata offline nya silakan di sesuaikan sesuai selera kalian atau bisa di biarkan saja

    dan rename menjadi offline-namabloganda contoh offline-wendycode dan klik rename and deploy kemudian klik domain kalian untuk kembali ke beranda

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

Tahap Keempat Membuat Route

klik menu workers > add route pada blog.choipanwendy.com silakan ganti dengan domain kalian, jika menggunakan domain utama harus di awali www contoh www.choipanwendy.com karena saya menggunakan subdomain jadi tidak di awali www

cara mengaktifkan progressive web app ( pwa ) di blogger
  1. blog.choipanwendy.com/main/* untuk worker main-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger
  2. blog.choipanwendy.com/manifest.json untuk worker manifest-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger
  3. blog.choipanwendy.com/serviceworker.js untuk worker serviceworker-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger
  4. blog.choipanwendy.com/offline.html untuk worker offline-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger

    jika sudah silakan buka link di atas satu - satu untuk memastikan tidak ada eror, jika semua nya berhasil terbuka bearti tidak ada masalah

Tahap Kelima Edit Template Blogger

silakan masuk ke blogger > tema > edit html kemudian salin dan letakkan kode di bawah ini di area tag <head> atau bisa kalian kelompokkan dengan tag meta yang berada di template kalian.

jika template memiliki kode serupa silakan di hapus, bagian yang saya tandai #f89000 silakan di sesuaikan dengan warna 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='#f89000' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#f89000' name='theme-color' />
<link href='/manifest.json' rel='manifest' />

dan terakhir salin kode di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah silakan klik simpan selesai.

<script>
//<![CDATA[
if ('serviceWorker' in navigator){window.addEventListener('load',() =>{navigator.serviceWorker.register('/serviceworker.js').then(registration =>{;}).catch(registrationError =>{console.log('SW registration failed:',registrationError);});});}
//]]>
</script>

ok jadi sekian cara mengaktifkan progressive web app ( pwa ) di blogger semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :

Mau donasi lewat mana?

Paypal
Bank Mandiri - An.wendy yulianto / Rek - 1150006900577
Traktir kreator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas