PWA - Progressive Web App

Progressive Web App

Sekilas mengenai Web atau World Wide Web, sering disingkat sebagai www, yakni sebuah sistem dimana informasi dalam bentuk teks, gambar, suara, dan lain-lain dipresentasikan dalam bentuk hypertext dan dapat diakses oleh perangkat lunak yang disebut browser.

Table of Contents

Apa itu Progressive Web App ?.

Progressive Web App disingkat menjadi PWA adalah sebuah aplikasi yang dibangun dengan melakukan optimasi pada sebuah website. Progressive web apps merupakan metode pengembangan perangkat lunak terbaru yang memungkinkan pengguna merasakan pengalaman menggunakan aplikasi mobile melalui browser. Teknologi ini diciptakan karena adanya dilema para pemilik situs dan layanan online pada pilihan mengembangkan mobile web atau mobile apps.

Kegunaan PWA adalah untuk memberikan kemudahan akses serta menghilangkan keterbatasan karena sumber atau resource terbatas. PWA menjadikan akses mudah dengan akses online seperti penggunaan pada mobile di smartphone. Pada website yang menerapkan PWA tidak perlu membuat aplikasi mobile lagi.

Secara singkat, Progressive Web App atau PWA adalah gabungan dari web apps dan mobile apps. Sebelumnya, Mobile Apps adalah aplikasi JavaScript yang bekerja di browser dan bertujuan untuk membawa fitur-fitur native app ke website.

Dengan perkenalan API web yang baru, PWA dapat membantu membawa UI dan UX aplikasi ke browser web di perangkat mobile Anda. Jadi, Progressive Web Apps adalah aplikasi web tradisional yang disempurnakan dengan teknologi web modern, memungkinkan mereka untuk memberikan pengalaman yang lebih mirip aplikasi. Kata progressive di depan kata web apps menandakan adanya peningkatan web modern pada website. Tapi, jika browser lama tidak mendukung fitur baru pada PWA, mereka masih tetap bisa menampilkan websitenya. Tentunya website akan berfungsi lebih baik jika Anda mengaksesnya melalui browser modern.

Flexible

PWA bekerja untuk semua plaform browser, Chrome, Opera, Firefox, Edge , dll dan di lokasi negara manapun. Anda tetap dapat membuka website tersebut dengan waktu loading yang cepat.

Progressive Web App akan bekerja dengan baik karena, dibangun dengan peningkatan progresif sebagai prinsip intinya.
Responsive

Progressive Web Apps bekerja untuk semua device, baik itu desktop, mobile, atau tablet.

Progressive Web Apps tidak tergantung dengan konektivitas

Dengan bantuan service workers, PWA tetap bisa bekerja dengan jaringan yang lemah.

Apps Friendly

PWA dirancang agar terasa seperti aplikasi. Mereka memiliki gaya interaksi dan navigasi seperti aplikasi handphone.

Up-to-date

Karena adanya service workers, PWA akan selalu up-to-date.

Easy Search Engine

Sesuai dengan manifest W3C, klasifikasi Progressive Web Apps adalah sebagai aplikasi. PWA juga akan lebih mudah ditemukan oleh mesin pencari berkat adanya service workers.

Meningkatkan user engagement

Dengan fitur-fitur PWA seperti push notifications, ini membantu meningkatkan user engagement.

Easy Instalation

Pengguna dan pengunjung website dapat menyimpan progressive web apps yang sering mereka akses langsung ke home screen handphone mereka sehingga Anda tidak perlu mendownload aplikasi dari app stores.

Linkable Sharing

PWA bisa dengan mudah dibagikan ke orang lain dengan URL tanpa proses instalasi yang complex.

Kelebihan Progressive Web App

Saat Anda membukanya PWA, maka akan loading dengan cepat berkat API Cache dan IndexedDB, yang menyimpan sumber daya dan data aplikasi di perangkat Anda. Ini memungkinkan mereka bekerja bahkan ketika sedang offline.
Fetch API membuat aplikasi PWA dapat dengan lebih cepat dan lebih mudah meminta data. Mereka memiliki file Web App Manifest, yang memberikan nama, ikon, penulis, dan deskripsi yang digunakan saat memasang aplikasi ke homepage atau desktop Anda.
PWA selalu ditampilkan melalui HTTPS terenkripsi, yang berarti mereka aman dan data tidak dapat diubah saat transit. Jika developer ingin memperbarui aplikasi web progresif mereka, mereka memperbaruinya persis seperti mereka memperbarui aplikasi web — di server mereka. Semua platform dan browser yang mendukung PWA dapat menggunakan Progressive Web Applications yang sama.
PWAdapat dicantumkan di App store untuk penemuan dan pemasangan yang lebih mudah, tetapi app store hanya akan mengarah ke server aplikasi web. Bahkan jika aplikasi PWA tidak kompatibel dengan kebijakan konten App store, pengguna akan dapat menemukan dan menginstalnya langsung dari browser mereka.
PWA akan menggantikan platform Chrome Apps yang akan dihentikan. Google mengatakan dukungan untuk instalasi desktop PWA sejak pertengahan 2018. Kemudian, PWA tersebut bekerja dengan Chrome di desktop. Fitur ini sudah diuji dalam versi pengembangan Chrome yang tidak stabil, bernama Canary. Di Android, Google Chrome sudah mendukung instalasi Progressive Web App, seperti halnya browser handphone lain seperti Mozilla Firefox, Opera, dan browser Samsung. Google bekerja pada teknologi bernama WebAPK yang akan memungkinkan PWA untuk diubah menjadi file APK (file aplikasi Android) dan diinstal ke perangkat, seperti aplikasi lain. Project Manager dari Chrome sempat mengisyaratkan bahwa PWA dapat ditambahkan ke Play Store juga.

Tutorial Membuat PWA

Bagaimana cara membuat PWA Blog? Cara membuat PWA - Progressive Web App dengan platform Blogger.

Langkah #1 Anda harus mempunyai logo gambar ukuran 512 x 512 pixel , kemudian di generate menjadi icon-icon menggunakan favicon generator.

Langkah #2 Anda harus mempunyai akun Github (berguna untuk mengupload file icon)

Langkah #3 Setelah anda sudah berhasil melakukan langkah #1 dan #2 , kemudian anda harus mempunyai akun Cloudflare untuk membuat workers.

Setelah selesai membuat akun Cloudflare dan berhasil menghubungkan website Blogger dengan Cloudflare, lanjut membuat Service Worker Cloudflare.

Service worker adalah komponen yang bisa diprogram dan berada di antara browser dan web server. Dengan memasang service worker maka kita bisa melakukan cache pada resources yang dibutuhkan dan juga memungkinkan aplikasi kita tetap bisa diakses dengan baik walaupun di jaringan yang tidak stabil atau bahkan offline.

Ikuti langkah-langkah membuat Workers dan Router Cloudflare, berikut ini.

A. Cloudflare Worker 'main'

Cara membuat 'main' worker di Cloudflare sebagai berikut.

Pilih Worker Router > Manage Workers - lihat contoh gambar worker #1.
Klik Create application - lihat contoh gambar worker #2.
Kemudian pilih Create Worker - lihat contoh gambar worker #3
Kemudian ganti nama worker / rename dengan nama apa aja, contoh : 'mainparabola' > klik Deploy - lihat contoh gambar worker #4.
Setelah selasai ganti nama worker, pilih Edit code - lihat contoh gambar worker #5.
Hapus script yang ada, ganti dengan script di bawah ini - lihat contoh gambar worker #6

Kode Script Worker main

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

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/saeblog/icon-sae`

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

NB : Perhatikan Bucket Url yang diblok, ganti dan sesuaikan dengan Url icon Github anda.

Terakhir Save and deploy - lihat contoh gambar worker #7

Langkah #1 - membuat workers cloudflare

Langkah #2 - membuat workers cloudflare

Langkah #3 - membuat workers cloudflare

Langkah #4 - membuat workers cloudflare

Langkah #5 - membuat workers cloudflare

Langkah #6 - membuat workers cloudflare

Langkah #7 - membuat workers cloudflare

Setelah selesai langkah-langkah membuat worker dengan nama 'mainparabola' diatas , kemudian membuat tahapan worker selanjutnya.

B. Cloudflare Worker manifest.json

Pilih Create Worker - lihat contoh gambar worker #3
Kemudian ganti nama worker / rename dengan nama apa aja, contoh : 'mainifestparabola' > klik Deploy - lihat contoh gambar worker #4.
Setelah selasai ganti nama worker, pilih Edit code - lihat contoh gambar worker #5.
Hapus script yang ada, ganti dengan script di bawah ini - lihat contoh gambar worker #6

Kode Script Worker Manifest.Json

addEventListener("fetch", event => {
  const data = {
    name: "Sae Bloggesr",
    short_name: "Sae Bloggers",
    display: "standalone",
    prefer_related_applications: false,
    start_url: ".",
    scope: "\/",
    background_color: "#fff",
    theme_color: "#007634",
    description: "Situs Weblog Informasi, Teknologi &amp; Bisnis.",
    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"
      }
    })
  )
})

NB : Perhatikan yang diblok, ganti dan sesuaikan dengan Blog kalian. Untuk kode warna harap di catat karena nanti akan digunakan di blog.

Terakhir Save and deploy - lihat contoh gambar worker #7

Setelah selesai langkah-langkah membuat worker dengan nama 'manifestparabola' diatas , kemudian membuat tahapan worker selanjutnya.

C. Cloudflare Service Worker 'sw.js'

pilih Create Worker - lihat contoh gambar worker #3
Kemudian ganti nama worker / rename dengan nama apa aja, contoh : 'workerparabola' > klik Deploy - lihat contoh gambar worker #4.
Setelah selasai ganti nama worker, pilih Edit code - lihat contoh gambar worker #5.
Hapus script yang ada, ganti dengan script di bawah ini - lihat contoh gambar worker #6

Kode Script Service Worker sw.js

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

Terakhir Save and deploy - lihat contoh gambar worker #7

Setelah selesai langkah-langkah membuat worker dengan nama 'workerparabola' diatas , kemudian membuat tahapan worker selanjutnya.

D. Cloudflare Worker 'offline.html'

pilih Create Worker - lihat contoh gambar worker #3
Kemudian ganti nama worker / rename dengan nama apa aja, contoh : 'offlineparabola' > klik Deploy - lihat contoh gambar worker #4.
Setelah selasai ganti nama worker, pilih Edit code - lihat contoh gambar worker #5.
Hapus script yang ada, ganti dengan script di bawah ini - lihat contoh gambar worker #6

Kode Script Worker Offline

const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #E8EAF6; ">
<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, You're Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">It looks like your network connection isn't working right now.</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))
})

Terakhir Save and deploy - lihat contoh gambar worker #7

Setelah selesai membuat worker dengan nama 'offlineparabola' diatas , dan tahapan selanjutnya membuat Route.

Cloudflare Route

Pilih Workers router > Add route (isi nya sesuaikan dengan nama blog dan worker)

masukan www.parabola.id/main/* untuk mainparabola

masukan www.parabola.id/manifest.json untuk manifestparabola

masukan www.parabola.id/sw.js untuk workerparabola

masukan www.parabola.id/offline.html untuk offlineparabola

Langkah #2 - membuat route cloudflare

Setelah selesai semua memasukan nama alamat router dengan nama worker, hasilnya akan menjadi seperti ini.

Langkah #2 - membuat route cloudflare

Uji Coba Cloudflare Route

Coba buka link route di bawah ini satu-persatu, kalau bisa terbuka seperti contoh di bawah ini berarti pembuatan worker dan router Cloudflare berhasil dan tidak ada masalah.

www.parabola.id/main/android-icon-144x144.png

uji coba route main

www.parabola.id/manifest.json

uji coba route manifest.json

www.parabola.id/sw.js

uji coba route sw.js

www.parabola.id/offline.html

uji coba route offline

Selesailah langkah-langkah membuat worker dan router di Cloudflare, sekarang tinggal setting di blog.

Setting PWA Blogger

Kode Script PWA Blogger

Masuk ke Dashboard Blogger
Pilih Tema
Masuk ke Edit HTML
salin simpan kode script di bawah ini di area kode <head> , hapus file serupa yang sudah ada.

<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='#007634' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#007634' name='theme-color' />
<link href='/manifest.json' rel='manifest' />

NB. silahkan edit, warna thema sesuai manifest.json

Kemudian salin dan letakkan kode script dibawah ini ini diatas </body> (u/ Template Non AMP)

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

Terakhir - Simpan Tema

Demo Progressive Web App

Apakah PWA yang kitu buat ini berhasil atau tidak ?. Demo tampilan Icon PWA yang telah kita buat, akan muncul saat desktop komputer atau mobile smratphone belum terinstall PWA tersebut, untuk melihat contoh nya silahkan lihat demo tampilan sebagai berikut.

Demo Tampilan PWA di Desktop

tampilan icon pwa desktop

tampilan icon pwa desktop setelah klik install

Demo Tampilan PWA di Mobile Smartphone

tampilan pwa mobile sebelum di install

Demo PWA-1 Demo PWA-2 Demo PWA-3

Kesimpulan

Progressive Web Apps bertujuan untuk memperkuat user experience di web, meskipun bisnis Anda memiliki situs web skala rendah dan konten media yang lebih sedikit, tiada ada salahnya mencoba beralih ke PWA.

Dan bagi bisnis e-commerce yang ingin memberikan mobile-first experience kepada user atau meningkatkan keterlibatan dengan para pelanggan, adalah suatu kebutuhan membangun PWA menjadi sesuatu yang harus Anda lakukan.

Alhamdulillaah selasai juga, demikian Tutorial membuat PWA Blogger , semoga bermanfaat.

Source:
Marwanto606, Kompi-Ajaib, Kang-Ismet dan Bloggers

Go to Link

Sentra Bloggers

Progressive Web App Blogger, Github dan Cloudflare