Apa itu Progressive Web Apps (PWA) Pentingkah untuk Website?

Frances Berriman dan Alex Russel memperkenalkan teknologi untuk memudahkan dan meningkatkan engag...
Penulis
Admin
Kategori
Teknologi Web
Estimasi
5 menit baca
Dilihat
1.1K
Posting
06 Jul 2022
Apa itu Progressive Web Apps (PWA) Pentingkah untuk Website? Frances Berriman dan Alex Russel memperkenalkan teknologi untuk memudahkan dan meningkatkan engagement pada website kepada user yaitu progressive web apps yang sudah mudah digunakan oleh banyak website. Apa itu Progressive Web Apps (PWA) Pentingkah untuk Website?
2022-11-25

Ada yang belum kenal dengan PWA atau Progressive Web Apps? Bagi kalian yang belum kenal dengan Progressive Web Apps, kita akan membahas seputar Progressive Web Apps untuk website, bagaimana teknologi ini dapat meningkatkan engagement pengguna, kelebihannya dan lainnya.

Teknologi ini pertama kali diperkenalkan oleh Frances Berriman dan Alex Russel pada tahun 2016, dengan menggunakan Service Worker sebagai kinerja website kedalam perangkat mobile. Teknologi ini sudah banyak digunakan kedalam website agar lebih praktis dan modern, alasan teknologi ini sudah mulai banyak digunakan karena dapat diakses didalam smartphone dengan cepat.

 

 

Berkenalan Dengan Progressive Web Apps (PWA) Untuk Website

 

1. Apa itu Progressive Web Apps (PWA)

Secara garis besar, Progressive Web Apps atau yang sering disingkat dengan PWA merupakan metode dalam website untuk memungkinkan user mengakses website dalam aplikasi mobile. Progressive Web Apps (PWA) dianggap menjadi alternatif dari aplikasi mobile, selain tidak perlu membutuhkan biaya yang besar, juga proses dalam pembuatannya bisa dibilang lebih cepat dibandingkan membuat aplikasi mobile native.

Teknologi ini seperti aplikasi asli dalam perangkat mobile, karena harus melewati proses installasi pada umumnya, namun yang menarik adalah PWA dapat bekerja secara offline dan mudah untuk disinkronisasi. Progressive Web Apps (PWA) menggunakan beberapa teknologi agar bekerja seperti Service Worker, API atau manifest.

Jika website yang sudah menggunakan PWA sudah terinstall didalam smartphone, user tidak perlu repot untuk membuka akses kedalam website tersebut dengan browser, karena sudah tersedia di home screen smartphone. Jika user membuka URL website didalam browser, akan langsung dialihkan kedalam aplikasi PWA yang sudah dipasang.

 

Apa itu Progressive Web Apps (PWA)

aalpha.net

 

2. Mengenal Service Worker

Service Worker merupakan komponen utama yang harus dimiliki oleh Progressive Web Apps (PWA), Service Worker sendiri bekerja dalam background browser. Menurut penjelasan dari web.dev, Service Worker merupakan fundamental dari PWA itu sendiri. Ketika sebuah website sudah menggunakan PWA, secara otomatis akan mendaftarkan kedalam service worker yang sudah diatur dengan menggunakan Javascript, hal ini untuk melakukan cache terhadap asset secara offline.

Karena syarat utama adalah bisa digunakan secara offline, Service Worker ini adalah komponen yang wajib dimiliki. Selain itu beberapa hal bisa dilakukan oleh Service Worker adalah Push Notifications. Service Worker akan bekerja dalam jaringan HTTPS, hal ini dibutuhkan untuk memberikan rasa aman ketika terhubung dengan jaringan.

Berikut adalah contoh registrasi Service Worker kedalam browser:

if("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
        navigator.serviceWorker.register("/service-worker.js").then(
            function (registration) {
                console.log('Service worker successfully registered.');
            },
            function (error) {
                console.error('Unable to register service worker.', error);
            }
        );
    });
}

 

Dan berikut ini adalah contoh dari syntax javascript service worker:

//service-worker.js

// menentukan nama cache dan asset apa saja yang akan dicache
var name = 'cache assets';
var assets = [
    'index.html',
    '/js/main.js',
    '/css/style.css'
]

// pemasangan cache dengan service worker
self.addEventListener('install', e => {
    console.log('Service Worker: Successfully installed');
    e.waitUntil(
        caches.open(name).then(cache => {
            console.log('Service Worker: Caching Files Done!');
            cache.addAll(assets);
        }).then(() => self.skipWaiting())
    );
});


// lakukan aktivasi
self.addEventListener('activate', e => {
    console.log('Service Worker: Successfully activate');
}); 

// fetch cache
self.addEventListener('fetch', e => {
    console.log('Service Worker: Fetching Cache');
    e.respondWith(fetch(e.request).catch(() => caches.match(e.request)));
});

 

Syntax dari block kode tersebut akan memberitahu kepada browser, apa saja asset yang akan di akan dicache ketika user mengunjungi website pertama kalinya dan melakukan aktivasi agar fitur offline dapat bekerja, lalu melakukan fetch terhadap asset yang akan dicache kedalam browser.

 

3. Mengenal Manifest

Manifest dibutuhkan untuk menentukan dan mengatur aplikasi PWA yang kita inginkan, misalnya menentukan warna tema, menambahkan logo website, menentukan nama aplikasinya, screen orientation dan lain sebagainya. Manifest bekerja dengan dokumen JSON yang disisipkan didalam dokumen HTML website. Contoh penerapan didalam website:

<link rel="manifest" href="manifest.json"/>

Lalu isi dari dokumen JSON manifest biasanya akan terlihat seperti ini:

{
    "short_name": "Apps Lite",
    "name": "Apps",
    "icons": [
        {
        "src":"assets/logo.png",
        "sizes": "192x192",
        "type": "image/png"
        }
    ],
    "start_url": "/",
    "background_color": "#000000",
    "theme_color": "#000000",
    "display": "standalone"
}

 

Berkenalan Dengan Progressive Web Apps (PWA) Untuk Website

dev.to

 

4. Apa kelebihan dari Progressive Web Apps (PWA)

Beberapa manfaat yang akan kalian rasakan jika website sudah menggunakan teknologi ini diantaranya:

1. Proses pembuatan yang cepat

Untuk membuat PWA, kalian hanya membuat beberapa komponen saja agar dapat bekerja dengan website kalian yaitu menerapkan shell pada HTML, membuat service worker, mendaftarkan service worker kedalam browser dan membuat manifest.

Hal ini tidak akan membutuhkan biaya yang besar dan proses pembuatan yang cepat dibandingkan dengan aplikasi native pada umumnya.

2. Meningkatkan engagement dan konversi dengan user

Beberapa perusahaan sudah membuktikan dengan menerapkan teknologi ini dapat meningkatkan engagement dengan user, karena kemudahan yang diberikan kepada user ketika mengakses website dengan smartphone, yaitu dengan cara menginstall aplikasi melalui notifikasi add to home screen saat user pertama kali mengunjungi website. PWA dapat bekerja dengan push notifications secara online maupun offline.

Selain itu, Progressive Web Apps dapat meningkatkan konversi yang tinggi dibandingkan dengan website yang tidak menggunakan teknologi ini sama sekali. 

3. Tidak perlu install melalui play store

Pada umumnya, aplikasi mobile harus dipasang didalam play store agar dapat dijangkau oleh user. Ini sangat berbeda dengan Progressive Web Apps, dimana pemilik tidak perlu mensubmit kedalam play store untuk digunakan oleh user, memunculkan notifikasi "add to home screen" merupakan cara mudah untuk menambahkan aplikasi PWA kedalam smartphone user.

 

5. Kekurangan dari Progressive Web Apps (PWA)

Selain kelebihan, kalian juga perlu mengetahui apa saja kekurangan dari Progressive Web Apps (PWA) ini.

1. Tidak dapat ditemukan di Play Store

Karena teknologi ini bekerja dengan browser, maka secara otomatis tidak dapat disubmit kedalam play store. Disisi lain hal ini menguntungkan karena tidak perlu repot untuk submit aplikasi dan membuat aplikasi secara native.

Jika melihat dalam persfektif lain, PWA tidak bisa menyesuaikan dengan user yang lebih menggunakan play store ketika sedang mencari aplikasi. Hal ini dapat menjadi tantangan baru bagi pemilik website.

2. Memiliki fitur yang terbatas dan belum bisa digunakan oleh platform iOS

Teknologi ini hanya memiliki fitur yang terbatas dibandingkan dengan aplikasi mobile pada umumnya. Aplikasi mobile yang native jauh lebih eksploratif dibandingkan dengan Progressive Web Apps.

Selain itu, kekurangannya adalah teknologi ini belum sepenuhnya support dengan perangkat iOS dibandingkan dengan perangkat android.

3. Teknologi yang Terbilang baru

Progressive Web Apps (PWA) merupakan teknologi yang tergolong masih sangat muda (dirilis pada tahun 2016). Hal ini mengakibatkan masih banyak developer yang belum paham mengenai mekanismenya secara menyeluruh.

 

Kesimpulan

Progressive Web Apps (PWA) merupakan teknologi yang memberikan pengalaman untuk user dalam menggunakan website dengan menggunakan aplikasi mobile melalui browser. PWA menjadi alternatif lain dari aplikasi mobile native yang tentu membutuhkan waktu yang tidak sebentar dan biaya yang tinggi.

Meskipun teknologi ini masih terbilang baru, namun sangat disarankan untuk dipelajari karena sudah mulai terlihat perusahaan besar sudah menggunakan teknologi Progressive Web Apps (PWA) sebagai langkah untuk meningkatkan engagement dengan user, hal ini perusahaan lainya akan membutuhkan developer yang paham tentang teknologi ini untuk menerapkan kedalam sistem aplikasi mereka.

Share