Kelebihan dan Kekurangan dari PWA pada Web

Oleh Satu Tim 1 Tahun yang lalu 0 Menit Baca
progressiv web app.jpg

PWA merupakan teknologi web yang di kembangkan oleh Google. Pada dasarnya PWA masih menggunakan engine Chrome untuk menjalankan aplikasi.

Lebih tepatnya PWA adalah sebuah website yang di jalankan pada peramban chrome menggunakan javascript yang di sebut service worker.

Service worker sendiri merupakan teknologi web yang di sediakan oleh peramban untuk mengelolah cache, mengirim notifikasi, dan kegiatan lain di latar belakang meskipun pengguna sudah tidak lagi membuka halaman web kita.

Service Worker terdiri dari bahasa pemrograman javascript yang dimana bisa melakukan fetch api ke server, mengelolah sistem storage, dan juga menampilkan notifikasi.

Pada PWA kita membuat sebuah dikumentasi yang akan di tampilkan pada ponsel. Pertama menyiapkan icon dengan berbagai ukuran, membuat file manifest.json, dan membuat file service worker.

Saat proses installasi browser chrome bisa mendaftarankan website menjadi sebuah aplikasi. Namun bukan aplikasi sungguhan, melainkan sebuah frame browser yang mempreviewkan halaman website.

Aplikasi PWA hampir mirip dengan aplikasi asli. Beda nya, konten dalam pwa adalah file HTML yang di render oleh browser chrome.

PWA sangat cocok di terapkan pada website yang menggunakan konsep SPA ( Single Page Applications). Sehingga pemuatan halaman pada PWA akan terlihat lebih baik.

Dan pwa tidak cocok untuk website seperti blog atau aplikasi lain yang mempunyai beragam permalink dan halaman. Kenapa demikian?

Karena aplikasi PWA akan saling lempar tautan antara ke mode aplikasi dan Google Chrome. Misalnya ketika pengguna mendapatkan tautan keluar, maka user akan di lempar ke preview peramban Chrome.

Dan apabila visitor menemukan artikel kamu di pada hasil pencarian Google, ketika mereka klik. Mereka akan di lempar ke aplikasi PWA, jika mereka sudah menginstall aplikasi anda.

Kegiatan saling lempar ini cukup tidak menyenangkan mirip seperti sedang membuka aplikasi yang belum pernah di jalankan.

Kekurangan lain, mungkin belum kamu ketahui. PWA berjalan pada peramban chrome. Jika HP pengunjung tidak mempunyai peramban chrome, mereka tidak bisa menginstall PWA.


Cara membuat website menjadi halaman PWA

Bikin PWA itu gampang, hanya perlu menyiapkan beberapa file dan menambahkan sebuah icons khusus agar aplikasi kita bisa di pasang di berbagai jenis perangkat. Berikut ini file apa saja yang harus kamu generated.

  1. error-jaringan,html , halaman ini akan tampil saat tidak ada jaringan
  2. icon.png, beberapa icon berbagai size, untuk ukuran-ukuranya bisa lihat pada code berikut.
  3. sw.js, skrip ini yang akan mengelolah web kita di sisi ponsel menggunakan engine chrome.


  4. manifest.json, file ini adalah identitas aplikasi.

Halaman error bisa buat sendiri, contoh halaman error yang saya buat seperti ini

/p/offline

Icons header Bisa buat logo sendiri dengan ukuran minimal 300x300 kemudian konversi menjadi ukuran web di https://favicomatic.com/. Hasil code icon akan seperti ini, code ini letakan di tengah tag <head>

<meta content="#5b86e5" name="theme-color" />
<meta content="#13E8CC" name="msapplication-navbutton-color" />
<link href="/img/apple-icon-180x180-ryanid.png" rel="icon" type="image/x-icon">
<link href="/img/apple-icon-180x180-ryanid.png" rel="shortcut icon" type="image/x-icon">
<link href="/img/apple-icon-180x180-ryanid.png" rel="icon" type="image/x-icon">
<link href="/img/apple-icon-180x180-ryanid.png" rel="shortcut icon" type="image/x-icon">
<link href="/dist/favicon/ikon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
<link href="/dist/favicon/ikon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="/dist/favicon/ikon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="/dist/favicon/ikon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="/dist/favicon/ikon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="/dist/favicon/ikon-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="/dist/favicon/ikon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="/dist/favicon/ikon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="/dist/favicon/ikon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="/dist/favicon/ikon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
<link href="/dist/favicon/ikon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="/dist/favicon/ikon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="/dist/favicon/ikon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<meta content="/dist/favicon/ikon-144x144.png" name="msapplication-TileImage" />


service worker, harusnya bisa di akses di https://domain-kamu/sw.js, code nya kurang lebih seperti ini

// Ini PWA NYA
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/offline";
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)))))});


manifest.json, silakan ganti saja dokumentasi manifest berikut ini dengan data-data website anda.


{
    "name": "RyanID",
    "short_name": "Belajar Bareng",
    "theme_color": "#5b86e5",
    "description": "Mari belajar bersama ryanid, dapatkan informasi terbaru dan bots teleram",
    "background_color": "#ffffff",
    "display": "standalone",
    "prefer_related_applications": false,
    "start_url": "https:\/\/ryanid.my.id\/blog",
    "icons": [
        {
            "src": "\/dist\/favicon\/ikon-57x57.png",
            "sizes": "57x57",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-60x60.png",
            "sizes": "60x60",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-76x76.png",
            "sizes": "76x76",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-114x114.png",
            "sizes": "114x114",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/icon\/favicon-128.png",
            "sizes": "128x128",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-icon-120x120.png",
            "sizes": "120x120",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/icon\/apple-touch-icon-76x76.png",
            "sizes": "76x76",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-152x152.png",
            "sizes": "152x152",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/icon\/apple-touch-icon-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-180x180.png",
            "sizes": "180x180",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-32x32.png",
            "sizes": "32x32",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-16x16.png",
            "sizes": "16x16",
            "type": "image\/png",
            "purpose": "any maskable"
        },
        {
            "src": "\/dist\/favicon\/ikon-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "purpose": "any maskable"
        }
    ],
    "serviceworker": {
        "src": "\/sw.js"
    }
}


Daftarkan service worker di peramban denan meletakan kode berikut ini tepat sebelum tag penutup body.

<script>
if("serviceWorker" in navigator) {
  navigator.serviceWorker
           .register("/sw.js")
           .then(function() { console.log("Service Worker Registered"); });}
</script>


Bagaimana? langkah-langkahnya lumayan rumit bukan. Sebenarnya itu adalah langkah paling mudah untuk menyiapkan website menjadi PWA. PWA tidak hanya berjalan pada perangkat mobile, tapi juga bisa berjalan pada perangkat desktop seperti laptop, pc atau mac.

Asalkan pada perangkat tersebut sudah di pasang peramban dari Google Chrome. Mungkin mozila firefox juga mendukung PWA, tapi saya tidak tahu. Silakan kamu coba sendiri.

RyanID
RyanID Tertarik pada teknologi, full stack developer at netzku.com

Anda mungkin menyukai postingan ini :