Perkembangan dunia IT akhir-akhir ini berkembang sangat pesat, begitu juga dengan tingkat kebutuhan perusahaan. Namun, meskipun tingkat kebutuhan perusahaan meningkat, perusahaan tentu juga menginginkan sesuatu yang dapat dikerjakan dengan efesien dan efektif.

Contohnya saja ketika kamu akan membuat sebuah aplikasi, tentu saja kamu akan memikirkan proses pembuatan aplikasi versi web, versi android, bahkan tidak tertutup kemungkinan juga untuk versi IOS. Tentu kamu akan mengeluarkan waktu yang lama untuk proses pembuatan dan juga biaya yang banyak untuk membuat semua aplikasi tersebut.

Nah, PWA merupakan solusi dari permasalahan diatas. Dimana kamu dapat membuat semua aplikasi tersebut sekaligus. Dapat dijalankan pada perangkat desktop, dapat diinstal pada android, begitu juga dengan perangkat IOS. Singkatnya, ketika user mangakses halaman web PWA menggunakan browser, user akan menemukan tombol "Install Apps" yang kemudian apabila diklik, sistem akan secara langsung menginstal aplikasi tersebut kedalam perangkat user dan menghasilkan sebuah shortcut. Ketika shortcut tersebut diklik, aplikasi web kamu akan terbuka pada layar user layaknya aplikasi native pada umumnya.

PWA merupakan singkatan dari Progressive Web Apps. PWA bisa juga diartikan sebagai gabungan antara aplikasi desktop dan mobile. Ada banyak framework yang dapat membawamu ke PWA, salah satu contohnya Angular Framework. Namun pada artikel kali ini, kamu akan mempelajari bagaimana cara membuat aplikasi PWA sederhana dari nol.

Contoh

Sudah begitu banyak website modern yang menerapkan konsep PWA ini, di lini streaming video kamu dapat menemuinya pada Youtube dan Viu. Sementara untuk website lainnya kamu juga dapat menjumpai di Petani Kode, CodePolitan, dan juga Dazelpro tentunya About

Selanjutnya buka file about.html dan salin kode berikut:

Simple PWA

About

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Kembali

Untuk mempercantik tampilan, tambahkan kode berikut pada file style.css:

body { text-align: center; padding-right: 10%; padding-left: 10%; background-color: rgb(236, 236, 236); } h1 { font-size: 3em; } p, a { font-size: 18px; } p { text-align: justify; }

Sekarang saatnya kamu melakukan pengujian pertama menggunakan plugin Live Server dari Visual Studio Code.

Caranya cukup gampang, kamu tinggal buka file index.html di VSCode. Kemudian klik kanan di area code. Pilih Open with Live Server.

Secara otomatis, browser Chrome akan terbuka dengan sendirinya dan mengarahkan kamu ke url //127.0.0.1:5500/index.html atau ke //localhost:5500/index.html.

Berikut tampilan aplikasi website yang baru kamu buat:

Untuk tampilan kamu sudah dapatkan seperti gambar diatas, kamu bebas bila ingin berimprovisasi terhadap tampilan.

Sekarang kita lanjut ke tahap pembuatan PWA-nya. Buka file web.webmanifest yang ada di folder js. Kemudian salin kode berikut:

{ "name": "Testing PWA", "short_name": "PWA", "description": "Membuat Aplikasi PWA Pertama", "icons": [ { "src": "../img/icon.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/", "display": "fullscreen", "theme_color": "#0d0072", "background_color": "#0d0072" }

Pada file inilah kamu akan melakukan konfigurasi terhadap PWA. Mulai dari menentukan nama aplikasi, logo icon yang tampil beserta resolusinya, sampai kepada configurasi warna tema ketika aplikasi ini diinstal.

Selanjutnya buka file register.js yang berada di folder js. Lalu salin kode berikut:

document.addEventListener('DOMContentLoaded', init, false); function init() { if ('serviceWorker' in navigator && navigator.onLine) { navigator.serviceWorker.register('/service-worker.js') .then((reg) => { console.log('Registrasi service worker Berhasil', reg); }, (err) => { console.error('Registrasi service worker Gagal', err); }); } }

Kode ini akan langsung dieksekusi ketika website diakses, lalu akan mendaftarkan service worker yang berada didalam folder root (simple-pwa).

Service worker merupakan sebuah script website yang dijalankan terpisah dari halaman website. Sehingga dengan service worker kamu dapat melakukan banyak hal seperti push notifikasi, add to home screen, bahkan menjalankan aplikasi pada saat kondisi offline. Untuk lebih lanjut kamu bisa baca disini.

Buka file service-worker.js dan salin kode berikut:

const CACHE_NAME = 'SW-001'; const toCache = [ '/', 'assets/js/web.webmanifest', 'assets/js/register.js', 'assets/img/icon.png', ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { return cache.addAll(toCache) }) .then(self.skipWaiting()) ) }) self.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request) .catch(() => { return caches.open(CACHE_NAME) .then((cache) => { return cache.match(event.request) }) }) ) }) self.addEventListener('activate', function(event) { event.waitUntil( caches.keys() .then((keyList) => { return Promise.all(keyList.map((key) => { if (key !== CACHE_NAME) { console.log('[ServiceWorker] Hapus cache lama', key) return caches.delete(key) } })) }) .then(() => self.clients.claim()) ) })

Pada kode diatas kamu melihat tulisan SW-001 yang merupakan nama dari cache yang kita buat. Jadi cara kerjanya, service worker akan men-cache semua file yang telah kamu tentukan didalam variabel  toCache. Sehingga website dapat dipanggil atau dijalankan dari luar browser.

Hal terpending yang perlu kamu ingat adalah, ketika merubah file yang di cache diatas, kamu harus merubah nama dari cache tersebut agar browser tidak membaca cache yang lama.

Uji Coba

Terakhir, silahkan uji coba menggunakan Live Server kembali dengan cara yang sama seperti diatas. Pada area code index.html, klik kanan dan pilih Open with Liver Server. Pada browser kamu akan mendapatkan tampilan seperti berikut:

Jika kamu mendapatkan icon plus pada samping kanan url, itu artinya aplikasi PWA-mu berjalan dengan lancar. Apabila tombol install diklik, secara otomatis icon aplikasi kamu akan ditambahkan ke desktop.

Berikut adalah tampilan ketika aplikasi PWA dijalankan melalui shortcut diatas (diluar browser).

Kesimpulan

Sampai disini kamu telah belajar membuat dan menjalankan aplikasi PWA. Kamu juga sudah mempelajari bagaimana cara kerja dari aplikasi PWA. Link source code full pada artikel ini dapat kamu download pada halaman github saya. Terus support penulis dengan membagikan artikel ini dimedia sosial kamu atau trakteer penulis di trakteer.id