Membuat Aplikasi Web Blog WWWID PWA
Pada beberapa minggu yang lalu, saya belajar untuk mengenal framework VueJS dari sebuah latihan online di Youtube. Kemudian setelah mengenal VueJS pada bagian dasar-dasarnya, saya mencoba belajar membuat sebuah situs sederhana dengan menggunakan VueJS . Kebetulan ada tantangan untuk membuat situs dengan Progressive Web App dari blog Medium WWWID yang dibuat oleh Om Yohan Totting. Detail tentang tantangannya dapat dilihat di bawah ini.
Di dalam tantangan tersebut, kita diharuskan membuat sebuah aplikasi web yang bersifat Progressive Web App dengan Service Worker, yang dapat memuat halaman dengan data berita dalam waktu kurang dari 5 detik. Data berita yang digunakan adalah data RSS dari blog Medium WWWID itu sendiri, yang sudah berbentuk JSON . Di dalam tantangan itu juga kita dibebaskan untuk memakai library atau framework front end apapun, selama bisa digunakan untuk Progressive Web App dan dipasang Service Worker.
Membuat Aplikasi Web PWA
Untuk pembuatan aplikasi web WWWID ini, saya memilih menggunakan framework Vue.JS untuk mengatur logika JavaScript di Single Page Application (SPA). Pemilihan Vue.js ini juga untuk membiasakan penggunaan framework agar lebih mengenal fungsi-fungsinya lebih lanjut. Jadi jangan heran jika kode sumber aplikasi web WWWID yang saya bagikan nanti, akan ditemui beberapa perulangan dalam penulisan fungsi JavaScript.
Kerangka aplikasi web juga digenerasikan dengan menggunakan Vue CLI dengan AirBnB ESLint , sehingga menjadi lebih terstruktur, dan sistem pembanguannya sudah dibuatkan oleh Vue CLI dengan menggunakan Webpack. Vue CLI yang dipakai juga masih versi 2.x.x , bukan Vue CLI versi 3 yang saat artikel ini ditulis, sedang status Beta.
Tampilan responsive yang nyaman dilihat di layar smartphone untuk aplikasi web PWA tentu sudah suatu kewajiban. Sebab aplikasi PWA sendiri akan berlaku seperti aplikasi native di smartphone jika dibuat pintasannya melalui browser Chrome. Karena saya kurang begitu paham mengenai CSS yang tepat untuk tampilan web responsive ini, maka saya memilih menggunakan framework CSS saja. Framework CSS yang saya pilih yaitu Semantic UI .
Aplikasi web yang telah dibuat, kemudian akan di taruh ke tempat hosting yang bernama Firebase Hosting , yang cukup mudah digunakan untuk menaruh aplikasi web yang menggunakan sistem SPA.
Dalam pembuatan aplikasi web ini, digunakan Text Editor yang ringan dan bagus yaitu Visual Studio Code. Ekstensi yang saya pasang untuk membuat programming Vue ini nyaman adalah Vetur, Vue Snippets, dan ESLint.
Aplikasi Web WWWID Sudah Selesai Dibuat, Tapi Ada Masalah…
Setelah aplikasi web tersebut selesai dibuat, ditemui beberapa masalah dalam hal melakukan optimasi. Yang pertama adalah proses memuat gambar di halaman daftar artikelnya tidak bersifat asinkronus, tapi bersifat sinkronus. Gambar dimuat bersamaan dengan memuat dokumen dan aset-aset JavaScript lainnya. Ini membuat halaman awal ketika pertama kali dibuka menjadi lama sekali menampilkan layar kosong berwarna putih, menunggu gambar-gambar di halaman utama selesai dimuat.
Saya mencoba mencari solusinya untuk membuat gambar dengan benar di Google, dan akhirnya menemukan teknik bernama “Lazy Loading Images” . Teknik lazy loading untuk gambar ini adalah teknik memuat gambar belakangan setelah semua document DOM HTML dan aset JavaScript serta CSS dari suatu halaman web telah selesai dimuat. Dari referensi situs Sitepoint ini, saya dapatkan beberapa library untuk memuat gambar secara malas, yang dapat meningkatkan performa memuat halaman web dengan signifikan.
Dari beberapa library lazy loading image di atas, saya menggunakan pilihan yang terakhir, yang menggunakan script JS dan CSS sederhana untuk memuat gambar belakangan. Yaitu “Lazy Loading with Blurred Image Effect” . Proses penggunaannya cukup simpel dan sederhana, dengan ukuran berkas library yang tidak terlalu besar.
Masalah Hasil Pembangunan yang Besar
Masalah ini muncul ketika saya mencoba membuat mode produksi dari aplikasi web yang telah dibuat. Beberapa berkas hasil pembangunan mode produksi terlihat cukup besar sekali. Diantaranya karena berkas CSS dan JavaScript dari library yang dipakai, dijadikan satu ke dalam berkas hasil pembangunan untuk ditaruh di server. Berkas ini rata-rata berukuran di atas 100 Kb , sehingga Vue CLI pun memberikan sebuah tanda peringatan berwarna kuning.
Ini tentu akan menjadi masalah jika halaman web dimuat dengan koneksi yang lambat, karena aset-aset yang dibutuhkan lumayan besar ukurannya.
Usut punya usut, saya coba cari di Google lagi, tentang teknik memuat aset-aset library yang bersifat statis ini. Dan kemudian mendapatkan teknik memuat aset-aset tersebut melalui Content Delivery Network (CDN) dengan cara async, defer, prefetch, dan preload.
Untuk library JavaScript seperti dari JQuery dan Semantic UI yang saling membutuhkan, memuatnya menggunakan metode defer dari CDN. Sedangkan untuk library CSS framework , saya menggunakan metode preload . Dengan metode-metode tersebut, proses pemuatan halaman menjadi lebih ringan, karena aset statis dari JavaScript dan CSS library dimuat tanpa memblokir proses parsing DOM HTML nya.
Untuk CDN yang dipakai, saya memilih menggunakan JSDelivr CDN ini.
Setelah semua aset statis tersebut dipindahkan ke CDN, beberapa fungsi import aset statis itu di bagian main.js dari project ini dijadikan bentuk komentar. Kemudian, lakukan proses pembangunan ulang mode produksi dengan Vue CLI, dan hasilnya berkas hasil pembangunan ulang ini tidak ada yang berukuran besar.
Proses pemuatan aset statis tersebut lalu dipindahkan ke bagian index.html dengan metode defer dan prefetch dibagian head dari HTML . Seperti yang terlihat di gambar di bawah ini.
Hasil pembangunan mode produksi ini lalu ditaruh ke Firebase Hosting untuk diuji coba performanya, dan hasilnya memang cukup bagus. Tidak lagi berat di awal karena aset statis yang disatukan dengan berkas, tetapi menjadi lebih ringan karena aset statis sudah ditaruh ke CDN.
Menambahkan Service Worker
Aplikasi web WWWID sudah selesai dibuat, namun berikutnya adalah tantangan menambahkan service worker untuk PWA ini ke dalam aplikasi webnya. Di dalam Vue sendiri sudah ada template dari Vue CLI untuk membuat aplikasi SPA dan PWA ini, dengan perintah :
“vue init pwa <nama project>”
Tapi karena project aplikasi web yang saya buat ini awalnya tidak menggunakan template PWA dari Vue, tapi menggunakan template Webpack, maka saya mesti mencari cara untuk menambahkan service workernya. Di grup Telegram PWA Indonesia (https://t.me/wwwid_pwa), saya mendapat referensi agar menggunakan Workbox saja untuk menambahkan PWA ke aplikasi web yang sudah ada.
Ada banyak cara menambahkan service worker dengan Workbox ini, bisa dengan menggunakan Workbox CLI, atau bisa menggunakan Build System Webpack dengan Workbox. Om Irfan Maulana juga sudah membuatkan sebuah repository Github yang berisi panduan lengkap tentang penggunaan Workbox untuk framework Angular, Vue, dan React , yang cukup bermanfaat untuk memahami penggunaan Workbox ini.
Mode Workbox yang saya pilih adalah menggunakan penggunaan Workbox dengan mode pembangun Webpack. Plugin Workbox yang dipakai adalah GenerateSW dengan setelan sederhana untuk menambahkan Service Worker dasar.
Plugin Workbox untuk Service Worker sudah ditambahkan, langkah berikutnya adalah tambahkan sebuah script singkat untuk pendaftaran penggunaan Service Worker yang ada di dalam peramban internet, pada bagian berkas index.html. Seperti yang ada di bawah ini.
Lalu kita lakukan proses pembangunan ulang mode produksi, dan hasilnya, service worker sudah otomatis ditambahkan ke dalam folder hasil /dist .
Selain service worker, ada juga hal yang perlu ditambahkan yaitu file Web Manifest dalam bentuk manifest.json . Fungsinya adalah agar aplikasi PWA ini dapat di “install” ke Home Screen dari smartphone Android, sehingga dapat berjalan seperti halnya aplikasi native Android. Pada project dengan framework VueJS ini, terutama yang dibuat dengan Vue CLI, saya menempatkan manifest.json ke dalam folder /static , sehingga dapat langsung dimuat dari index.html. Berkas manifest.json tadi lalu direferensikan di index.html seperti ini :
<link rel=”manifest” href=”./static/manifest.json”>
Beberapa referensi untuk membuat manifest.json ini dapat dilihat di bawah ini.
Beberapa hal dan masalah yang ditemui sepertinya sudah dapat diatasi, langkah berikutnya adalah mengunggah kembali hasil pembangunan produksi ke situs Firebase Hosting, agar aplikasi webnya dapat dicoba.
Unggah ke Firebase Hosting
Berkas-berkas hasil pembangun mode produksi tadi lalu diunggah ke Firebase Hosting dengan menggunakan Firebase CLI . Dokumentasinya sudah saya sertakan pada bagian awal artikel ini.
Proses unggah berhasil, selanjutnya lakukan pengecekan pada halaman web yang telah diunggah tadi, apakah ada aset atau kode yang gagal dimuat setelah diletakkan ke server produksi atau tidak. Setelah dipastikan tidak ditemukan kesalahan dan kegagalan, maka selanjutnya halaman aplikasi web tersebut dapat di tes dan dilakukan audit. Aplikasi web yang saya buat dapat dicek langsung dengan tautan di bawah ini. (https://id-pwablogs.firebaseapp.com)
Audit dengan LightHouse
Dengan menggunakan tools audit LightHouse yang ada di Chrome Developer Tools, dilakukan proses audit performa situs dan parameter yang lainnya.
Menurut hasil Audit LightHouse di atas, aplikasi web yang saya buat masih mengalami hal cukup rendah dalam hal Performa. Bisa dilihat dari skornya yang mendapat nilai 37 . Bisa jadi ini disebabkan oleh aset-aset gambar dari situs WWWID yang memang tidak dikompres menjadi ukuran lebih kecil atau dikonversi ke format WebP. Sedangkan untuk nilai dari PWA, Accessibility, Best Practices, dan SEO, mendapat skor yang baik dan lumayan. Perlu dicatat bahwa hasil audit ini bisa berubah-ubah sesuai waktu, tergantung dari performa server yang dipakai untuk hosting, dan juga versi browser Chrome yang dipakai.
Audit dengan Web Page Test
Audit ini menggunakan Web Page Test dengan mode Easy dan LightHouse Audit aktif. Situsnya dapat diakses di https://www.webpagetest.org . Hasil dari audit ini dapat dilihat di bawah ini.
Hasil audit ini cukup baik, dengan nilai F untuk masalah Cache Static Content, sedangkan untuk nilai yang lain, mendapat nilai A. Jika nilai F itu diklik, maka akan muncul keterangan “Leverage browser caching of static assets“ , yang mana perlu di setel di bagian server tempat hosting aplikasi web ini berada.
Uji Coba di Chrome Browser Android
Halaman aplikasi web yang telah dibuat perlu dicoba di browser Google Chrome di perangkat Android. Untuk mengetahui apakah progressive web app dan Add To Home Screen nya dapat berjalan atau tidak. Silahkan buka tautan https://id-pwablogs.firebaseapp.com ini dari browser Google Chrome di smartphone masing-masing. Hasilnya akan tampak seperti di bawah ini.
Sedangkan untuk tangkapan layar aplikasi web yang lainnya dapat dilihat di bawah ini.
Kode Sumber Aplikasi dan Lainnya
Demikianlah proses pembelajaran dalam membuat aplikasi web Single Page Application dengan mode Progressive Web App, menggunakan framework VueJS. Cukup menyenangkan mempelajari teknologi baru dalam hal web programming ini. Terima kasih juga untuk yang telah berbagi hal-hal baru seputar aplikasi web dengan metode PWA . Memang masih banyak yang perlu diperbaiki dibagian sana dan bagian sini, tapi akan menjadi hasil proses belajar yang bermanfaat jika tersedia kode sumber aplikasi webnya. Yang dapat kalian lihat dan garpu pada tautan di bawah ini :
