Dengan Menggunakan PWA Kalian lebih mudah membuat aplikasi untuk website yang kalian miliki
Membuat aplikasi website menjadi keinginan oleh beberapa pemilik situs demi mempermudah serta mempercepat akses pengunjung ke website yang dimiliki.
Hingga saat ini ada banyak sekali cara membuat aplikasi android maupun iOS agar dapat terhubung dengan website yang kita miliki mulai menggunakan Android studio untuk membuat aplikasi mobile atau Web app dan menguploadnya ke Google Playstore maupun AppStore.
Namun apakah kalian mengetahui ada sebuah cara mudah membuat aplikasi untuk website kalian yang langsung terinstall dan ringan ?
Pada artikel ini kami akan membahas cara membuat aplikasi website yang dapat langsung terinstall baik di Android ataupun iOS dengan satu klik dan lebih ringan dari aplikasi lainnya dengan menggunakan PWA.
Apa Itu PWA ?
PWA adalah singkatan dari Progressive Web App yang merupakan sebuah aplikasi yang dibuat dengan cara melakukan optimasi dari sebuah website.
Optimasi yang dilakukan oleh PWA akan membuat website kalian menjadi lebih cepat dan juga seperti menggunakan aplikasi biasa, tak hanya itu kalian juga gak perlu repot-repot bikin aplikasi sendri atau menyewa jasa pembuat aplikasi dan tentunya kalian juga gak perlu menguploadnya ke Google Playstore atau AppStore.
Perbandingan dengan WEB APP dan Aplikasi Mobile
Bagi kalian yang bertanya apa sih perbandingan dari PWA, Web App dan Aplikasi Mobile. Berikut kami berikan ulasannya
Menggunakan Web APP
- Mengandalkan browser serta cross platform
- Update Aplikasi otomatis
- Hanya dapat diakses ketika website online
- Memiliki Fitur yang terbatas
- Murah dari segi Biaya development
Menggunakan Aplikasi Mobile
- Dibuat untuk satu platform saja ( Android atau iOS )
- Update Aplikasi manual
- Masih dapat diakses ketika website offline
- Memiliki Fitur yang lengkap
- Biaya developmentnya cukup mahal ( mulai dari pembuatan aplikasi, upload ke Google Playstore dan upload ke APP Store )
Menggunakan PWA
- Teknologi pembuatan PWA mengandalkan browser serta cross platform
- Update aplikasinya otomatis
- Tetap dapat digunakan meski website sedang offline karena memiliki cache tersendiri
- PWA memiliki UX lebih intuitif dibandingkan web app
- Biaya yang murah bahkan gratis
Contoh Website Yang Menggunakan PWA
Tentunya kalian akan bertanya website apa saja yang menggunakan PWA, berikut website yang menggunakan PWA untuk menjadi referensi kalian.
Twitter Lite
Twitter telah menggunakan PWA sejak tahun 2017 yang lalu karena sekitar 80% traffic pengguna twitter berasala dari ponsel atau tablet.
Selain hal tersebut, twitter juga melakukan optimasi gambar, video serta pemanfaatan cache untuk meningkatkan performa.
Apa Sih Kelebihan PWA
Setelah melihat contoh website yang menggunakan PWA tentunya kalian harus tau mengenai kelebihan dari menggunakan fitur yang satu ini untuk website kalian. Berikut ulasannya.
1. Hemat Biaya
Kelebihan yang pertama adalah hemat bahkan gratis jika kalian membangun website menggunakan wordpress.
2. Cocok Di Semua Perangkat
Dapat digunakan oleh semua perangkat mulai Android, iOS hingga Windows tanpa harus membuat aplikasi sesuai Operating sistem masing-masing. Cukup 1klik kalian sudah dapat melakukan instalasi pada semua perangkat.
3. Tidak Memerlukan APP Store
Kalian tidak perlu mengupload aplikasi baik ke Google Playstore ataupun Apple Store karena dapat langsung diinstall pada perangkat.
4. Aplikasi Ringan
Aplikasi yang terinstall sangat kecil ukurannya hanya memerlukan penyimpanan beberapa MB saja loh. Tentunya tidak akan menghabiskan kapasitas penyimpanan perangkat yang kalian gunakan.
5. Seperti Menggunakan Aplikasi Mobile
Bagi kalian yang terbiasa menggunakan aplikasi mobile, penggunaan PWA sendiri hampir sama dengan aplikasi mobile lainnya namun lebih ringan
6. Mempercepat Loading Website
PWA memiliki Service Worker serta cache yang membuat website kalian menjadi lebih cepat diakses meskipun website kalian sedang terjadi gangguan atau down.
7. Hemat Bandwith
Menggunakan PWA dapat menghemat bandwith pengunjung situs kalian yang tentunya sangat bermanfaat bagi kalian agar pengunjung betah berlama-lama membaca artikel-artikel yang kalian terbitkan.
Cara Kerja
Sebenarnya gimana sih cara kerja dari PWA yang dapat membuat website lebih cepat dan hemat bandwith? berikut penjelasannya :
Ketika pengguna mengakses website kalian, service worker akan didaftarkan secara otomatis untuk menjalankan fungsi-fungsi yang telah kami jelaskan diatas dan mengaktifkan Event Install.
Setelah service worker terpasang maka konten app shell akan ditambahkan ke cache PWA. Untuk diketahui, app shell ini berisi resource yang dibutuhkan saat berjalan secara offline dan juga berfungsi untuk mengatur navigasi pada website kalian selanjutnya.
Cara Membuat
Membuat PWA dapat dilakukan secara manual atau otomatis dengan menggunakan plugin bagi kalian yang menggunakan WordPress. Berikut kami akan memberikan langkahnya baik secara manual maupun menggunakan Plugin.
Membuat PWA Manual
1. Membuat Web App Manifest
Langkah pertama yang harus kalian lakukan adalah membuat web app manifest yang merupakan file JSON berisi informasi situs kalian.
Kalian bisa membuat web app manifest dengan melihat contoh berikut
2. Tambahkan Web APP Manifest pada Template Website
Langkah selanjutnya adalah menambahkan kode Web App Manifest pada template yang kalian gunakan. Tempatkan kode berikut pada <Head> </Head>
<link rel=”manifest” href=”/static/manifest.json”>
3. Membuat Service Worker
Langkah ketiga adalah membuat service worker agar Aplikasi kalian dapat berjalan dan memunculkan notifikasi install pada website kalian.
Kalian bisa menambahkan script service worker ke file index.html pada template yang kalian gunakan. Untuk Contohnya kalian dapat melihat pada Laman ini.
4. Load Service Worker
Langkah keempat adalah meload service worker yang telah kalian buat tadi dengan cara menambahkan kode dibawah ini ke <Body> </Body> template yang kalian gunakan.
<script>
if (!navigator.serviceWorker.controller) {
navigator.serviceWorker.register(“/sw.js”).then(function(reg) {
console.log(“Service worker has been registered for scope: ” + reg.scope);
});
}
</script>
5. Deploy PWA
terakhir adalah mendeploy PWA agar dapat berjalan sebagai mana fungsinya pada situs kalian.
Membuat PWA di WordPress
Bagi kalian yang menggunakan CMS WordPress, membuat PWA sangatlah mudah loh. Berikut Langkahnya
1. Login Ke Dashboard WordPress
Yang pertama dan wajib adalah login ke panel dashboard web wordpress kalian menggunakan akun administrator.
2. Pilih Menu Plugin dan Tambah Baru
Kedua silahkan kalian pilih menu Plugin Kemudian Klik Sub menu atau tombol Tambah Baru dan pada kolom pencarian kalian cukup masukkan PWA maka akan muncul beberapa plugin PWA. Kami merekomendasi kan dua plugin PWA teratas yang kalian gunakan.
Kedua plugin seperti gambar diatas kami telah mencobanya. Untuk PWA pada gambar sebelah kiri tanpa memerlukan pengaturan alias otomatis sedangkan pada gambar sebelah kanan kalian perlu melakukan pengaturan.
3. Klik Install dan Aktifkan Plugin PWA
Selanjutnya adalah melakukan instalasi pada plugin PWA yang kalian pilih dilanjutkan mengaktifkannya. Khusus plugin PWA for WP kalian harus melakukan pengaturan seperti logo, cache dan dan sebagainya.
Cara Cek PWA
Setelah menginstall tentunya kalian ingin melakukan cek apakah PWA yang kalian install telah berjalan atau belum. Untuk pengecekkannya sendiri dapat kalian lakukan seperti langkah dibawah ini :
Buka Browser ( disarankan menggunakan Chrome ) dan Buka Website
Pertama buka browser chrome kalian lalu buka website kalian untuk melakukan pengecekkan apakah PWA telah berjalan atau belum
Klik Kanan pada laman dan Pilih Inspect
Selanjutnya adalah klik kanan pada laman website kalian dan pilih menu Inspect maka akan muncul tab inspect.
Pilih Menu Application
Setelah kolom Inspect muncul silahkan kalian pilih menu application seperti gambar diatas.
Pilih Menu Service Worker
Selanjutnya adalah memilih menu service Worker dan pastikan status berwarna hijau. Status yang berwarna hijau menandakan jika PWA kalian telah berjalan.
Cek Tombol Download Pada Bar Browser PC/Laptop dan Ponsel
Kalian akan menemukan logo install pada bar browser kalian seperti gambar diatas. ketika kalian klik maka akan muncul notifikasi install. sedangkan bagi kalian yang menggunakan Ponsel ketika membuka website kalian maka akan muncul notifikasi install aplikasi.
Itulah tadi tutorial yang bisa update.or.id berikan, semoga dapat membantu kalian.
