Membuat Progressive Web App (PWA) dengan React.js

IQBAL FARHAN SYUHADA

13 Jun 2024

Membuat Progressive Web App (PWA) dengan React.js adalah cara yang bagus untuk membuat aplikasi web yang cepat, dapat diandalkan, dan berfungsi secara offline. Berikut adalah langkah-langkah untuk membuat PWA dengan React.js menggunakan Create React App (CRA).

Langkah 1: Instalasi Create React App

Jika belum menginstal Create React App, instal dulu:

npx create-react-app my-pwa-app
cd my-pwa-app

Langkah 2: Konfigurasi Service Worker

Create React App sudah menyediakan dukungan untuk PWA dengan service worker. Anda hanya perlu sedikit konfigurasi untuk mengaktifkannya.

1. Buka file src/index.js dan ubah unregister() menjadi register().

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// Ganti unregister() menjadi register() agar service worker aktif
serviceWorkerRegistration.register();

2. Buka file src/service-worker.js. Anda akan menemukan kode service worker yang sudah dihasilkan oleh Create React App. Anda dapat menyesuaikan ini jika diperlukan, tetapi konfigurasi default sudah cukup baik untuk banyak aplikasi.

Langkah 3: Tambahkan Manifest

PWA memerlukan file manifest untuk menyediakan metadata tentang aplikasi web Anda (seperti nama, ikon, dll.).

1. Buka file public/manifest.json dan sesuaikan sesuai kebutuhan Anda. Misalnya:

{
  "short_name": "PWA",
  "name": "My Progressive Web App",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Langkah 4: Menguji PWA

1. Jalankan aplikasi Anda:

npm start

2. Buka aplikasi di browser (misalnya, Google Chrome) dan buka Developer Tools (Ctrl+Shift+I atau Cmd+Option+I).
3. Pergi ke tab "Application".
4. Di sana Anda akan melihat bagian "Service Workers" di mana Anda dapat memeriksa apakah service worker sudah terdaftar dan aktif.
5. Anda juga dapat menguji kemampuan offline dengan memutuskan koneksi internet dan memastikan aplikasi tetap berfungsi.

Langkah 5: Deploy PWA

Untuk menguji PWA sepenuhnya, Anda perlu menyajikan aplikasi melalui HTTPS. Anda dapat menggunakan layanan seperti Vercel, Netlify, atau GitHub Pages untuk hosting. Sebagai contoh, berikut adalah langkah untuk deploy ke GitHub Pages:

1. Tambahkan homepage di package.json:

"homepage": "https://username.github.io/repository-name"

2. Instal gh-pages sebagai devDependency:

npm install --save-dev gh-pages

3. Tambahkan skrip deploy di package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

4. Deploy aplikasi:

npm run deploy

Setelah deployment selesai, aplikasi Anda akan tersedia di URL yang ditentukan di homepage.

Langkah 6: Penyesuaian Tambahan

Anda dapat menambahkan lebih banyak fitur PWA seperti push notifications, background sync, atau caching lebih canggih sesuai kebutuhan aplikasi Anda. Dokumentasi Create React App dan Workbox (library yang digunakan oleh Create React App untuk service workers) dapat memberikan lebih banyak informasi tentang fitur-fitur ini.

Dengan langkah-langkah di atas, Anda telah berhasil membuat PWA menggunakan React.js dan Create React App. Aplikasi Anda sekarang dapat diinstal di perangkat pengguna dan berfungsi secara offline.