Tutorial Mengubah Situs Web Menjadi Progressive Web App (PWA)

Darmediatama.com – Tutorial PWA : Progressive Web App adalah inovasi terkini dalam pengembangan web yang memungkinkan situs web untuk menyediakan pengalaman pengguna yang serupa dengan aplikasi native. Dengan mengubah situs web Anda menjadi PWA, Anda dapat meningkatkan kinerja, kecepatan, dan interaktivitas, serta memberikan kemampuan akses offline kepada pengguna.

Dalam panduan ini, kami akan menunjukkan langkah-langkah yang diperlukan untuk mengubah situs web Anda menjadi Progressive Web App. Dari persiapan awal hingga implementasi fitur-fitur PWA seperti manifest.json, service worker, dan cache, Anda akan dipandu melalui setiap langkah dengan jelas dan terperinci

Apa itu Progressive Web Apps (PWA)?

Progressive Web Apps (PWA) adalah jenis aplikasi web yang memanfaatkan teknologi web modern untuk memberikan pengalaman pengguna yang lebih baik dan mirip dengan aplikasi native. Mereka dirancang untuk berfungsi secara andal di semua perangkat dan kondisi jaringan, dengan kemampuan untuk bekerja offline dan memberikan respons yang cepat.

Fitur Utama PWA:

• Responsif: PWA dirancang untuk berfungsi dengan baik di berbagai perangkat, mulai dari desktop hingga ponsel.
• Bekerja Offline: Mereka dapat menyimpan konten dan data yang diperlukan untuk bekerja bahkan saat tidak ada koneksi internet.
• Notifikasi Push: PWA memungkinkan pengguna menerima notifikasi langsung dari aplikasi, mirip dengan aplikasi native.
• Akses Perangkat: Mereka dapat mengakses fitur perangkat seperti kamera, mikrofon, dan lokasi pengguna.
• Instalasi ke Layar Beranda: Pengguna dapat menginstal PWA ke layar beranda perangkat mereka, memberikan akses cepat dan seperti aplikasi native.

Keuntungan Pengguna:

• Pengalaman Pengguna yang Lebih Baik: PWA memberikan pengalaman pengguna yang mulus dan responsif, bahkan dalam kondisi jaringan yang buruk.
• Konsumsi Rendah Data: Mereka dapat menyimpan data yang diperlukan, mengurangi konsumsi data pengguna.
• Akses Cepat: PWA yang diinstal ke layar beranda memberikan akses cepat tanpa harus membuka browser terlebih dahulu.

Tutorial Membangun PWA:

Sebelum masuk ke tutorial, sebaiknya dipersiapkan dulu beberapa software dan file-file untuk
mendukung Website PWA.

1. Manifest.json
   File ini berisi: nama aplikasi, deskripsi, warna address bar pada browser, icon, orientasi
   tampilan, dll.
2. Icon Persegi dengan berbagai ukuran
   Icon ini yang akan tampil sebagai icon aplikasi.
3. Install NPM atau Node.js
   Karena menggunakan plugin Workbox CLI, maka kita harus menginstall Node.js yang di
   dalamnya ada NPM.
   Install Node.js versi LTS.
4. Install Workbox CLI
   Workbox CLI adalah sebuah alat berupa kumpulan javascript yang dikembangkan oleh
   Google Developer agar website-nya bisa diakses walaupun dalam keadaan offline (jika
   sebelumnya website telah dibuka).
   Install dengan mengetik npm i -g workbox-cli pada Command Prompt, pastikan menjalankan
   CMD dalam mode Ran as Admin.

Panduan Membuat Situs Statis menjadi PWA

1. Persiapkan situs web yang sudah di-hosting secara online melalui HTTPS. Jika belum tersedia, Anda dapat menggunakan localhost..
2. Buatlah file manifest.json dan panggil file tersebut di dalam file index.html.
   Pastikan situs web sudah memiliki favicon (ikon persegi yang telah dibuat sebelumnya).
   Buatlah file baru di dalam folder yang sama dengan index.html dengan nama manifest.json dan isi dengan kode di bawah ini. Sesuaikan informasi yang diberikan dengan detail tentang situs web yang akan dijadikan PWA.

{
  "name": "Nama Situs",
  "short_name": "Nama Pendek Situs",
  "description": "Deskripsi Singkat Situs",
  "lang": "en-US",
  "dir": "ltr",
  "theme_color": "#414f57",
  "start_url": ".",
  "background_color": "#000",
  "display": "standalone",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "path/to/icons/72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "path/to/icons/512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Lalu memanggilnya menggunakan kode di bawah ini dan letakkan di atas tag

<link rel="manifest" href="/manifest.json">

3. Menambahkan Meta Tag di antara <head> <head>, untuk membantu browser mengenali
bahwa web kita adalah sebuah PWA

<meta name="Description" content=" Deskripsi Singkat Situs " />
<!-- Mendeklarasikan warna yang muncul pada address bar Chrome versi seluler -->
<meta name="theme-color" content="#414f57" />
<!-- Mendeklarasikan ikon untuk iOS -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Nama Situs" />
<link rel="apple-touch-icon" href="path/to/icons/128x128.png" />
<!-- Mendeklarasikan ikon untuk Windows -->
<meta name="msapplication-TileImage" content="path/to/icons/128x128.png" />
<meta name="msapplication-TileColor" content="#000000" />

4. Membuat Precache Service Workers,

• Pastikan telah menginstall package npm “Workbox CLI”
• lalu buat file bernama workbox-config.js, isikan kode kurang lebih seperti ini

module.exports = {
    globDirectory: './',
    globPatterns: [
        '**/*.{html,json,js,css,woff}'
    ],
    swDest: './sw.js',
    runtimeCaching: [{
        urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
        handler: 'NetworkFirst',
        options: {
            cacheName: 'images',
            expiration: {
                maxEntries: 10,
            },
        },
    }],
};

• globDirectory adalah lokasi root website.
• buka CMD di tempat ditaruhnya file diatas, tidak harus Ran as Admin.
• lalu eksekusikan perintah berikut ” workbox generateSW workbox-config.js “.
• akan ada file bernama sw.js, dan workbox-xxxxxx.js.
• upload ke directory yang sama dengan index.html.

5. Register sw.js di index.html,

• buka index.html, lalu isikan dengan kode berikut ini

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js');
        });
    }
</script>

– panggil dari index.html, di atas tag </body>

6. Untuk mengecek apakah website tersebut sudah support PWA atau belum, bisa
menggunakan menu Audit yang ada di Chrome Developer Tools.

Sekian

Kesimpulan:
Progressive Web Apps (PWA) adalah evolusi dari aplikasi web yang memberikan pengalaman pengguna yang lebih baik, lebih responsif, dan lebih mirip dengan aplikasi native. Dengan memanfaatkan teknologi web modern, Anda dapat membangun aplikasi web progresif yang kuat yang memberikan nilai tambah bagi pengguna Anda.