Vol. 12 No. 1, pISSN: 2303-0577 eISSN: 2830-7062
http://dx.doi.org/10.23960/jitet.v12i1.3904

## IMPLEMENTASI  PROGRESSIVE  WEB  APPS  (PWA) UNTUK  MENINGKATKAN  KINERJA  DAN  PERFORMA SITUS MARITIMEPRENEUR
Nyayu Maharani Adelin 1 , Meizano Ardhi Muhammad 1 , Puput Budi Wintoro 1 , Kaisar Akhir 2,3
1 Teknik Informatika, Universitas Lampung, Jl. Prof. Soemantri Brojonegoro, Bandar Lampung 35145
2 Departemen Manajemen STIE Indonesia Jakarta, Jl. Pratekan No. 9A, Jakarta Timur 13220
3 PT Mahakarya Maritim Indonesia, Jl. Pratekan No. 9A, Jakarta Timur 13220

## Riwayat artikel:
Received: 29 November 2022 Accepted: 29 Desember  2023 Published: 1 Januari  2024

## Keywords:
Progressive Web App; Maritimepreneur; RAD; Performa;
Corespondent Email: nyayuadelin@gmail.com
Abstrak. Maritimepreneur,  penyedia  jasa  di  industri  maritim,  menghadapi persaingan  ketat  dan  harapan  pengguna  yang  semakin  tinggi  terhadap pengalaman mereka. Untuk meningkatkan kualitas layanan,
Maritimepreneur.com perlu peningkatan performa. Implementasi Progressive Web  Applications  (PWA)  memakan  waktu  selama  60  hari,  dengan  metode Rapid Application Development dan 3 iterasi. Hasilnya menunjukkan PWA berhasil  meningkatkan  performa  website  sebesar  39%,  mengurangi  waktu pemuatan  dari  12  detik  menjadi  2  detik.  Meskipun  ada  penurunan  pada aksesibilitas  dan  SEO,  peningkatan  skor  praktik  terbaik  sebesar  3% menunjukkan  perbaikan  secara  keseluruhan.  PWA  menggabungkan keunggulan website dan aplikasi mobile, memberikan pengalaman pengguna yang lebih baik melalui performa cepat, responsif, dan fitur-fitur seperti dapat diunduh,  akses  offline,  serta  notifikasi.  Dengan  implementasi  PWA, Maritimepreneur berhasil mencapai efisiensi dan kecepatan yang signifikan, memberikan pengalaman pengguna yang unggul.
Abstract. Maritimepreneur, a maritime industry service provider, faces fierce competition  and  increasing  user  expectations.  To  improve  service  quality, Maritimepreneur.com  needed  performance  enhancements.  Progressive  Web Applications  (PWAs)  were  integrated  in  a  60-day  study  using  Rapid Application Development with 3 iterations. Results show a remarkable 39% improvement  in  website  performance,  reducing  loading  time  from  12  to  2 seconds. Despite a minor decline in accessibility and SEO, a 3% rise in best practice  scores  indicates  overall  enhancement.  PWAs  merge  website  and mobile  app  strengths,  providing  users  a  superior  experience  with  rapid performance,  responsiveness,  and  features  like  downloadability,  offline access,  and  notifications.  Through  PWA  implementation,  Maritimepreneur achieves  notable  efficiency  and  speed  gains,  ensuring  an  exceptional  user experience.

## 1. PENDAHULUAN
Pengaruh  fundamental  teknologi  informasi telah  mengubah  paradigma  komunikasi  dan interaksi masyarakat dengan dunia luar. Inovasi dalam teknologi informasi, khususnya di bidang komunikasi  dan  media,  secara  signifikan memengaruhi  cara  masyarakat  memperoleh informasi, berinteraksi, dan mengelola
hubungan  sosial.  Media  sosial  menjadi  alat strategis dalam pengembangan merek, komunikasi,  dan  pemasaran,  digunakan  oleh perusahaan dan pemerintah.[1]
Maritimepreneur,  sebagai  penyedia  jasa  di industri  maritim,  memanfaatkan  teknologi melalui  website  Maritimepreneur.com.  Terjadi
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
pergeseran  signifikan  menuju  penggunaan perangkat  mobile  dan  akses  internet  cepat, mendorong kebutuhan akan pengalaman pengguna  yang  lebih  baik. Progressive  Web Applications (PWA)  muncul  sebagai  solusi menggabungkan  keunggulan  website  dan aplikasi  mobile,  menawarkan  performa  cepat, responsif, dan fitur akses offline .[2]
Melalui  studi  kasus  pada  Alibaba  Group, implementasi PWA pada
AliExpress menunjukkan peningkatan konversi, kunjungan halaman,  dan  waktu  yang  dihabiskan.  Dalam konteks Maritimepreneur.com, penerapan PWA berpotensi meningkatkan retensi pengguna,  durasi  kunjungan,  dan  memberikan akses offline.[3]
Dalam  menghadapi  persaingan  ketat  dan harapan pengguna
yang
tinggi,
Maritimepreneur  perlu  mempertimbangkan penerapan  teknologi  terkini.  Oleh  karena  itu, penelitian  ini  bertujuan  untuk  melakukan  gap analysis  terkait  penerapan  PWA  pada  website Maritimepreneur.com. Dengan mengeksplorasi potensi  dampak  positif  PWA,  penelitian  ini bertujuan  memberikan  wawasan  baru  untuk meningkatkan  kinerja  dan  performa  website dalam mendukung pertumbuhan industri maritim.

## 2. TINJAUAN PUSTAKA
2.1 Progressive Web Apps Progressive Web Apps (PWA)
merupakan  aplikasi  web  yang  menggunakan teknologi  API  terkini  untuk  memberikan fungsionalitas, ketergantungan, dan kemudahan pemasangan yang superior. PWA memungkinkan  akses  universal,  tanpa  terbatas oleh  lokasi  atau  perangkat, melalui  basis  kode tunggal. PWA dirancang agar pengembang web dapat  mengubah  situs  web  yang  sudah  ada menjadi  pengalaman  serupa  aplikasi  mobile tanpa  memerlukan  penambahan  program khusus.  Keunggulan  PWA  mencakup  akses offline ,  pemasangan  pada homescreen mirip aplikasi  asli,  sinkronisasi  data  ke  server, pengiriman push  notification ,  dan  berbagai kemampuan lainnya.[4][5]

## 2.2 Maritimepreneur
Maritimepreneur,  didirikan  oleh  PT Mahakarya  Maritim  Indonesia,  bertujuan mengembangkan  sumber  daya  alam  dan industri  kelautan  melalui  teknologi  digital, acara,  konsultasi,  pendidikan,  dan  pelatihan. Merek  dagang  ini  terdaftar  di Direktorat
Jenderal Kekayaan Intelektual Republik Indonesia. Melalui situs web
Maritimepreneur.com  yang  berperan  sebagai sumber  informasi  dan  platform  interaktif  bagi pelaku industri maritim. Layanan
Maritimepreneur  melibatkan  sertifikasi  untuk pengelolaan  sumber  daya  yang  berkelanjutan, strategi  teknologi  digital,  penyelenggaraan acara,  konsultasi  bisnis,  serta  pendidikan  dan pelatihan  yang  mencakup  kepemimpinan  dan keterampilan teknis. Maritimepreneur berkomitmen  untuk  mendukung  pembangunan bangsa dan menjaga kelestarian laut.[6]

## 2.3 Web App Manifest
Web  App  Manifest adalah  dokumen JSON  yang  sederhana  dan  mengatur  tampilan serta  eksekusi  aplikasi  oleh  pengguna.  File manifest  ini  umumnya  dinamai  manifest.json dan  diinterpretasikan  oleh  browser  saat pengguna  membuka  aplikasi  di  dalamnya. Selanjutnya,  browser  akan  mengambil  semua sumber  daya  yang  dibutuhkan,  menampilkan konten, dan melaksanakan proses lainnya . [4]

## 2.4 Service Worker
Script yang  berbeda  dari  script  lain  di halaman  web  browser  disebut service  worker . Service  Worker pada  dasarnya  berfungsi sebagai  server  proxy  yang  menghubungkan aplikasi  web,  peramban,  dan,  jika  tersedia, jaringan.  Dengan  bantuan service  worker , konten  tetap  dapat  ditampilkan  bahkan  saat jaringan offline ,  karena service  worker mencegah  permintaan  jaringan,  mengambil tindakan  yang  sesuai  dengan  ketersediaan jaringan, dan memperbarui aset server.[7]

## 2.5 Ghost
Ghost  adalah  sistem  manajemen  konten (CMS) open-source yang dibuat untuk memenuhi  kebutuhan  penulis  dan  penerbit untuk  membuat  dan  mengelola  konten  dengan mudah.[8]
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062

## 2.6 OneSignal
OneSignal  memungkinkan  pengembang dan  pemilik  situs  web  untuk  menyediakan layanan  notifikasi push untuk  aplikasi  mobile dan situs web. Dengan platform ini, pengembang  dapat  mengirim  pemberitahuan push kepada pengguna di perangkat seluler dan desktop untuk berbagai tujuan, seperti mengingatkan  mereka  tentang  konten  baru, promosi,  pembaruan,  atau  pemberitahuan penting  lainnya.  Banyak  fitur  notifikasi didukung  oleh  OneSignal,  termasuk  notifikasi geolokasi,  pesan  disegmentasi,  dan  analitik notifikasi. OneSignal memberikan pengalaman pengguna  yang  lebih  interaktif  dalam  aplikasi dan situs web.[9]

## 2.7 Lighthouse
Lighthouse adalah alat open-source yang dikembangkan  oleh  Google  untuk  melakukan analisis dan evaluasi kualitas dan performa situs web.  Alat  ini  memberikan  laporan  terperinci tentang  berbagai  elemen  situs  web,  seperti kinerja, aksesibilitas, SEO, dan praktik terbaik. Lighthouse  dapat  digunakan  sebagai  ekstensi browser  atau  melalui  Chrome  DevTools.  Ini menggunakan metrik seperti performa, aksesibilitas,  praktik  terbaik,  SEO,  dan
Progressive Web Apps (PWA) untuk membantu pengembang web dan pemilik situs meningkatkan  pengalaman  pengguna  dan kinerja situs mereka.[10]

## 3. METODE PENELITIAN

## 3.1 Waktu dan Tempat Penelitian
Penelitian dilakukan pada bulan Agustus 2023  sampai  dengan  Desember  2023  yang bertempat  di  Maritim  Muda  Nusantara.  Pada table 1 menunjukkan agenda kegiatan penelitian yang dilakukan.
Tabel 1 Waktu Penelitian

## 3.2 Alat dan Bahan Penelitian
Alat  dan  bahan  yang  digunakan  pada penelitian ini adalah sebagai berikut.
Tabel 2 Alat dan Bahan Penelitian N o Alat / Bahan Deskipsi 1 Laptop Lenovo IdeaPad 130- 14IKB Notebook Perangkat keras yang digunakan selama penelitian. 2 Samsung Galaxy A50 Perangkat keras yang digunakan untuk pengujian. 3 Visual Studio Code Perangkat Lunak yang digunakan selama proses pengkodean penelitian. 4 Lighthouse by Google Tools yang digunakan untuk menguji performa dan kinerja website. 5 React.js Framework yang digunakan di penelitian. 6 Ghost.org Alat publikasi open-source yang digunakan sebagai database untuk halaman media. 7 OneSignal Sebagai platform untuk mengintegrasik an pemberitahuan push ke dalam website. 8 Jagoan Hosting Penyedia layanan web hosting yang
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
berguna untuk menyediakan infrastruktur teknis yang diperlukan untuk menjalankan website. 9 Artikel pada website https://maritimepreneur.ghost .io Sebagai sumber yang dipergunakan untuk halaman media dan notifikasi.

## 3.3 Tahapan Penelitian
Penelitian  ini  menggunakan  metodologi
SDLC Rapid Application Development (RAD) yang  meliputi Requirements  Planning,  User Design,  Construction, dan Cutover, kemudian selama  proses  penelitian  dilakukan  Penulisan Laporan.[11] Tahapan Penelitian menggunakan RAD ini disajikan dalam gambar berikut:[12]

## Gambar 1 Tahapan Penelitian

## 4. HASIL DAN PEMBAHASAN
4.1 Requirements Planning Tahapan ini dimulai
dengan mengidentifikasi masalah, langkah ini kemudian  menghasilkan  perencanaan  rinci tentang  apa  yang  akan  dibuat  dan  bagaimana kebutuhan  tersebut  akan  dipenuhi.  Tahap Requirements  Planning dilakukan  dengan  3 cara yaitu observasi, analisis perbandingan dan studi  literatur.  Hasil  dari  tahapan  ini  adalah sebagai berikut:
1. Pengguna  dari  website  ini  merupakan pelaku industri
maritim yang
membutuhkan  informasi  esklusif  dan akurat  mengenai  berita  bisnis  di  dunia maritim.
2. Pengguna  memerlukan  sebuah  situs website yang dapat diakses offline untuk bisa  membaca  berita  mengenai  industri maritim sekalipun tanpa jaringan internet.
3. Pengguna  memerlukan  berita  terbaru mengenai bisnis di dunia maritim.
4. Pengguna  memerlukan  situs  website yang  dapat  memberitahu  pengguna apabila  ada  berita  terbaru  mengenai bisnis di dunia maritim.
Didapati  pula  hasil  analisis  menggunakan Lighthouse yang menunjukkan bahwa performa website sebelum implementasi PWA menggunakan Lighthouse berada  pada  skor sebesar  58%,  hasil  evaluasi  ini  menunjukan bahwa performa pada website ini masih rendah (tidak baik) dan belum diterapkan PWA.

## Gambar 2 Performa Website Sebelum PWA

## 4.2 User Design
Pada tahap User Design didapatkan hasil sebagai berikut:
1. Arsitektur Three Tier
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Nyayu  dkk

## Gambar 3 Arsitektur Three tier
Gambar  3  menggambarkan  arsitektur Three- tier ,  terdiri  dari presentation-tier , application- tier ,  dan data-tier . Presentation-tier memiliki tiga user interface untuk akses melalui mobile, laptop,  dan  komputer,  diakses  melalui  web browser. Application-tier sebagai server  side mengontrol  pertukaran  data  antara client dan server melalui service worker , yang mengelola file  statis  dan  menyimpannya  dalam  cache browser  client . Data-tier berisi  basis  data  di database  server  dan static  resource di  cache browser  pengguna,  termasuk  judul  dan deskripsi berita dalam database server, serta file index, webmanifest, css, js, dan format gambar di static resource pada cache browser.

## 2. Arsitektur PWA

## Gambar 4 Arsitektur PWA
Pada  gambar  4, service  worker akan  pertama kali  mengecek  respons  jaringan;  jika  itu
berhasil,  data  akan  dikembalikan  ke  halaman web.  Jika  tidak, service  worker akan mengembalikannya dari cache.

## 4.3 Construction
Tahap  ini  fokus  pada  pembangunan aplikasi  berdasarkan  desain  yang  telah  dibuat pada  tahap  sebelumnya.  Gambar  berikut menunjukkan source code system.

## 1. Penambahan Halaman Media
Gambar 5 Source code Halaman Media
Gambar 6 Source Code Fetch API Halaman Media
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
Gambar 7 Source Code List Artikel Halaman Media

## Gambar 8 Source Code Detail Artikel Halaman Media

## 2. Implementasi Progressive Web App
Gambar 9 Source Code Web App Manifest
Gambar 10 Source Code Registrasi Service Worker
Gambar 11 Source Code Implementasi Service Worker
Gambar 12 Source Code Implementasi Cache API
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062 Nyayu  dkk
3. Penambahan Push Notification

## Gambar 13 Source Code Penambahan Push Notification

## 4.4 Cutover
Tahap terakhir adalah cutover , di mana aplikasi  yang  telah  dikonstruksi  dipindahkan dari  lingkungan  pengembangan  ke  lingkungan produksi.  Proses  ini  melibatkan  uji  coba  dan implementasi  sistem  secara  penuh . Pada gambar  menunjukan  hasil  dari  beberapa tampilan website yang telah selesai dikerjakan.

## 1. Halaman Media
Gambar 14 Tampilan Halaman Media

## 2. Install PWA ke Layar Utama

## Gambar 15 Tampilan Instalasi PWA ke Layar Utama

## 3. Icon Aplikasi di Layar Utama

## Gambar 16 Icon Aplikasi pada Layar Utama Android

## 4. Halaman Utama Maritimepreneur
Gambar 17 Tampilan Halaman Maitimepreneur pada Android
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
5. Push
Notification pada Maritimepreneur
Gambar 18 Tampilan Push Notification yang berhasil diterima

## 4.5 Lighthouse Testing
Pengujian kriteria PWA menggunakan Lighthouse didapatkan hasil seperti ditampilkan pada Tabel di bawah ini:
Tabel 3 Hasil Pengujian Baseline PWA Checklist N o. Variabel Sebelum Implement asi Setelah Implement asi Installable
1. Web app
manifest atau service worker memenuhi persyaratan instalasi aplikasi Tidak Terpenuhi Terpenuhi PWA Optimized
2. Mendaftarkan service worker yang mengontrol halaman dan start_url Tidak Terpenuhi Terpenuhi 3. Konfigurasi untuk layar pembuka khusus Terpenuhi Terpenuhi 4. Menyetel warna tema untuk kolom URL Terpenuhi Terpenuhi 5. Ukuran konten tepat untuk area pandang Tidak Terpenuhi Terpenuhi 6. Memiliki tag <meta name=”viewpo Terpenuhi Terpenuhi
rt”> dengan width atau initial-scale 7. Manifest memiliki maskable icon Tidak Terpenuhi Terpenuhi Pengujian Manual 8. Situs dapat berjalan lintas browser (Chrome, Edge, dan Safari) Terpenuhi Terpenuhi 9. Transisi halaman seperti tidak diblokir di jaringan Terpenuhi Terpenuhi 10 Setiap halaman memiliki URL Terpenuhi Terpenuhi
Sedangkan  untuk  hasil  pengujian  performa yang didapatkan menggunakan tools Lighthouse dapat dilihat pada gambar dibawah ini:

## Gambar 19 Hasil Pengujian Performa Website

## 4.6 Capaian Penelitian
Penelitian  ini  berlangsung  selama  60  hari dengan  total  3  iterasi  dan  pada  setiap  iterasi menunjukkan  perubahan  pada  website  yang dapat  dilihat  pada  grafik  dibawah  ini:

## Gambar 20 Grafik Pengingkatan Skor
5. KESIMPULAN
a. Website  Maritimepreneur  dikembangkan sebanyak 3 kali iterasi sehingga didapatkan halaman baru, diimplementasikan
Progressive Web Apps , dan diterapkan push notification .
b. Penerapan
PWA pada website Maritimepreneur  telah  berhasil  memenuhi semua kriteria PWA. Termasuk
kemampuan  untuk  diakses  melalui  layar
JITET (Jurnal Informatika dan Teknik Elektro Terapan) pISSN: 2303-0577   eISSN: 2830-7062
utama smartphone, berfungsi secara offline di  berbagai  peramban,  dan  meningkatkan performa  website  dibandingkan  sebelum penggunaan PWA.
c. Implementasi Progressive Web App (PWA) pada website Maritimepreneur
mengakibatkan peningkatan performa sebesar  39%,  membawa  situs  dari  58% sebelum implementasi PWA menjadi 97% setelah  implementasi  PWA.  Meskipun terdapat  penurunan  kecil  pada  matriks aksesibilitas  (-3%)  dan  SEO  (-1%), peningkatan  skor  praktik  terbaik  sebesar 3% (dari 83% menjadi 86%) menunjukkan perbaikan dalam aspek-aspek terkait praktik terbaik. Secara keseluruhan, dampak positif PWA terutama terlihat pada peningkatan  performa  dan  praktik  terbaik,
sementara pemantauan lebih lanjut diperlukan  untuk  memahami  implikasi perubahan pada aksesibilitas dan SEO.
d. Dengan  adanya  PWA  pada  website Maritimepreneur, waktu pemuatan website dipangkas  drastis  dari  12  detik  menjadi hanya  2  detik.  Peningkatan  tersebut mencerminkan  efektivitas  PWA  dalam meningkatkan kecepatan dan efisiensi situs, memberikan  pengalaman  pengguna  yang lebih baik.

## UCAPAN TERIMA KASIH
Penulis  mengucapkan  terima  kasih  kepada pihak-pihak  terkait  yang  telah  memberi dukungan terhadap penelitian ini.

## DAFTAR PUSTAKA
[1]  A. M. A. Saputra, L. P. I. Kharisma, A. A. Rizal, M. I. Burhan, and N. W. Purnawati, Teknologi  Informasi:  Peranan  TI  dalam Berbagai  Bidang .  Jambi:  PT.  Sonpedia
Publishing Indonesia, 2023.
[2]  J.  M.  Wargo, Learning  Progressive  Web Apps . Addison-Wesley Professional,
2020.
[3]  Chrome DevRel, “aliexpress study case,” 2016. Accessed: Aug. 31, 2023. [Online]. Available: https://web.dev/aliexpress/
[4]  C.  Love, Progressive  Web  Application Development  by  Example:  Develop  fast, reliable,  and  engaging  user  experiences for the web . Packt Publishing Ltd, 2018.
[5]  M.  Ardhi  Muhammad,  J.  Sumantri Brojonegoro  No,  and  B.  Lampung, “Mobile  Dictionary  Aksara  Lampung Berbasis Teknologi SPA (Single Webpage Application),” 2017.
[6]  PT. Mahakarya Maritim Indonesia, “Service:  Maritimepreneur.”  Accessed:
Sep.  01,  2023.  [Online].  Available: http://maritimepreneur.com/services
[7]  D.  Hume, Progressive  Web  Apps .  Simon and Schuster, 2017.
[8]  “Ghost:  About,”  Ghost.org.  Accessed: Oct.  25,  2023.  [Online].  Available: https://ghost.org/about/
[9]  L.  Safitri,  “Sistem  Informasi  Jadwal Pengiriman  Gas  LPG  Berbasis  Push Notification Android,” Bangkit Indonesia , vol. XI, no. 01, 2022.
[10]  “Documentation:  Lighthouse,”  Chrome Developers.  Accessed:  Aug.  26,  2023. [Online]. Available: https://developer.chrome.com/docs/lighth ouse/overview/
[11]  G.  Revanol,  W.  E.  Sulistyono,  H.  D. Septama,  Y.  Mulyani,  and  M.  Pratama, “Sistem  Informasi  Portal  Prodi  Modul
Pendaftaran Seminar Akademik di Jurusan Teknik Elektro Fakultas Teknik Universitas Lampung menggunakan metode  Rapid  Application  Development (RAD),” Jurnal  Informatika  dan  Teknik Elektro Terapan , vol. 11, no. 1, Jan. 2023, doi: 10.23960/jitet.v11i1.2864.
[12]  F. N. Hasanah and R. S. Untari, Buku Ajar Rekayasa Perangkat Lunak , vol. 1. 2020.