Pengenalan Progressive Web Apps

Selamat malam,

Disini saya akan memperkenalkan suatu Teknologi yang diperkenalkan oleh google yaitu Progressive Web Apps (PWA).  Jadi apa itu PWA ? PWA adalah suatu teknik bagaimana Anda dapat mengakses dengan cepat pengalaman website dan aplikasi menjadi satu tanpa harus menginstall / memasang aplikasi tersebut. Sederhananya, PWA memungkinkan kita untuk bisa mengakses dengan cepat suatu aplikasi dengan tampilan mobile web pada perangkat smartphone. Aplikasi Web Progressif diharapkan mampu untuk mengatasi masalah tersebut. PWA adalah aplikasi web yang berjalan layaknya aplikasi native, notifikasi dan UX seperti aplikasi native.

           Berbeda dengan aplikasi hybrid, aplikasi hybrid lebih menggabungkan antara aplikasi native dan web. PWA ini sepenuhnya web namun pengguna bisa merasakan experience seperti menggunakan aplikasi native. Seperti bisa dijalankan offline atau koneksi buruk sekalipun, bisa mengirim notifikasi, bahkan menggunakan animasi yang smooth seperti aplikasi native. Aplikasinya pun tidak perlu diinstall, namun icon-nya bisa di pasang di home screen untuk memudahkan membuka aplikasi. PWA sepenuhnya mengandalkan browser. Saat ini hanya browser Chrome minimal versi 47 keatas yang mendukung.

Berbeda dengan aplikasi hybrid, aplikasi hybrid lebih banyak antara aplikasi native dan web. PWA ini bisa jadi web yang bisa merasakan pengalaman seperti menggunakan aplikasi native. Seperti bisa dijalankan offline atau koneksi buruk, bisa mengirim notifikasi, bahkan menggunakan animasi yang mulus seperti aplikasi native. Aplikasinya pun tidak perlu diinstall, namun icon-nya bisa di pasang di home screen untuk memudahkan membuka aplikasi. Browser PWA Lengkap. Saat ini hanya browser Chrome minimal versi 47 keatas yang mendukung.

Dengan konsep offline dulu dan web baru, aplikasi yang berjalan pada browser tidak akan memunculkan pesan kesalahan jaringan atau layar putih seperti yang selama ini terjadi kita alami ketika berada pada jaringan yang sangat buruk. Pada PWA, saat kita tahan browser, dan kembali lagi buka aplikasi itu pada jaringan buruk atau tanpa jaringan kita tidak akan kehilangan UI dan data-data terakhir.

Service Workers adalah teknologi dibalik PWA yang memberikan fungsionalitas offline, notifikasi, update konten, pergantian konektifitas dan lainnya. Memang belum banyak yang membahas tentang pekerja dan bagaimana sebenarnya petugas layanan itu diterapkan, bisa dikatakan service workers adalah semacam proxy yang berada ditengah antara aplikasi web, browser, dan jaringan, atau lebih sederhana lagi bisa dianalogikan aplikasi kita akan diatur oleh serviceworkers agar bisa berlajan offline terlebih dahulu, mengembalikan data dari cache jika request ke jaringan gagal.

File service workers sendiri kode javascript yang bisa dikembangkan oleh pengembang untuk menghandle event dan permintaan sesuai dengan kebutuhan. Oh ya, untuk serviceworker ini hanya bisa dijalankan di localhost dan HTTPS saja dan untuk post ServiceWorker, Anda perlu mengawali prosesnya dengan alamatnya di halaman Anda. Ini akan memberi tahu browser di mana file JavaScript service worker Anda berada.

Tapi sebelum itu kita harus mensetup terlebih dahulu untuk PWA dan ServiceWorkernya nya di direktori projectnya, seperti ini:

set PWA :

—ng new nama_project atau menggunakan project yang sudah ada dengan clone dari Git.

—npm install

—Build project (ng build –prod)

—Jalankan web browser (dari extension chrome)

—Jalankan lighthouse

seset ServiceWorker:

1. ng set apps.0.serviceWorker=true

2. npm install --save @angular/service-worker @angular/platform-server ng-pwa-tools

3. Build project (ng build –prod)

4. Restart web server

5. Jalankan lighthouse

untuk melihat apakah ServicerWorker sudah tersetup atau belum, buka file .angular-cli.json dan cari "  "serviceWorker": true , " jika sudah true maka ServiceWorker sudah tersetup. kemudian buat JavaScript untuk meregistrasi SreviceWorker .

Ini contoh file JavaScript untuk mendaftarkan ServiceWorker bisa juga diletakkan di index.html setelah body untuk melakukan Registrasi ini atau dibuat terpisah dan letakkan filenya di dalam foder dist:

if ('serviceWorker' in navigator) {

  window.addEventListener('load', function() {

    navigator.serviceWorker.register('/sw.js').then(function(registration) {

      // Registration was successful

      console.log('ServiceWorker registration successful with scope: ', registration.scope);

    }).catch(function(err) {

      // registration failed :(

      console.log('ServiceWorker registration failed: ', err);

    });

  });

}

Kode ini memeriksa untuk mengetahui apakah API service worker tersedia, dan jika tersedia, berarti service worker di /sw.js telah terdaftar setelah laman dimuat.

Anda bisa memanggil register() setiap kali laman dimuat tanpa masalah, browser akan mengetahui apakah service worker sudah terdaftar atau belum kemudian menangani dengan semestinya.

            Setelah di lakukan registrasi baru anda memasang File ServiceWorkernya dan letakkan didalam dist bersama dengan file registrasi ServiceWorkernya. Folder dist berisikan file yang akan di diambil oleh ServiceWorker untuk melakukan pereload an ketika localhost offline.

Setelah laman terkontrol memulai proses pendaftaran, mari kita beralih ke sudut pandangskrip service worker, yang menangani kejadian install.

Untuk contoh paling dasar, Anda perlu mendefinisikan callback untuk kejadian install dan memutuskan file mana yang ingin Anda cache.

self.addEventListener('install', function(event) {

  // Perform install steps

});

Di dalam callback install, kita perlu mengambil langkah-langkah berikut:

·         buka cache

·         cache file kita

·         Konfirmasikan apakah semua aset yang diperlukan telah dimasukkan ke cache atau tidak.

var CACHE_NAME = 'my-site-cache-v1';

var urlsToCache = [

  '/',

  '/styles/main.css',

  '/script/main.js'

];

self.addEventListener('install', function(event) {

  // Perform install steps

  event.waitUntil(

    caches.open(CACHE_NAME)

      .then(function(cache) {

        console.log('Opened cache');

        return cache.addAll(urlsToCache);

      })

  );

});

Di sini Anda bisa melihat kita memanggil caches.open() dengan nama cache yang diinginkan, setelah itu kita memanggil cache.addAll() dan meneruskannya dalam larik file kita. Ini adalah rantai promise (caches.open() dan cache.addAll()). Metode event.waitUntil() mengambil promise dan menggunakannya untuk mengetahui berapa lama waktu yang diperlukan pemasangan, dan apakah berhasil.

Jika semua file berhasil di-cache, maka service worker akan dipasang. Jika ada file yang gagal diunduh, maka langkah pemasangan akan gagal. Ini memungkinkan Anda untuk mengandalkan aset yang telah didefinisikan, namun ini berarti Anda perlu berhati-hati dengan daftar file yang Anda putuskan untuk di-cache dalam langkah pemasangan. Mendefinisikan daftar file yang panjang akan meningkatkan kemungkinan adanya satu file yang mungkin gagal di-cache, sehingga menyebabkan service worker Anda tidak dipasang.

yaaap ... ServiceWorker sudah dibuat dan sekarang saatnya untuk melakukan uji coba untuk PWA dilocalhost .

Jika sebelum menggunakan PWA dengan dengan melakukan run ng -serve 

maka hasilnya akan seperti ini dengan cara klik kanan , inspek elemetn dan pilih audit dan kemudian perfome audit maka hasilnya akan seperti ini , dimana Progressive Web  masih terlihat rendah 

dan jika di lakukan offline untuk network maka gambar dinasaurus akan muncul dilayar browser anda

dan ini hasil setelah menggunakan PWA dengan melakukan run http-server pada project, hasilnya akan seperti ini

bisa kita lihat untuk Progressive Web nya meningkat untuk persentasinya dan jika network nya kita offline kan masih bisa untuk tetap digunakan tanpa keluar gambar dinasaurus di halaman browser kita, ini menandakan bahwa serviceworker kita bekerja, lihat untuk size nya yaitu from serviceworker , tentunya serviceworker akan bekerja jika kita pernah membuka atau mengunjungi halaman berikutnya dst , karena serviceworker berkerja mengambil cache yang disimpan . Ohiya minna, disini saya gunakan adalah AngularJS.

Mungkin demikianlah sedikit pengenalan mengenai Progressive Web Apps yang bisa saya bagikan, semoga bermanfaat.

Terimakasih.