Analisis Usability pada Perbandingan Web-Native dengan

Web Berbasis Progressive Web App

Kukuh Syaifudin1, Ego Pranata2, Wafa Nafisah A.3, Arum Rawining Dian4
Program Studi Informatika, Fakultas Ilmu Komputer, Universitas AMIKOM Yogyakarta
Email : kukuh.syaifudin@students.amikom.ac.id, ego.pranata@students.amikom.ac.id ,
wafa.am@students.amikom.ac.id , arum.dian@students.amikom.ac.id

Abstrak
Sejak ditemukannya pada tahun 1990, Web semakin populer dan menjadi layanan internet dengan
pengguna terbanyak. Teknologinya pun terus bergulir dari web 1.0, web 2.0, web 3.0 sampai web
4.0,. Hasil dari perkembangan web salah satunya adalah Progressive Web App (PWA) yang
merupakan pengembangan aplikasi berbasis web dimana mencakup penerapan teknologi terbaru dari
browser seperti Service Worker dan App Manifest. Secara konsep dengan bantuan Service Worker,
PWA mampu memberikan pengalaman terbaik dalam menggunakan suatu aplikasi web meskipun
dalam koneksi internet minim atau offline sekalipun. Berkaitan dengan performa, tentunya banyak
hal yang bisa di perhitungkan, misalnya kecepatan dalam me-load data pada website, keamanan data
server dan pengguna, responsibility untuk semua platform dan tentunya user friendly untuk pengguna.
Pada penelitian ini akan membahas mengenai perbandingan antara PWA dengan web-native atau web
murni pada umumnya. Sehingga dapat memberikan referensi dan bahan pertimbangan dalam
penerapan teknologi yang baru dikenalkan ini.
Kata Kunci : progressive web app, service worker, web, performa, platform

Abstract
Since found on in 1990, the Web increasingly popular and to be internet service with the user the
most . The technology continues to rolling of web 1.0, web 2.0, web 3.0 to web 4.0,. Results from
wrong web development the other a is the Progressive Web App (PWA) which is development
application Be rbasis web where includes application technology the latest of browsers such as
Service Worker d an App Manifest. In a manner concept with help from Service Workers, PWA
capable give away experience best in use something web application though in minimal or offline
internet connection though . Related with performance , of course many things that can be calculated,
for example, speed in loading data on the website, server data security and user , responsibility for
all platforms and certainly user friendly for the user . On research this will discuss about comparison
between PWA with web-native or pure web on generally . So that could give away reference and
ingredients consideration in application new technologies introduced this .
Keywords: progressive web app, service worker, web, performance, platform
________________________________________________________________________________
I. PENDAHULUAN menjadi aplikasi web yang dapat menangani
masalah pengecekan status baterai,
Saat ini teknologi aplikasi web sudah penggunaan mode offline, hingga speech
banyak mengalami perubahan fungsi. Awal recognition. Salah satu teknologi yang
mula perkembangan teknologi web dimulai tengah banyak diperhatikan saat ini adalah
dari web 1.0 yang diperkenalkan tahun teknologi Progressive Web App (PWA) [1].
1990an yang masih bersifat statis hingga
 Progressive Web Apps (PWA) adalah
sebuah istilah untuk aplikasi berbasis web
yang menggunakan teknologi web paling
mutakhir. PWA sebenarnya hanyalah
aplikasi berbasis web biasa, tapi
memanfaatkan fitur perambanan yang
modern agar tampil seolah-olah merupakan
aplikasi asli. PWA digambarkan sebagai
kumpulan dari teknologi, konsep desain dan
WEB API (Application Programming
Interface) yang bekerja secara bersama
untuk memberikan sentuhan aplikasi pada
sebuah mobile web [1].
Sedangkan pada masa sekarang masih
saja ditemukan teknologi website / web
native yang masih menggunakan teknologi
standart. Dan masih banyak website yang
belum menerapkan Progressive Web App
(PWA) didalam sebuah website. Untuk itu
disini peneliti mencoba membuktikan
usability dari web-native dan web berbasis
progressive web app.
Berbicara tentang usability website, tentu
banyak hal yang harus diperhitungkan.
Seperti performance, security, responsive,
user friendly dari website tersebut. Salah
satunya yaitu Permasalahan waktu respon
yang lambat adalah permasalahan klasik
yang dihadapi oleh pengembang website di
dunia. Hal ini dibuktikan oleh beberapa data
dan penelitian sebelumnya, seperti data yang
dilansir oleh Akamai Technology (2016)
menunjukkan rata-rata kecepatan respon
aplikasi web yang masih berkisar di angka
5000 mdtk hingga 6000 mdtk pada aplikasi
di perangkat bergerak (Belson, 2016) [2].
Berdasarkan latar belakang tersebut,
perlu dilakukan penelitian untuk mengetahui
hasil dari perbandingan usability Web-
Native dan Progressive Web App agar dapat
memberikan bahan pertimbangan untuk
penerapan teknologi PWA dan juga agar
mengurangi permasalahan-permasalahan
yang dialami pengembang dan pengguna
aplikasi pada website serta dapat dijadikan
sebagai bahan referensi untuk para peneliti
dalam mengembangkan dan mendalami
PWA pada website [1].
II. TINJAUAN PUSTAKA
A. Progressive Web Apps
Progressive Web App (PWA) merupakan
kepanjangan dari Progressive Web App.
PWA sendiri adalah penggabungan antar
unsur Web dan App. Di tahun lalu, Google
mengadakan kampanye penggunaan PWA.
Disini Google berusaha menjembatani
antara kemudahan manajemen web
application dan kehandalan mobile
application yang biasa berjalan di system
operasi mobile, yaitu Android dan iOS.
PWA sepenuhnya mengandalkan
browser pengguna dan teknologi yang ada
didalamnya. Sampai saat studi ini ditulis,
sudah ada 73,61% dari seluruh browser di
seluruh dunia yang mendukung fitur service
worker, seperti Mozilla Firefox, Google
Chrome, Chrome for Android dan Opera,
sementara Edge dan Safari belum
mendukung fitur ini.
B. Instan Loading
Progressive Web App sudah
menggunakan service worker dengan cukup
baik, jadi website ini mampu loading dalam
keadaan offline sekalipun. Teknologi
service worker memiliki kemampuan untuk
dapat mengontrol asset yang akan dicache.
Teknologi ini juga menyediakan custome
permintaan jaringan sehingga dapat
memberikan layanan meski dalam keadaan
offline. Namun untuk dapat menggunakan
aplikasi ini tetap harus mengakses website
terlebih dahulu. Setelah program cache
terbaca maka selanjutnya tetap dapat
menikmati layanan meski dalam keadaan
offline sekalipun.
C. Add To Homescren
Progressive Web App ini sebuah apliksi
native karena dapat menambahkan icon
aplikasi pada home screen layar utama. Kita
dapat mengakses PWA ini dengan mudah
dan cepat. Tidak peduli dengan kelancaran
jaringan yang pelan atau cepat. Semua
aktivitas terbaru dari situs tersebut tetap
dapat dinikmati dengan cara yang
menyenangkan. Selain itu, Kita masih dapat
melihat notifikasi sekaligus mengatur tanpa
harus masuk lagi melalui adreest bar lagi.
Kita juga tidak perlu memasukkan URL
sudah dapat membuka dan melebarkan
aplikasi dengan mudah. Pastikan bahwa Kita
sudah lebih dahulu masuk secara hybrid,
kemudian PWA tinggal merekam dan
memasukkan beragam data yang sudah ada.
D. Fast
Adanya PWA dapat membuat pengguna
semakin mudah dalam menggunakan
aplikasi ini. Jadi sebuah situs tidak lagi
mengandalkan jaringan sebagai modal
utamanya, sehingga tinggal menentukan isi
konten yang jelas dalam memberikan
informasi dan berani dalam memberikan
wacana baru yang menarik.
Meski sudah banyak aplikasi yang sesuai
dengan standar mobile, bisa di bilang PWA
belum stabil, sehingga sebagai pengguna ,
kita harus memperhatikan agar aplikasi
dapat berjalan dengan baik.
E. Secure
Dalam segi keamanan, PWA
mengharuskan pemilik situs menggunakan
protocol HTTPS. Protocol ini menyandikan
data sesi menggunakan SSL (secure Soket
Layer) atau TLS (Transport Layer Security).
Adanya 2 protocol ini membuat data server
dan pengguna aman dari pensuyup dan
mencegah penyusupan dari gangguan
komunikasi antara website.
F. Responsive
Google sangat mendukung responsive ini
dengan cukup baik. Di era yang semakin
canggih ini banyak pengguna yang bergeser
menggunakan destop ke aplikasi mobile.
Sebuah PWA sangat responsive terhadap
beberapa aplikasi baik berupa smartphone,
mobile, desktop maupun tablet. Dengan
penggunaan PWA ini, dapat dikatakan
hemat kuota dan juga dapat melayani
pembaca dengan sangat baik.
G. Service Worker
Service worker adalah salah satu jenis
dari web worker, yaitu script yang berjalan
di belakang browser pengguna. Service
worker pada dasarnya adalah berkas
JavaScript yang berjalan pada thread yang
berbeda dengan main thread browser,
menangani network request, caching,
mengembali-kan resource dari cache, dan
bisa mengirimkan push message. Aset web
dapat disimpan sebagai cache lokal,
sehingga dengan jaringan internet yang
kurang memadai pun, pengguna tetap
mendapat pengalaman yang baik. Aplikasi
dapat tetap menjalankan halaman web yang
sudah di-cache atau memberikan status
koneksi tanpa browser menampilkan tulisan
eror karena ketiadaan koneksi internet.
Untuk memasang service worker ke laman,
kita butuh meregistrasinya dengan
menggunakan JavaScript yang ada di
halaman web. Setelah diregistrasi, browser
akan memulai tahap install service worker di
latar. Setelah aktif, service worker akan
menangani semua halaman di bawah scope
dimana service worker di-install, lalu akan
ada 2 kemungkinan state: terminated untuk
menghemat memori, atau menangani fetch
ketika ada network request dari halaman
web.
Web Native adalah web biasa yang
dimana berkas yang ditulis sebagai berkas
teks biasaya (plain text), yang diatur dan
dikombinasikan sedemikian rupa dengan
instruksi – instruksi berbasis HTML atau
pun XHTML, yang kadang – kadang juga
turut disisipi dengan berbagai macam bahasa
skrip. Berkas web ini nantinya akan
diterjemahkan oleh mesin browser dan
ditampilkan menjadi sebuah halaman / situs
web yang biasa kita lihat.
H. Situs Web Statis
Situs web statis merupakan jenis
situs web yang isinya tidak diperbaharui
secara berkala. Situs web model ini biasanya
dimiliki oleh perusahaan – perusahaan yang
hanya menggunakan situs web sebagai
media informasi perusahaan saja (seperti
situs milik perusahaan penerbangan, situs
milik perusahaan perkebunan, dan situs –
situs lainnya).
I. Situs Web Dinamis
Berbeda dengan situs web statis
yang isinya tidak diperbaharui secara
berkala, isi situs web dinamis biasanya
selalu up date dan diperbaharui secara
berkala (atau bahkan terjadwal) oleh
pengelola atau pun pemilik situs web. Model
situs web ini biasanya banyak digunakan
oleh perusahaan atau pun perorangan yang
memang mengandalkan seluruh aktivitas
bisnis mereka dari dunia internet. Beberapa
contoh situs ini adalah situs portal berita,
blog, dan situs – situs lainnya.
J. Situs Web Interaktif
Situs web interaktif pada dasarnya
hampir sama dengan situs web dinamis.
Bedanya, jika situs web dinamis isinya
diupdate atau pun diperbaharui oleh
pengelola, situs web interaktif biasanya
diperbarui oleh pengguna situs web tersebut.
Beberapa contoh situs web interaktif yaitu
situs atau pun media jejaring sosial, situs
portal blogging, dan situs – situs lainnya.
III. METODOLOGI
Metodologi merupakan tahapan-tahapan
yang digunakan untuk memperoleh
kebenaran dalam menyelesaikan penelitian
ini. Tahapan-tahapanya terdiri dari studi
literatur pada langkah-langkah yang
digunakan untuk mengumpulkan dan
mempelajari literatur dari beberapa bidang
ilmu yang saling terkait dalam penelitian ini,
seperti :
3.1 Analisis Kebutuhan
Analisis kebutuhan sebagai persiapan
dalam menyiapkan bahan-bahan yang di
perlukan ketika melakukan penelitian ini.
3.2 Rancangan Objek Kajian
Membahas bagaimana kecepatan load
data website, responsibility pada platform,
keamanan data pengguna dan user friendly
ketika peralih platform desktop ke mobile
dan sebaliknya.
3.3 Pengujian
Metode yang dilakukan peneliti untuk
mendapatkan data-data yang nantinya akan
digunakan untuk melihat performa dari
website yang di uji.
3.4 Analisis Hasil Pengujian
Membahas mengenai hasil dan analisis
dari hasil pengujian sesuai dengan
rancangan objek kajian pada penelitian ini.
3.5 Kesimpulan
Berisikan kesimpulan serta saran yang
didapatkan dari hasil penelitian ini.
IV. PEMBAHASAN
4.1.Analisis Kebutuhan
a. Perangkat Lunak
Pada penelitian ini membutuhkan total
dua perangkat lunak pada perangkat
komputer dan perangkat bergerak (mobile).
Pada perangkat komputer dan perangkat
bergerak masing-masing membutuhkan
Google Chrome sebagai aplikasi untuk
melihat data-data hasil pengujian dan
sebagai peramban pada perangkat
bergerak.
b. Perangkat Keras
Pada penelitian ini membutuhkan total
dua perangkat keras, yaitu komputer yang
digunakan untuk melihat data-data hasil
pengujian dan telpon genggam pintar
(smartphone) sebagai perangkat bergerak.
c. Lingkungan Pengujian
Pada penelitian ini membutuhkan
beberapa konfigurasi pada lingkungan
pengujian. Konfigurasi tersebut berupa
status koneksi jaringan yaitu terhubung
(online) dan kecepatan akses yaitu minimal
5.9 Mbps. Status koneksi jaringan
dibutuhkan untuk menentukan kondisi
hubungan peramban dengan perangkat
bergerak, maupun komputer. Kecepatan
akses dibutuhkan untuk menentukan
seberapa cepat akses jaringan. Status
koneksi jaringan online dipilih agar berkas-
berkas dapat diterima oleh perangkat baik
pada Progressive Web Apps maupun Web
Native. Kecepatan akses 5.9 Mbps yang
merupakan kecepatan rata-rata akses
Internet di Indonesia (Belson, 2016),
dikarenakan apabila kecepatan akses
adalah kecepatan akses yang disediakan
peramban, maka kecepatan akses akan
 terlalu cepat sehingga akan menyulitkan
dalam menganalisis dan melihat
perbandingan dari dua tipe aplikasi yang
diuji.
4.2.Rancangan Objek Kajian
Perancangan struktur berkas aplikasi
dilakukan pada masing-masing aplikasi.
Terdapat dua unsur performance pada
masing-masing aplikasi yang akan diuji, yaitu
page speed dan yslow, serta terdapat tiga
Adapun antarmuka halaman pada aplikasi dapat dilihat dalam Gambar 1.
Gambar 1. Antarmuka halaman
PWA
4.3. Pengujian
a. Variabel Pengujian
Terdapat dua variabel pengujian pada
penelitian ini, yaitu tipe aplikasi dan performa
aplikasi. Variabel-variabel ini akan digunakan
sebagai acuan dalam membuat skenario
pengujian
1. Tipe Aplikasi: Progressive Web Apps,
Web Native.
2. Performa Aplikasi: page speed, yslow,
fully loaded time, total page site, dan
requests.
b. Skenario Pengujian
Skenario dalam penelitian ini yakni
dengan menggunakan variabel pengujian
berupa performa aplikasi (page speed,
yslow, fully loaded time, total page site,
dan requests).
unsur yang akan diuji pada page masing-
masing web antara lain fully loaded time, total
page site, dan requests. Penentuan
Performance dan Page Detail Web
berdasarkan pada pengujian yang dilakukan
dengan menggunakan GTMetrix.
GTMetrix dapat digunakan untuk
mengetahui performa website dari segi
kecepatan loading. Selain itu, GTMetrix juga
berguna dalam melakukan pemantauan
performa website.
Web-Native
V. ANA LISIS
Setelah dilakukannya pengujian, data-data
yang didapat dari hasil pengujian dijabarkan
sesuai dengan skenario pengujian yang
dilakukan. Disini peneliti menggunakan 3
satuan nilai pada hasil pengujian penelitian
ini, yaitu persen (%), secon (s) dan satuan
ukuran berkas yang dijabarkan dalam
MegaBytes (MB). Selain itu juga terdapat
beberapa nama variable pengujian dan
singkatannya yang digunakan dalam table
hasil pengujian, yaitu JW untuk Jenis Web,
PS untuk Page Speed, YS untuk YSlow
Score. FLT untuk Fully Loaded Time, TPS
untuk Total Page Site, dan R untuk Requests.
5.1. Hasil Pengujian Skenario
Hasil pengujian skenario yaitu berupa
pengujian pada performance masing-
masing web yang dijabarkan pada tabel 1.
Tabel 1. Hasil Performance dari Masing-Masing Web.

JW PS YS FLT TPS R

WEB 31% 56% 7.5s 4.13MB 433

NATIVE
PWA 79% 63% 10.2s 3.25MB 203

5.2.Analisis Hasil Pengujian

Gambar 2. Hasil Performance pada Web Native
 Gambar 3. Hasil Performance pada PWA
a. Analisis Performance
Pada hasil pengujian skenario
1, pada kolom Page Speed
menunjukkan bahwa pada Web
Native untuk kecepatan mengakses
halaman lebih lambat daripada PWA.
Dimana pada Web Native memiliki
score sebesar 31% dan PWA
memiliki score yang lebih besar
yakni 79%.
Sedangkan, pada kolom
YSlow menunjukkan bahwa Web
Native memiliki score yang lebih
rendah dibandingkan dengan PWA.
Dimana pada Web Native memiliki
Yslow Score sebesar 56% dan PWA
memiliki score sebesar 63%.
Dengan demikian, dari hasil
analisis Performance antara
keduanya, PWA lebih unggul dalam
hal Performance dibandingkan
dengan Web Native.
b. Analisis Page Details
Pada pengujian skenario 1, pada
kolom Fully Loaded Time
menunjukkan bahwa Web Native
memiliki score yang lebih kecil
dibandingkan dengan PWA yakni 7.5
detik, sedangkan pada PWA selama
10.2 detik. Sehingga untuk Fully
Loaded Time Web Native lebih cepat
jika dibandingkan dengan PWA.
Pada pengujian skenario 1 di
kolom Total Page Size diketahui
bahwa Web Native (tribunnews.com)
memiliki size yang lebih besar yakni
4,13 MB dibandingkan dengan PWA
(jalantikus.com) yang memiliki size
sebesar 3,25 MB. Hal ini disebabkan
karena memang dari web
www.tribunnews.com memiliki
media yang lebih banyak pada
website-nya daripada
www.jalantikus.com.
Sedangkan, pada kolom Requests
pada web www.tribunnews.com
memiliki jumlah request yang lebih
banyak dibandingkan dengan web
www.jalantikus.com yakni sebesar
433 request dan 203 request pada web
www.jalantikus.com .
VI. KESIMPULAN
Berdasarkan penelitian yang dilakukan,
dapat disimpulkan beberapa hal sebagai
berikut :
1. Performa terkait Page Speed
menyesuaikan dengan ukuran
berkas yang digunakan serta
jumlah permintaan (requests)
terhadap setiap halaman website.
Ukuran berkas sebesar 4,13 MB
pada web-native dan 3,25 MB
pada PWA membuat PWA lebih
unggul dikarenakan jumlah
berkas yang lebih sedikit. Akan
tetapi, meskipun memiliki selisih
yang kecil web-native memiliki
Page Speed yang kalah jauh
dibandingkan dengan PWA.
2. Performa terkait YSlow pada
PWA lebih unggul dibandingkan
dengan web-native. Meskipun
web-native memiliki fully loaded
system yang lebih cepat
dibandingkan dengan PWA,
ternyata hal ini tidak berpengaruh
signifikan terhadap performa
YSlow pada web-native.
Teknologi Informasi dan Ilmu
Komputer, Vol. 2, No. 10, Oktober
2018, hlm. 3483-3491.
[3] Laurensius Adi, Rizky Januar Akbar,
Wijayanti Nurul Khotimah, “Platform
E-Learning untuk Pembelajaran
Pemrograman Web Menggunakan
Konsep Progressive Web Apps”,
JURNAL TEKNIK ITS Vol. 6, No. 2
(2017), 2337-3520 (2301-928X Print).
[4] Andreas Biørn-Hansen, Tim A.
Majchrzak and Tor-Morten Grønli,
“Progressive Web Apps: The Possible
Web-native Unifier for Mobile
Development”, In Proceedings of the
13th International Conference on Web
Information and Systems.
[5] Technologies (WEBIST 2017), pages
344-351 ISBN: 978-989-758-246-2.
[6] Hasan Basri, Nurmalasari, Medianto
Jaelani, “Web Progresif Sistem
Informasi Pelelangan Produk Online
pada PT Nusantara Sarana Outlet
Jakarta”, Jurnal Penelitian Ilmu
Komputer, System Embedded &
Logic, p-ISSN: 2303-3304, e-ISSN:
2620-3553 6 (1): 21 - 28 (Maret 2018).

DAFTAR PUSTAKA
[1] Awal Kurniawan, Intan Sari Areni,
Andani Achmad, “Implementasi
Progressive Web Application pada
Sistem Monitoring Keluhan Sampah
Kota Makassar”, Jurnal JPE, Vol.21,
No.02, Bulan November, Tahun 2017.
[2] Muhammad Rasyid Ridho, Aryo
Pinandito, Ratih Kartika Dewi,
“Perbandingan Performa Progressive
Web Apps dan Mobile Web Terkait
Waktu Respon, Penggunaan Memori
dan Penggunaan Media
Penyimpanan”, Jurnal Pengembangan