pwa
Advertisements

Darmediatama.comTutorial 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

Advertisements

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.

Advertisements
  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

Advertisements
<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,

Advertisements
  • 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.

Advertisements

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.

Advertisements

Informasi Terkait

Top 10 Downloads

  1. Download Adobe Photoshop CC 2020 Full Crack Update 6 Maret 2024 (786,463)
  2. Download CorelDRAW 2022 Full Crack 64 Bit 6 Maret 2024 (460,183)
  3. Download IDM Full Crack Tanpa Registrasi Aktif Selamanya Terbaru 6 Maret 2024 (27,616)
  4. Download CorelDRAW X7 Full Crack 32/64Bit Terbaru 6 Maret 2024 (5,204)
  5. Download SketchUp 2020 Full Crack Terbaru 7 Maret 2024 (2,963)
  6. Download SketchUp Pro 2018 Terbaru 27 Februari 2024 (1,730)
  7. CorelDRAW Graphics Suite X7 17.6.0.1021 Full Version 03 Maret 2024 (1,405)
  8. Download Adobe Premiere CC Pro 2020 Full Version 27 Februari 2024 (1,249)
  9. Adobe Photoshop CC 2015 5.17.0.1 Full Version 27 Februari 2024 (1,127)
  10. Internet Download Manager 6.39 Build 8 Full Crack 27 Februari 2024 (1,013)