Progressive Web Apps

Apa itu PWA?

http://undercover.co.id/ – Progressive Web App atau biasa disingkat PWA merupakan salah satu teknologi di website terbaru selain AMP yang perlu Anda ketahui untuk meningkatkan performa website Anda.

Seperti apakah PWA itu dan bagaimana bisa teknologi ini dapat meningkatkan performa dari situs Anda? Kami akan ulas lengkap dalam artikel kali ini.

Apa itu Progressive Web Apps

Progressive Web Apps adalah teknologi yang menggabungkan antara website dengan aplikasi mobile maupun desktop tentu saja dengan kelebihan-kelebihan yang powerful untuk menunjang performa website.

PWA ini pertama kali dikenalkan pada tahun 2015 saat developer advocate Google, Pete Lepage. Hal yang penting ditekankan adalah PWA ini tetap merupakan sebuah website, namun tampilan dan user experiencenya seperti aplikasi.

Artinya pengunjung bisa membuka aplikasi Progressive Web Apps ini melalui browser dengan mengetikkan URL, seperti saat mengakses sebuah website. Namun segala fitur yang didapat seperti aplikasi baik itu aplikasi mobile maupun aplikasi desktop dengan keunggulan tanpa perlu install dan download.

Meskipun menggunakan kata App alias aplikasi, namun PWA tidak hanya terbatas untuk diakses di perangkat mobile. Selama memiliki akses internet dan browser, maka Anda dapat menikmati akses aplikasi melalui browser. Menarik sekali bukan?

Teknologi PWA ini pun sebenarnya sudah banyak digunakan dan familier, namun mungkin Anda tidak sadar telah sering menggunakannya. Jika Anda pernah membuka aplikasi Instagram, Tinder, Pintrest, Twitter dari laptop atau browser handphone, maka itulah saat Anda sedang mengakses Progressive Web Apps.

PWA ini dikembangkan oleh Google untuk pengguna perangkat mobile sehinga meski berbentuk website namun bisa seperti aplikasi, diletakkan di home screen untuk sekali klik masuk ke aplikasi. Selain itu menyediakan fitur seperti push notification, halaman website offline, serta loading yang cepat. Semua ini adalah teknologi modern dari sebuah website yang bisa tampil seolah seperti aplikasi handphone biasa.

Menggunakan PWA ini dapat meningkatkan konversi dikunjungi oleh pengguna hingga 70%. Akses loading halaman juga lebih cepat dengan penggunaan data yang 3 kali lebih rendah dibanding aplikasi biasa atau website biasa. Pengguna juga bisa menempatkan aplikasi di layar homescreen seperti aplikasi biasa untuk kemudahan membuka aplikasi.

Karakteristik Progressive Web Apps

Terdapat sehttp://undercover.co.id/lan karakteristik yang dimiliki oleh website denganh teknologi PWA.

1.  Peningkatan secara progresife terhadap User Engagement atau keterikatan pengguna terhadap website
2. Responsive web design, artinya bisa dibuka di banyak jenis perangkat gadget sekaligus tanpa merusak tampilan
3. Dapat berjalan saat jaringan offline
4. Dengan Model App Shell, Progressive Web Apps terlihat seperti aplikasi Mobile
5. Selalu menggunakan sertifikat https untuk enkripsi data dari browser ke server website
6. Memiliki penampilan yang fresh dengan pengalaman yang menarik lengkap dengan fitur push notification, Periodic Background Syncs, dan kemudahan akses saat offline
7. Sangat ramat terhadap hasil pencarian di Google
8. Dapat membuat engagement yang baik kepada pengunjung
9. Memungkinan pengunjung menambahkan langsung aplikasi di homescreen tanpa perlu install aplikasi.

Bagaimana cara mengetahui website tersebut adalah PWA?

Untuk mengetahui apakah sebuah website yang Anda akses apakah menggunakan teknologi PWA atau bukan sebenarnya tidak terlalu mudah. Kecuali jika Anda adalah programmer atau developer yang memang menggali kode secara dalam di website tersebut maka akan cepat tahu teknologi apa yang website tersebut gunakan.

Namun ada beberapa cara untuk mengetahui apakah sebuah website tersebut menggunakan teknologi PWA atau tidak, berikut beberapa hal yang dapat Anda gunakan sebagai parameter:

Memiliki tampilan Single Page Website

Salah satu cara paling mudah untuk melihat apakah website itu kemungkinan menggunakan teknologi PWA, adalah dengan melihat tampilannya. Tampilan yang hanya terdiri dari satu halaman saja merupakan salah satu ciri dari PWA.

Meskipun sebenarnya PWA sebenarnya tidak hanya terdiri dari 1 halaman saja. Namun memang proses menampilkan halaman hanya terjadi satu kali, kemudian urusan pergantian konten dan fitur-fitur semua dikelola oleh Java Scripts. Hal ini tentu berbeda dengan website biasa dimana setiap berganti halaman, harus meload halaman lain dengan sumber HTMLnya.

Untuk mengetahui apakah website tersebut hanya terdiri dari satu halaman saja, caranya mudah. Cukup lihat pada tab di browser, ketika klik menu atau fitur yang tersedia di website dan tidak ada animasi loading di browser sementara website sudah memuat konten baru, maka bisa dipastikan bahwa website tersebut menggunakan PWA.

Menggunakan Service Worker

Servive worker di sini tidak bisa diartikan secara harafiah berarti ada orang yang bekerja di balik PWA. Service Workers adalah teknologi dibalik Progressive Web Apps yang memungkinan untuk menjalankan fungsi seperti push notification, resource-caching untuk mempercepat akses, serta kemampuan diload secara offline. Service Worker ini adalah inti dari teknik PWA yang diterapkan di website.

Saat Anda menggunakan browser Chrome, Anda dapat melihat apakah terdapat service worker di situs yang diakses dengan klik Inspector Tool. Caranya dengan klik kanan dari website yang akan di cek, lalu pilih Inspect Element. Cari Application tab lalu pilih Service Worker. Dari sana Anda dapat menemukan apakah ada Service Worker yang sedang berjalan. Jika ada berarti itu jelas merupakan website PWA.

Melihat URL apakah menggunakan https atau tidak

Meskipun tidak berarti setiap website dengan https dibangun dengan PWA, namun semua website dengan PWA pasti menggunakan https. Sebab PWA hanya dapat berjalan pada domain yang aman yaitu https.

Apa yang bisa dilakukan Progressive Web Apps?

 Mungkin Anda masih kebingungan kenapa harus menggunakan teknologi Progressive Web Apps. Apalagi proses migrasi dari website reguler menjadi Progressive Web Apps tentu membutuhkan effort yang tidak mudah.

Oleh karena itu penting bagi Anda mengetahui apa saja yang bisa PWA lakukan sehingga dapat membantu Anda menentukan apakah membutuhkan teknologi ini atau tidak.

PWA saat ini sudah dapat melakukan banyak hal secara eksklusif seperti aplikasi mobile native asli. Segala fungsionalitas dari perangkat mobile bisa diakses oleh website dengan PWA dari mulai GPS, Kamera dan mikrofon, website dengan mode offline, akses ke directory dan file, dan masih banyak yang lainnya.

Semua itu bisa diakses melalui website dan dibuka dengan browser, tak perlu harus download dan install.

Dari semua itu tentu Anda bisa menentukan kira-kira apakah Anda membutuhkan pengembangan website dengan banyak fitur dan akses seperti mobile apps biasa, tentu saja dengan kecepatan akses yang lebih cepat. Memiliki website dengan PWA ini menjadi alternatif lain yang memudahkan Anda yang ingin memiliki aplikasi namun bisa diakses dimana saja secara fleksibel hanya melalui browser.

Itulah ulasan lengkap pengenalan tentang Progressive Web Apps dari mulai pengertian, karakteristik, hingga cara menentukan apakah sebuah website menggunakan teknologi PWA atau tidak.

baca juga

Keuntungan Menggunakan Progressive Web Apps

Saat ini hampir semua orang memiliki perangkat mobile serta menghabiskan waktu berasamanya. Sebagai pemilik website atau teknologi, fakta tersebut menjadi peluang di mana Anda harus memberikan nilai lebih di website Anda agar orang-orang dengan perangkat gadget menjadi pengunjung bahkan pelanggan loyal.

Progressive Web Apps atau PWA adalah salah satu teknologi website yang sudah dioptimalisasi untuk pengguna gadget. PWA ini mengkohttp://undercover.co.id/nasikan antara website dengan aplikasi mobile sehingga menciptakan pengalaman baru terhadap user hingga dapat meningkatkan engagment dan tiungkat konversi di website Anda.

Banyak sekali kelebihan yang didapatkan ketika memanfaatkan teknologi ini untuk situs website Anda. Berikut kami bagikan keuntungan-keuntungan tersebut agar dapat menjadi pertimbangan Anda memutuskan kapan menerapkan teknologi PWA ini.

Keunggulan Progressive Web Apps

Data riset dari Appinstitute menyatakan bahwa PWA memiliki banyak kelebihan ketika diterapkan dalam sebuah perusahaan, yaitu meningkatkan 68% trafik dari perangkat mobile. Peningkatan dalam proses loading. Pengurangan penggunaan memori perangkat hingga 25x.

Selain itu ada peningkatan konversi rata-rata hingga 52%, 78% rata-ratapeningkatan session, 137% peningkatan dari sisi engagement pengunjung, dan 133,67% peningkatan page view.

Angka-angka tersebut tentu sangat menarik bagi Anda pemilik website. Selain keuntungan tersebut, terdapat beberapa keuntungan lain yang bisa Anda dapatkan dengan menerapkan PWA dalam website Anda.

Biaya Pengembangan yang relatif lebih rendah

Tidak seperti membangun aplikasi mobile, mengembangkan PWA tidak membutuhkan beberapa jenis versi untuk perangkat yang berbeda. Cukup satu aplikasi progressive app sudah dapat diakses oleh semua jenis device sebab pada dasarnya aplikasi PWA dibuka melalui browser.

Hal tersebut membuat biaya untuk pengembangan menjadi lebih kecil karena tidak perlu membangun berbagai jenis versi. Biaya yang dibutuhkan sekitar tiga hingga empat kali lebih rendah dibanding membangun aplikasi mobile apps native.

baca juga

Installasi yang cepat

Memiliki website dengan PWA berarti memudahkan pengguna tidak perlu mendownload dan install aplikasi di devicenya. Tak perlu juga harus mencari-cari dei App Store atau Google Play.

Pengguna hanya tinggal mengakses aplikasi melalui browser dengan mengetikkan alamat website aplikasi tersebut. Kemudahan ini juga meningkatkan kemudahan untuk orang-orang share ke temannya. Sehingga mempercepat promosi dari website Anda.

Memiliki website dengan tampilan dan pengalaman seperti aplikasi native

Progressive Web Apps memberikan kelebihan dengan membuat tampilan website dan user experience seperti menggunakan aplikasi native mobile. PWA juga bisa didesain sangat mirip bahkan identik dengan aplikasi native dengan kecepatan, respon, dan kemampuan yang sama dengan aplikasinya.

Kelebihan lain, adalah dengan aplikasi WPA ini situs Anda tetap dapat diindeks oleh search engine seperti Google dan Bing sebab memang pada dasarnya WPA adalah sebuah website. Ini  memberikan keuntungan lebih bagi Anda, sebab jika memiliki aplikasi native tak akan bisa diindex oleh Google.

Performa yang lebih baik

PWA dapat menampilkan data berupa text, image, dan konten lain dengan spesifik dan efisien sehingga meningkatkan kecepatan loading. Hal tersebut tentu membuat peningkatan terhadap performa webstie Anda.

Dengan performa website yang baik, maka otomatis akan meningkatkan user experience hingga akhirnya dapat meningkatkan tingkat konversi website Anda.

Fungsi Push Notification

Seperti pada aplikasi mobile native, PWA dapat memiliki akses fungsionalitas ke perangat gadget, salah satunya adalah push notification. Kemampuan ini sangat cocok untuk menampilkan konten iklan atau mengajak untuk kembali ke website.

Menurut data statistik dari Google, hampir 60% pengguna mengijinkan Progressive Web Apps mengirimkan mereka notifikasi. Hal ini menjadi peluang besar bagi pemilik bisnis untuk promosi produk dan servicenya. Apalagi push notifikasi akan muncul di perangkat mobile pengguna yang memiliki tingkat kemungkinan dibuka dan dibaca sangat tinggi.

Dibandingkan dengan email marketing, email newsletter, posting social media, atau blog, promosi melalui push notification merupakan salah satu cara yang lebih menarik perhatian dan lebih banyak dibuka.

Keamanan yang lebih baik

Progressive Web Apps menggunakan https untuk menyediakan data yang aman serta dapat meminimalisir resiko keamanan.

Tidak bergantung pada Layanan App Distribution

App Distribution yang dimaksud di sini misalnya Google Play, App Store, atau Microsoft Store. Memiliki PWA membuat Anda tak membutuhkan dan bergantung dengan hal tersebut. Sebab akses aplikasi bisa dilakukan hanya dalam satu alamat website yang mudah diingat dan dibagikan. Tak perlu instalasi dan download serta mencari di layanan app distribution.

Tidak membutuhkan update

Progressive Web Apps tidak membutuhkan fungsional khusus untuk melakukan update secara otomatis. Tak ada notifikasi yang muncul di sisi pengguna jika terjadi update, begitu pula tak ada permintaan permission bagi pengguna.

PWA melakukan update setiap pengunjung mengunjungi halaman website PWA, atau bahkan saat merefresh halaman di browser.

Tidak bergantung pada platform pengguna

Tidak seperti aplikasi biasanya yang sangat bergantung pada sistem operasi dan kemampuan teknis yang berbeda-beda berdasar device, Progressive Web Apps dapat berjalan tanpa memperhatikan itu semua.

Apakah sistem operasi mengalami update atau device baru muncul, PWA dapat digunakan di mana saja  memenuhi kebutuhan semua pengguna dengan user experience dan tampilan yang tetap sama.

Bahkan ketika pengguna berganti perangkat, setting dan akses aplikasi tak akan mengalami perbedaan.

baca juga

Dapat diakses secara offline

Kemampuan untuk dapat diakses secara offline merupakan keunggulan khusus dari Progressive Web Apps dibanding dengan website biasa yang harus menggunakan koneksi internet saat mengakses.

Fitur Built-in Service Workers membuat fitur dan informasi dari Progressive Web Apps tersimpan di cache sehingga tetap dapat diakses meskipun pengguna sedang tidak terhubung dengan internet.

Data yang disimpan di cache tersebut adalah data yang terakhir diakses oleh pengguna, namun jika sebelumnya pengguna belum mengakses halaman tersebut maka yang muncul adalah halaman offline yang sudah di custom.

Fitur ini sangat membantu bagi bisnis anda terutama untuk meningkatkan retensi pelanggan kembali ke Website.

PWA cocok untuk SEO

Progressive Web Apps memiliki kecepatan loading dan akses yang ringan, keunggulan itulah yang dapat meningkatkan aksesbilitas dan kemampuan pencarian aplikasi di search engine.

Dengan kecepatan PWA, dapat memberikan user experience yang baik sehingga dapat mendukung strategi SEO Anda. PWA ini bisa menjadi salah satu strategi online marketing yang perlu dipertimbangkan. 

Itulah sepuluh poin kelebihan dari penggunaan Progressive Web Apps. Penggabungan antara kemampuan aplikasi mobile dan website ini merupakan salah satu kohttp://undercover.co.id/nasi yang efisien untuk sebuah website.

PWA sudah terbukti banyak memberikan peningkatan signifikan terutama dalam user experience dan peningkatan rate retention pengunjung, atau kembalinya pengunjung ke website.

Tak hanya itu saja, Anda juga dapat memperoleh Progressive Web Apps dengan biaya yang jauh lebih murah dibandingkan dengan membangun sebuah aplikasi mobile native.

Perbandingan Progressive Web App, AMP, dan Mobile Native

Saat ini hampir setiap orang memiliki perangakat smartphone. Fakta tersebut membuka lebar kesempatan dalam dunia bisnis, tuntutan untuk memberikan user experience yang berbeda muncul untuk menjaring pasar pengguna smartphone.

Terdapat tiga teknologi yang biasa dilakukan untuk melakukan hal tersebut. Pertama dengan membangun sebuah aplikasi mobile native, membangun website dengan AMP, atau membangun sebuah progressive web apps.

Ketiga hal tersebut merupakan teknologi masa kini di dunia mobile yang berguna untuk menampilkan konten dan fitur yang menarik dengan masing-masing memberikan kelebihan dan kekurangannya bagi pengguna perangkat mobile.

Kali ini kami akan membahas tentang perbedaan masing-masing ketiga teknologi tersebut dengan kelebihan dan kekurangannya masing-masing.

Aplikasi Mobile Native?

Aplikasi mobile native adalah aplikasi yang dikembangkan secara optimal masing-masing untuk sistem operasi Android maupun iOs. Aplikasi Mobile Native dikembangkan sendiri-sendiri berdasarkan jenis sistem operasi dan hardware yang dituju. Untuk mendapatkan aplikasi ini Anda perlu menginstal di app store atau google playstore.

Apa keuntungan Menggunakan Aplikasi Mobile Native?

• Memiliki performa aplikasi yang bagus.

Karena dikembangkan khusus untuk masing-masing platform, maka performa aplikasi akan sangat optimal. Dengan aplikasi yang diinstall langsung di perangkat gadget, data bisa diproses dengan cepat sehingga aplikasi berjalan dengan cepat.

• Memiliki user experience yang bagus
• Dapat berinteraksi dengan aplikasi lain yang juga diinstall di perangkat gadget
• Dapat memanfaatkan semua fiturh sistem operasi, misalnya geofencing.

Apa Kekurangan Menggunakan Aplikasi Mobile Native?

• Pengembangannya cukup sulit dan memakan biaya besar.  Hal tersebut disebabkan karena membangun sebuah aplikasi mobile native ini sangat kompleks dan harus menyesuaikan masing-masing platform serta merawatnya. Contohnya jika sudah membuat aplikasi native untuk Iphone, maka jika ingin aplikasi bisa digunakan di Android berarti harus melakukan programming lagi dari awal untuk Android. Belum lagi kalau ada perubahan atau update versi sistem operasi, biasanya perlu ada penyesuaian-penyesuaian berkala per masing-masing platform.
• Tantangan untuk akusisi pengguna

Untuk dapat digunakan oleh pengguna, mereka harus membuat orang mau mendownload dan menginstall aplikasi di gadgetnya. Ini merupakan tantangan sendiri jika dibandingkan menggunakan teknologi PWA yang hanya membuatuhkan sebuah link dan diakses ke browser untuk akusisi.

Accelerated Mobile Pages (AMP)

AMP adalah pengembangan dari halaman website untuk mobile, yang didesain untuk loading secara instan dengan cepat dan smooth. Teknologi ini pertama dikenalkan oleh Google tahun 2016 dan saat ini banyak sekali website besar yang mengimplementasikan ke websitenya.

AMP ini memanfaatkan teknologi umum pada website, namun dengan batasan dan pengembangan yang optimal demi tujuan instan, simple, dan cepat. Komponen utama dari AMP adalah AMP HTML, AMP Javascript, dan AMP Cache.

Apa Keuntungan menggunakan AMP?

• Meningkatkan performa dan user experience pengunjung dari perangkat mobile, sebab memiliki akses yang cepat dan instan
• Bisa berada di Carousel kolom pencarian. Ini menyebabkan Anda mendapatkan kesempatan memperoleh pengunjung lebih besar.

Apa Kekurangan Menggunakan AMP?

• Ada batasan pada penggunaan JavaScript dan CSS. Untuk mengejar kecepatan akses dan waktu yang sedikit untuk loading konten, maka AMP membatasi fitur-fitur Javascript dan CSS di websitenya. Meskipun memang dari sisi kecepatan meningkat tajam, namun ini bisa jadi kendala untuk penempatan style atau bahkan branding Anda sebab desain cendrung minimalis.
• Menyajikan halaman yang disimpan di cache

Alasan mengapa AMP begitu cepat memuat sebuah konten adalah karena mengijinkan Google menyediakan versi cache AMP. Artinya konten yang dilihat pengguna saat membuka website dalam mode AMP ini yang menyajikan adalah Google yang sudah mencopy konten Anda dan menyimpannya di server sendiri.

• Proses implementasinya cukup merepotkan

Ketika Anda menggunakan tool AMP di WordPress, seringnya terjadi konfilk antara tool AMP dengan tool SEO seperti Yoast. Sehingga bisa dibilang proses implementasi AMP di website ini tidak mudah.

Apa itu Progressive Web App?

Progressive Web App atau biasa disebut PWA ini merupakan gabungan antara fungsi aplikasi mobile native dengan website. PWA memiliki fitur-fitur seperti aplikasi native namun juga masih menggunakan browser untuk akessnya seperti website.

Terdapat tiga komponen utama dari PWA yaitu Service Worker, merupakan komponen Javascript yang berfungsi menjembatani jaringan dengan browser. Kedua adalah Protokol https yang membuat Service Worker dapat request dan memodifikasi respons data secara aman, yang ketiga adalah Manifest File yaitu yang membuat PWA seperti aplikasi Android Native sesungguhnya.

Apa Keuntungan menggunakan Progressive Web App?

• Menghemat biaya dan waktu untuk pengembangannya

Tidak seperti aplikasi native yang harus membangun dari awal untuk masing-masing platform baik itu iOS atau Android, PWA hanya dibutuhkan proses development satu kali saja

• Tak perlu mendaftarkan ke store aplikasi seperti Google Play Store atau App Store, sebab PWA dapat diakses melalui browser dengan satu link saja
• Memudahkan pengguna sehingga tak perlu untuk mendownload dan install aplikasi di perangkat mobilenya
• Mudah di share dan diakses hanya dalam satu URL singkat sehingga mempermudah akusisi pengguna.
• Dapat dioptimasi di search engine sehingga makin mempermudah untuk ditemukan dan diakses oleh pengguna.
• Pengguna dapat membuat PWA seperti aplikasi mobile yang diinstal di handphone dengan menampilkan icon PWA di home screen.

Apa kekurangan menggunakan Progressive Web App?

• PWA tidak disupport oleh semua browser
• PWA tidak memiliki akses pada semua fitur yang terdapat di perangkat gadget seperti aplikasi native. Fitur yang dimaksud misalnya geolocation, bluetooth, dan beberapa fitur penting lain. Satu fitur yang bisa dimanfaatkan dalam PWA adalah Push Notification
• PWA tidak bisa di monetasi

Lalu pilih yang mana?

Setelah mengetahui pengertian, kelebihan, serta kekurangan masing-masing teknologi baik itu AMP, Native Mobile Apps atau PWA Anda tentu dapat memberikan keputusan sendiri mana yang terbaik untuk dikembangkan pada bisnis Anda.

Jika ingin mengutamakan kenyamanan pengguna, dengan segala kemudahan dan kecepatan aksesnya, memiliki aplikasi native merupakan pilihan yang cukup direkomendasikan. Sebab aplikasi native dapat memberikan bermacam tool yang bermanfaat dibandingkan dengan PWA atau AMP.

Namun sekali lagi Anda perlu melakukan analisis ulang apakah benar Native Mobile App benar-benar dibutuhkan, apalagi dengan biaya dan waktu pengembangan yang tidak sedikit.

PWA dan AMP sendiri menjadi salah satu solusi yang lebih murah dan mudah untuk memberikan kemudahan akses kepada pelanggan Anda. AMP memiliki kemudahan, kecepatan, dan lebih murah ketika di kembangkan. Sementara untuk PWA dapat memberikan keuntungan lebih dengan fitur yang lebih menarik.

Dengan biaya yang lebih murah serta keunggulannya masing-masing dibandingkan dengan website biasa, kedua opsi tersebut juga bisa menjadi yang terbaik untuk bisnis.

Tutorial Membangun Progressive Web App

Sejak beberapa tahun terakhir pola pengguna internet sudah berubah. Jika sebelumnya mayoritas berasal dari pengguna PC, sekarang sebagian besar sudah beralih ke perangkat mobile.

 Dengan kemudahan aksesnya, sifat portable, dan harga yang cendrung murah, membuat banyak pengguna lebih memilih menggunakan perangakt gadget.

 Sebagai pemilik sebuah website atau bisnis, hal tersebut sangat mempengaruhi kebutuhan optimasi user experience pengguna mobile. Kegiatan optimasi ini penting agar bisa meraih pasar dan pengunjung yang lebih besar dari pengguna gadget mobile.

Salah satu cara untuk mengembangkan user experience bagi pengguna mobile adalah membangun sebuah web apps. Membangun web app adalah satu kunci kesempatan besar untuk memenangkan hati pengguna dengan memberikan pengalaman terbaik ketika mengunjungi sebuah website.

Kemampuannya yang reliable sehingga bisa diakses dan diload dengan cepat bahkan di saat tidak terhubung internet/ offline, kemampuan animasi yang smooth, fitur push notification, dan banyak kelebihan lain. Sebuah pertimbangan yang bagus jika Anda saat ini berniat untuk membangun sebuah web apps untuk memanjakan costumer Anda.

Kali ini kami akan bagikan tutorial cara membangun web apps dengan Progresive Web Apps (PWA) pertama Anda.

  Komponen Teknis dari PWA

Sebelum membangun sebuah web apps dengan PWA, Anda perlu tahu ada tiga komponen yang dibutuhkan.

1. Service Worker

Service worker adalah komponen kode JavaScript yang bekerja sebagai proxy antara jaringan internet dan browser. Service worker membantu membangun offline webs apps dengan memanfaatkan API browser cache dan membuat push notification.

Inilah komponen yang membuat sebuah web apps tetap bisa dibuka saat internet sudah mati. Saat loading pertama kali, service worker menyimpan semua resource website di cache browser.

Ketika kemudian hari pengguna masuk ke website lagi, service worker otomatis melakukan pengecekan cache dan langsung memberikan resource bahkan sebelum cek koneksi internet. Sehinga webs apps tetap menampilkan kontennya bahkan saat offline.

File Manifest

File manifest ini adalah salah satu komponen penting dari PWA yang memuat informasi terkait sebuah aplikasi seperti nama aplikasi, warna background, icon, dll. File manifest ini berupa file config JSON.

Pada PWA, ketika browser chrome menemukan file Manifest, maka otomatis akan memunculkan banner install web apps. Jika pengguna setuju, maka icon web apps akan berada di home screen dan PWA sudah terinstall. Sangat cepat dan mudah bukan?

 Berikut contoh file manifest dari PWA:

{
“short_name”: “Toko Onlineku”,
“name”: “Toko Onlineku”,
“icons”: [
{
“src”: “/images/icons-tokoOnlinkeu.png”,
“type”: “image/png”,
“sizes”: “191×191”
},
{
“src”: “/images/icons-tokoOnlineku.png”,
“type”: “image/png”,
“sizes”: “512 x512 “
}
],
“start_url”: “/home/?source=pwa”,
“background_color”: “#378383”,
“display”: “standalone”,
“scope”: “/home/”,
“theme_color”: “#3783D3”
}

https

Komponen service worker menjalankan fitur PWA dari sisi pengguna, sehingga dibutuhkan protokol https untuk keamanan. Sehingga ketika membangun sbeuah website PWA maka Anda membutuhkan https ini.

Tools dan library yang dibutuhkan untuk membangun PWA

Saat ini sudah banyak beberapa tools dan library yang dapat digunakan untuk membangun sebuah website PWA dengan mudah. Diantaranya yaitu:

1. Workbox

Library yang dibuat oleh Google secara open source dan dapat digunakan untuk generate file service worker. Selain itu Workbox juga memiliki beberapa teknik untu cache gambar dan resource.

• Lighthouse

Tool yang dapat digunakan untuk audit pada halaman website untuk memerika kebutuhan membangun PWA. Tool ini sangat pas digunakan saat membangun sebuah PWA sebab dapat membantu cek dan memberikan rekomendasi untuk meningkatkan pengalaman di PWA.

Membuat Progressive Web Apps dengan React

React adalah library Javascript yang populer untuk membangun sebuah tampilan User Interface (UI).

1. Set Up awal

Untuk memulai Anda perlu merubah posisi di direktori tempat aplikasi akan disimpan. Jalankan kode berikut:

npm install –g creat-react-app

create-react-app pwa-experiment

Cara intall React Rounter

cd pwa-experiment

npm install –save react-router@3.0.5

Selanjutnya silakan membuat layout untuk navigasi pada file APP.js, Anda dapat menggunakan kode berikut:

Jalankan npm start untuk menjalankan aplikasi Anda, tampilannya memang masih sangat biasa. Selanjutnya Anda akan membuat aplikasi ini menjadi PWA.

Langkah 1:

Install tool Lighthouse di browser Google Chrome untuk cek dan mengevaluasi fitur PWA aplikasi.

Link untuk download Lighthouse berikut: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Langkah 2:

Setting service worker di aplikasi Anda. Service worker adalah Javascript yang akan berada di antara aplikasi dan jaringan. Service worker akan mengalihkan request jaringan dialihkan ke file yang sudah di cache sehingga wev apps dapat dibuka saat offline.

Untuk menjalankan service worker, ada tiga hal yang perlu dilakukan:

1. Membuat file service-worker.js di folder public
2. Mendaftarkan service worker di index.html
3. Setting caching

Langkah 3:

Salah satu peningkatan dari PWA dibanding web biasa adalah Anda akan menemui situs yang tidak terlihat sedang loading. Cara mudah melakukan setting ini adalah dengan memindahlan struktul HTML dke div #root. HTMl ini akan di overwrite segera setelah ReacDOM merender komponen apps.

Langkah 4:

Selalu lakukan pengecekan dengan Lighthouse untuk melihat evaluasi PWA tersebut.

Langkah 5:

Deploy dengan Firebase. Pertama Anda perlu menjalankan fitur caching dengan merubah setting doCache menjadi true di file service-worker.js.

Buka Firebase lalu buat proyek baru, jalankan kode berikut:

Npm install –g firebase-tools

Firebase login

Firebase init

Setelah itu keluar pertanyaan What Firebase CLI features do you want to setup for this directory? Tekan tombol spasi untuk merubah opsi select. Pilih hanya opsi Hosting. Lalu tekan enter.

Selanjutnya pilih porject Anda, saat keluar pertanyaan What do you want to use as your public directory? Pilih build lalu tekan enter. Untuk pertanyaan Single Page apps, pilih No.

Selanjutnya jalankan dengan script:

npm run build && firebase deploy

Script di atas akan memberikan Anda URL, lalu silakan buka di browser untuk melihat aplikasi WPA Anda.

Itulah langkah sederhana yang bisa Anda lakukan untuk membuat sebuah aplikasi PWA. Masih sangat simple dan mengabaikan hal-hal lain. Untuk tutorial lebih lengkap, Anda dapat mengunjungi link