Membuat Aplikasi Website Menggunakan PWA Lengkap dan Mudah 2021

  • Bagikan
Membuat Aplikasi Website Menggunakan PWA
Membuat Aplikasi Website Menggunakan PWA

Membuat aplikasi website menjadi keinginan oleh beberapa pemilik situs demi mempermudah serta mempercepat akses pengunjung ke website yang dimiliki.

Ada banyak 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 ?

Progressive Web App atau lebih dikenal dengan PWA 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.

Baca Juga  Pengertian Hosting, Fungsi, Jenis Serta Tips Memilih Hosting Lengkap 2021

Perbandingan PWA 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 menjadi salah satu contoh website yang menggunakan PWA

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 PWA untuk website kalian. Berikut ulasannya.

1. Hemat Biaya

Kelebihan menggunakan PWA yang pertama adalah hemat bahkan gratis jika kalian membangun website menggunakan wordpress.

2. Cocok Di Semua Perangkat

PWA 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

Menggunakan PWA tidak perlu mengupload aplikasi baik ke Google Playstore ataupun Apple Store karena dapat langsung diinstall pada perangkat.

4. Aplikasi Ringan

Aplikasi PWA 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

Baca Juga  5 Rekomendasi Web Hosting Gratis 2021

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 PWA

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 PWA

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>

Baca Juga  Cara Hosting Di Google Cloud, Membuat VPS Lengkap 2021

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

memasang Plugin PWA di WordPress

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.

rekomendasi plugin pwa wordpress

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

cara cek pwa pada situs

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

notifikasi install pwa windows

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 seperti gambar dibawah ini.

contoh web pwa aktif
  • Bagikan