Seminggu lalu saya disibukkan oleh 2 Google events yaitu Progressive Web App Road Show Indonesia yang diadakan di 2 kota yaitu Jakarta dan Yogyakarta. Dan salah satu yang ingin saya highlight adalah kata progressive. Bahwa dalam Progressive Web App, kita bisa meningkatkan experience dari sebuah web app secara bertahap, tidak harus langsung sekaligus. Bahkan tidak perlu menulis ulang aplikasi web kita untuk menjadikannya Progressive Web App.

Sebagian besar developer yang saya kenal adalah backend developer yang berawal dari server side script seperti PHP, Ruby, Python, dan lainnya. Terutama PHP dengan WordPress yang merupakan CMS paling popular di Indonesia. Dan teman-teman ini hampir semuanya mengembangkan aplikasi tanpa menggunakan application shell sama sekali. Karena pattern application shell hanya populer di kalangan front end developer, karena mereka biasanya mengembangkan aplikasi web menggunakan pattern Single Page Application(SPA).

Jadi apa yang bisa dilakukan bila teman-teman hanya memiliki sebuah web dengan server rendered scripts? Kalian bisa memulai dengan service worker yang akan mempercepat navigasi antar halaman. Nah apakah service worker bisa diterapkan tanpa application shell? Jawabannya: Ya, bisa! Buktinya kalian bisa lihat hasil experiment di bawah ini.

Saya mencoba mensimulasikan sebuah server rendered website dengan 3 halaman html yaitu index.html, about.html, dan contact.html. Ketiganya adalah file html dengan struktur lengkap seperti <html>, <head>, dan <body> yang kita asumsikan adalah halaman hasil server rendered dari PHP, Python, atau lainnya. Di halaman web ini cuma title dari masing-masing halaman. &lt;!doctype html&gt;&lt;html lang=&#34;en&#34;&gt;&lt;head&gt;&lt;meta charset=&#34;utf-8&#34;&gt;&lt;title&gt;NON SPA - Service Worker&lt;/title&gt;&lt;meta name=&#34;description&#34; content=&#34;Testing service worker without application shell&#34;&gt;&lt;meta name=&#34;author&#34; content=&#34;Yohan Totting&#34;&gt;&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1&#34;&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&#34;menu&#34;&gt;&lt;a href=&#34;/index.html&#34;&gt;Home&lt;/a&gt; | &lt;a href=&#34;/about.html&#34;&gt;About&lt;/a&gt; | &lt;a href=&#34;/contact.html&#34;&gt;Contact&lt;/a&gt;&lt;/div&gt;&lt;div id=&#34;main-container&#34;&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;&lt;script&gt;if (&#39;serviceWorker&#39; in navigator) {window.addEventListener(&#39;load&#39;, function() {navigator.serviceWorker.register(&#39;/service-worker.js&#39;).then(function(registration) {// Registration was successfulconsole.log(&#39;ServiceWorker registration successful with scope: &#39;, registration.scope);}, function(err) {// registration failed :(console.log(&#39;ServiceWorker registration failed: &#39;, err);});});}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;

Tanpa mengubah apapun di halaman html tersebut hanya dengan melakukan injeksi script untuk service worker, kita bisa langsung melakukan cache untuk setiap halaman statis hanya dengan mendeklarasikan halaman yang ingin kita cache di script service worker kita. Kalian bisa mengecek apakah halaman dikembalikan dari service worker atau dari server menggunakan tab networks di Chrome Dev Tools dan hasilnya seperti di bawah ini.

image

File about.html didapatkan dari service worker

Setelah service worker terpasang, maka setiap request ke server dari web tersebut akan dicegat oleh service worker, dan kita bisa melakukan processing di mana di contoh ini hanya melakukan pengecekan di cache dan bila tersedia maka hasil dari cache akan dikembalikan langsung ke halaman web untuk ditampilkan. Kalian bisa melihat beda response time dengan atau tanpa service worker di bawah ini

image

Response time di simulasi slow 3G tanpa service worker

image

Response time di simulasi slow 3G dengan service worker

Membandingkan response time tanpa service worker yaitu 2 seconds dan dengan service worker yaitu 10 milliseconds di kondisi simulasi slow 3G menunjukkan perbedaan signifikan. Tapi memang kondisi tersebut hanya bisa kejadian bila halaman web diakses sekali agar service worker terpasang lalu kunjungan berikutnya akan jauh lebih cepat karena halaman dikembalikan dari cache, bukan dari server.

Lalu mungkin kalian bertanya, sama aja kalau butuh akses sekali dulu biar bisa service worker terpasang. Apa keuntungannya? Menurut saya ingin bergantung skenario kapan web kalian digunakan. Salah satunya adalah berpindah halaman lebih cepat karena semua sudah disimpan di cache pada saat kalian membuka halaman home. Sehingga kalian bisa berpindah ke halaman lain seperti about dan contact dengan cepat walaupun halaman tersebut belum pernah diakses, karena pada saat kalian mengakses home, halaman lainnya langsung disimpan di cache karena dideklarasikan di saat fase install service worker seperti yang kalian bisa lihat di bawah ini. //service-worker.jsvar CACHE_NAME = &#39;my-site-cache-v1&#39;;var urlsToCache = [&#39;/index.html&#39;,&#39;/about.html&#39;,&#39;/contact.html&#39;];self.addEventListener(&#39;install&#39;, function(event) {// Perform install stepsevent.waitUntil(caches.open(CACHE_NAME).then(function(cache) {console.log(&#39;Opened cache&#39;);return cache.addAll(urlsToCache);}));});

Contoh service worker di atas adalah contoh sederhana bagaimana melakukan cache semua file yang kita inginkan. Tapi sangat disarankan walaupun kita bisa memasukkan banyak file, tapi sebaiknya digunakan dengan bijaksana dengan hanya memasukkan file statis seperti JavaScript file, CSS file, atau aset gambar dan font karena kita tidak tahu perangkat yang digunakan oleh pengunjung kita memiliki spesifikasi seperti apa. Mungkin saja kapasitas penyimpanan terbatas, sehingga sebaiknya website kita juga tidak mengkonsumsi cache space dengan file yang tidak terlalu sering diakses.

Hasil experiment di atas menunjukkan bagaimana kalian bisa meningkatkan pengalaman pengguna di website kalian dimulai dengan kecepatan navigasi antar halaman. Dengan implementasi service worker, kalian bisa meningkatkan pengalaman secara progressive atau bertahap di kondisi jaringan yang lambat sekalipun. Lalu bagaimana bila jaringan sedang offline? Apakah server rendered scripts website bisa tetap diakses? Nantikan di experiment berikutnya.Source code experiment di atas bisa diakses di https://github.com/tyohan/pwa-experiments/tree/master/nonspa-sw.