Sunday, June 26, 2016

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:

Share this

1 Response to "Progressive Web Apps - Instant Loading"