Audit WebAppsmu Dengan Lighthouse - Progressive Web Apps

Apa itu Lighthouse?

Lighthouse merupakan sebuah tools otomatis berbasis opensource yang berguna untuk improve qualitas webapps yang kita bangun. Untuk menjalankan Lighthouse ini, bisa menggunakan chrome extension ataupun dengan command tools based on node js. Langkahnya sangat mudah, tinggal berikan url yang akan di test, Lighthouse sendiri akan otomatis melakukan test performa dari webapps yang kita bangun.

Let's start

Persiapan yang kita lakukan adalah install tools lighthouse terlebih dahulu.

Lighthouse Chrome Extension

Yang perlu anda lakukan adalah install lighthouse extension di chrome di chrome webstore atau bisa juga melalui link ini Lighthouse. 

Cara Mudah Add To Home Screen WebApps - Progressive Web Apps

Add To Home Screen

Salah satu teknik progressive web apps atau dikenal dengan ama PWA adalah Add To Home Screen. Teknik ini memungkinan membuat logo icon di home screen android dan menjadikannya menyerupai applikasi native. So, apa yang harus di lakukan?

Siapkan Gambar

Siapkan gambar dengan ukuran 512x512 pixel. Yang nantinya akan di jadikan sebagai icon dan logo splash saat aplikasi di buka. Contohnya seperti ini:

Progressive Web Apps - Instant Loading

Apa Itu PWA?

PWA adalah kepanjangan dari Progressive Web App. Salah satu fitur yang di sematkan di beberapa browser menuju teknologi yang lebih tinggi lagi. Fitur ini bukan hanya sebatas responsive saja, melainkan lebih dari itu. Karena goal dari Progressive Web App adalah menggabungkan antara yang terbaik dari Web dan terbaik dari App untuk membuat Web App menjadi lebih seperti App dan tanpa harus install tetapi hanya butuh akses alamat pertamakali.

Instant Loading

Untuk kali ini yang akan di bawas fiturnya adalah Instant Loading. Instant loading adalah teknologin yang memanfaatkan service worker untuk melakukan proses caching dan menjadikan browser menjadi semacam proxy local. Sehingga untuk akses ke dua kali, bingkai tampilan akan di siapkan terlebih dahulu oleh service worker, sedangkan untuk content nya akan terupdate setelah browser mendapatkan data baru. Dan yang lebih menarik lagi dari PWA ini adalah konsep ini juga sudah bisa berjalan di cross platform dan beberapa browser sudah support. Salah satunya adalah browser safari. 

Cuplikan di bawah ini merupakan salah satu contoh instant loading yang sudah terpasang di web https://dyangalih.com. Browser safari pada kondisi sudah clear data dan history. Kemudian yang dilakukan adalah:

1. Buka browser safari
2. Buka Web https://dyangalih.com. First load akan terasa sangat berat karena harus download all content.
3. Buka detik.com 
4. Buka google.com
5. Matikan Network dengan cara setting flight mode gadget
6. Bersihkan all tab di safari
7. Buka google.com dan perhatikan
8. buka detik.com dan perhatikan
9. Buka https://dyangalih.com dan perhatikan. 

Dari ketiga web hanya https://dyangalih.com yang sudah ready untuk disajikan dengan sekejap. Karena web ini sudah di sematkan Fitur Instant Loading dengan memanfaatkan service workser yang ada di browser.

Untuk menggunakan fitur Instant Loading ini hanya perlu menambahkan beberapa script disitus yang ingin di pasang:

buat file javascript dengan code dibawah ini:

var dataCacheName = '[Chache_Name]-v1';
var cacheName = '[Chache_Name]-v1';
var PATH = '';
var filesToCache = [
   PATH + '/',
   PATH + '/index.html'
];
self.addEventListener( 'install', function( e ) {
   console.log( '[ServiceWorker] Install' );
   e.waitUntil( caches.open( cacheName ).then( function( cache ) {
      console.log( '[ServiceWorker] Caching app shell' );
      return cache.addAll( filesToCache );
   } ) );
} );
self.addEventListener( 'activate', function( e ) {
   console.log( '[ServiceWorker] Activate' );
   e.waitUntil( caches.keys().then( function( keyList ) {
      return Promise.all( keyList.map( function( key ) {
         if ( key !== cacheName ) {
            console.log( '[ServiceWorker] Removing old cache', key );
            return caches.delete( key );
         }
      } ) );
   } ) );
} );
self.addEventListener( 'fetch', function( e ) {
   console.log( '[ServiceWorker] Fetch', e.request.url );
   if ( e.request.url.indexOf( dataUrl ) === 0 ) {
      e.respondWith( fetch( e.request ).then( function( response ) {
         return caches.open( dataCacheName ).then( function( cache ) {
            cache.put( e.request.url, response.clone() );
            console.log( '[ServiceWorker] Fetched&Cached Data' );
            return response;
         } );
      } ) );
   } else {
      e.respondWith( caches.match( e.request ).then( function( response ) {
         return response || fetch( e.request );
      } ) );
   }
} );

Ganti parameter dataCacheName dan cacheName sesuai kebutuhan. Jika di perlukan, ganti atau tambah data di array ini filesToCache. Simpan file diatas dengan nama service-worker.js atau nama lain juga boleh. Dan letakkan di DocumentRoot web tersebut. Kemudian di main page tambahkan script ini untuk pemanggilannya.

     <script type="text/javascript">
         ( function() {
             if ( 'serviceWorker' in navigator ) {
                navigator.serviceWorker.register( './service-worker.js' ).then( function() {
                   console.log( 'Service Worker Registered' );
                } );
             }
          } )();
      </script>

And that's it. Done. Hanya kurang dari 5 menit, fitur instant loading sudah terpasang di web yang di inginkan. So, tertarik untuk mencoba? 

My Presentation - PWA

Untuk presentasi yang pernah saya share ke temen-temen di acara GDG Jogja bisa di kunjungi alamat ini:

https://slides.com/dyangalih/pwa-progressive-web-app/live#/