lifelong learner — urip iku urup, currently working on accenture.

Progressive web apps (PWA) – setup

0
Degananda.com -

Ulasan ini akan membahas bagaimana menyiapkan environment untuk melakukan development pada PWA(Progressive web apps). Tools yang akan digunakan adalah angular-cli (command line intepreter) sehingga PWA ini akan berbasiskan dengan angualrjs.

Selayang pandang

Progressive web app merupakan aplikasi yang dibangun dengan menggunakan teknologi untuk pembuatan website (javascript) dengan kemampuan (performa) layaknya native application. Google mengkalim dengan adannya teknologi PWA ini aplikasi web tersebut dapat berjalan hingga 120 FPS (sangat kencang sekali). PWA tidak menggunakan cordova layaknya aplikasi yang dibangun dengan menggunakan ionic ataupun phonegap.

Layaknya seperti aplikasi hybrid, PWA memiliki kemampuan seperti aplikasi seperti native misalnya notifikasi, akses terhadap hardware(tidak semua) dan tentunnya look and feelnya / ux. PWA hadir karena adannya masalah pada user yang sering kali enggan untuk mengunduh aplikasi pada playstore dikarenakan beberapa hal misalnya :

  1. Storage penuh (tidak semua user memiliki hp dengan storage penyimpanan yang besar, hal ini merupakan masalah utama yang ingin diselesaikan oleh teknologi PWA).
  2. Tidak ada kuota internet
  3. size apps yang besar sehingga mengurungkan niat user untuk mencoba aplikasi.

tiga alasan diatas biasannya terjadi pada aplikasi-aplikasi yang dibuat oleh developer baru(startup) jika aplikasi telah well knowed misalnya facebook, google allo, resistensi user untuk tidak mengunduhnya semakin kecil. Sehingga , PWA ini memberikan solusi pada developer-developer baru(startup) agar produk dari mereka semakin mudah untuk dicoba oleh user. Hal ini hanyalah salah satu dari banyaknya manfaat dari PWA. Namun , kita tidak akan membahas terlalu jauh mengenai PWA disini karena ulasan ini berfokus pada proses setup environment untuk melakukan develop PWA.

NOTE!!!

Ulasan ini merupakan percobaan untuk membuat PWA dengan angular mobile toolkit berdasarkan pada workshop. Link rujukan :

http://bit.ly/pwa-ng-nl

Requirement

terdapat beberapa tools yang harus disiapkan terlebih dahulu yaitu :

  • nodejs
  • npm (node package manager
  • browser yang disaranakan adalah chrome versi 53+ atau firefox versi 51+
  • web server (bisa extesion dari browser ataupun lainnya, apache/liteweb server,dsb).
  • angular versi 4+

dan yang paling penting adalah menginstall lighthouse pada chrome. Lighthouse dapat melakukan analisa terhadap suatu website dan akan menghasilkan metrix performa sehingga dapat memberikan informasi penting bagi kita developer. lighthouse memiliki dua jenis yakni sebagai chrome extension dan juga CLI. Kita diharuskan untuk menginstall keduannya.

link extension lighthouse

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

install lighthouse cli via npm

npm install -g lighthouse

ini adalah contoh report metrix performance yang dihasilkan oleh lighthouse pada website http://demo.degananda.com/angular/chapter-8/.

nantinnya report tersebut digunakan untuk mengukur kesesuaian suatu website terhadap aspek-aspek yang harus ada dalam PWA  atau mudahnya untu mengukur apakah website kita telah dapat dikategorikan sebagai PWA.

Setup

1. Buat project dengan angular 4+

di ulasan ini kami menggunakan repostori dibawah ini

https://github.com/degananda/angular-note/tree/8.0

anda bebas menggunakan project manapun. Untuk menghinstall project diatas jalankan

npm install

lakukan build terhadap project untuk versi produksi (production).

ng build --prod

Jika ingin membuat dengan project baru maka dapat menggunakan perintah

ng new nama_project

2. Build project tersebut

Goal pertama dalah mengecek performa dengan menggunakna lighthouse nantinnya akan dibandingkan setelah implementasi beberapa tools untuk PWA seperti services worker dan lain sebagainnya.

web server yang kami gunakan

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/

tidak disarankan untuk menjalankan index.html yang tergenerate dalam folder dist. Sehingga gunakanlah web server untuk menghosting index.html tersebut. Berdasarkan workshop maka kami menggunakan web server for chrome (extension). Kemudian jalankan web server dengan megarahkan pada folder dist.

nb :

Module not found: Error: Can’t resolve ‘./$$_gendir/app/app.module.ngfactory’

Jika anda menggunakan project dari kami(angular-note) mengalami error diatas saat melakukan build, silahkan mengupdate angular cli (secara local dan global) ke versi paling terahir.

3. jalankan web server

pilih folder dist dari project angular yang telah dibuild.

setelah itu buka 127.0.0.1:8887 sesuai dengan informasi diatas dan klik file index.html. Web server yang kami gunakan ini tidak langsung mengakses index.html sehingga harus dibuka secara manual pada browser. atau kami sangat menyarankan untuk mengatur web server agar langsung mekakses index.html dengan cara mencentang opsi “automaticly show index.html”. Hal ini sangat wajib dilakukan agar dapat digunakan untuk pengukuran performa metrix dengan lighthouse.

4. Jalankan lighthouse untuk mengetahui matrix performance awal.

berikut ini adalah hasilnya

selanjutnya goalnya adalah mengimplementasikan service worker dan akan dibandingkan hasilnya melalui lighthouse.

Setup service worker

1. Install service worker

pastikan project anda menggunakan angular versi 4+.  Kemudian jalankan perintah ini untuk melakukan registrasi service worker

ng set apps.0.serviceWorker=true

normalnya tidak akan ada pesan apapun pada terminal setelah mengeksekusi perintah diatas. Untuk mengetahui apakah perintah diatas berhasil maka buka .angular-cli.json. Jika pada editor tidak kelihatan maka anda dapat membukannya melalui terminal (via nano). Jika berhasil anda akan melihat line dibawah ini

“serviceWorker” : true , ini menandakan bahwa serviceworker telah berhasil teregistrasi dalam project ini.

setelah serviceWorker terdaftar / teregister selanjutnya adalah menginstall serviceworker itu sendiri. Perintah yang digunakan adalah

npm install  @angular/service-worker --save

2. Build project

langkah selanjutnya adalah melakukan build project. Tujuannya adalah untuk mengupdate konfigurasi project yang sebelumnya tidak menggunakan serviceworker. Nantinnya akan dibandingkan metrix sebelum menggunakan servicework dan tidak.

ng build --prod

setelah proses build selesai maka akan terdapat tiga buah file baru yang ada pada folder dist.

yakni sw-register.js, worker-basic.min.js dan ngsw-manifest.json. Ketiga file tersebut berhubungan dengan serviceWorker.

kemdian restart web server

3. jalankan lighthouse

berikut ini adalah hasil dari benchmark lighthouse pada project yang telah menggunakan serviceworker.

serviceWorker telah terintegrasi

secara otomatis akan meningkatkan nilai metrix

kita dapat melihat sebelum serviceWorker di integrasikan nilai PWA adalah 45 dan setelah menggunakan service worker nilai PWA adalah 64. Tentunnya masih jauh dari 100 , masih banyak harus dilakukan terutama terkait implementasi dari serviceWorker itu sendiri.

Done. setup telah selesai ditandai dengan serviceWorker berhasil di integrasikan. NAMUN IMPLEMENTASI SERVICE WORKER BELUM DILAKUKAN. Ulasan ini hanaya sampai pada setup serviceworker. Untuk selanjutnya akan dibahas lebih dalam mengenai implementasi serviceworker ini.