Cara Membuat Popup Install PWA Sendiri di WordPress (Custom Prompt PWA Modern)

Pendahuluan

Progressive Web App (PWA) adalah teknologi modern yang memungkinkan situs web Anda memiliki tampilan dan pengalaman seperti aplikasi mobile. Salah satu fitur menarik dari PWA adalah kemampuannya untuk di-install ke layar utama smartphone pengguna, membuat akses ke situs Anda jauh lebih cepat dan nyaman seperti membuka aplikasi.

Di artikel ini, kita akan belajar cara membuat popup install PWA custom yang muncul di bagian bawah website WordPress Anda. Popup ini tidak hanya tampil menarik, tapi juga hanya muncul sekali saja, dan hilang permanen setelah aplikasi di-install. Cocok digunakan bersamaan dengan plugin Super PWA di WordPress.

Apa Itu Custom Install Prompt?

Secara default, sebagian browser seperti Chrome akan menampilkan prompt instalasi PWA secara otomatis. Namun, tampilan standar ini kurang fleksibel dan kadang hanya muncul sekali saja. Dengan custom prompt yang kita buat sendiri, kita bisa:

• Mengatur desain dan posisi popup sesuai keinginan
• Menambahkan branding seperti nama website dan ikon sendiri
• Menampilkan popup kapan saja selama PWA belum di-install
• Menghilangkannya otomatis setelah pengguna meng-install aplikasi
• Memberikan pengalaman UX yang lebih baik

Persiapan: Install Plugin Super PWA

Untuk membuat website WordPress Anda menjadi PWA, langkah pertama adalah mengaktifkan dukungan PWA melalui plugin. Salah satu plugin terbaik dan ringan untuk ini adalah Super PWA.

Langkah-langkahnya:

1. Masuk ke dashboard WordPress Anda
2. Pergi ke menu Plugins > Add New
3. Cari plugin Super PWA
4. Klik Install Now, lalu aktifkan plugin tersebut
5. Setelah aktif, buka menu Super PWA > Settings
6. Atur nama aplikasi, ikon, splash screen, dll.

Sekarang situs Anda sudah menjadi PWA dan siap untuk menambahkan fitur install custom prompt.

Menambahkan Kode Custom Install Prompt ke WordPress

Berikut adalah kode lengkap HTML, CSS, dan JavaScript yang bisa Anda tambahkan ke situs WordPress Anda.

Langkah 1: Tambahkan ke Footer

Cara paling mudah adalah dengan menggunakan plugin Insert Headers and Footers:

1. Install plugin Insert Headers and Footers
2. Masuk ke menu Settings > Insert Headers and Footers
3. Tempelkan kode berikut di bagian Scripts in Footer

Berikut kodenya:

<!-- Mulai Custom Prompt Install PWA -->
<style>
  #installPrompt {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #007bff;
    color: white;
    padding: 12px 16px;
    font-family: sans-serif;
    font-size: 15px;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  #installPrompt .message {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
  }

  #installPrompt .message i {
    background: white;
    color: #007bff;
    border-radius: 50%;
    font-style: normal;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }

  #installPrompt .message span {
    font-weight: 500;
  }

  #installPrompt button {
    background: white;
    color: #007bff;
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-top: 10px;
  }

  #installPrompt button i {
    font-style: normal;
    margin-right: 6px;
  }

  @media (min-width: 480px) {
    #installPrompt button {
      margin-top: 0;
    }
  }
</style>

<div id="installPrompt">
  <div class="message">
    <i>✔</i>
    <span>Install <strong>Seoyandira</strong> untuk akses lebih cepat</span>
  </div>
  <button id="btnInstall"><i>⬇</i> Pasang</button>
</div>

<script>
  let deferredPrompt;
  const installPrompt = document.getElementById('installPrompt');
  const btnInstall = document.getElementById('btnInstall');

  const isInstalled = window.matchMedia('(display-mode: standalone)').matches || localStorage.getItem('pwa_installed') === 'yes';

  window.addEventListener('beforeinstallprompt', (e) => {
    if (isInstalled) return;

    e.preventDefault();
    deferredPrompt = e;
    installPrompt.style.display = 'flex';
  });

  btnInstall.addEventListener('click', () => {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();

    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted install');
        localStorage.setItem('pwa_installed', 'yes');
        installPrompt.style.display = 'none';
      } else {
        console.log('User dismissed install');
      }
      deferredPrompt = null;
    });
  });

  if (isInstalled) {
    installPrompt.style.display = 'none';
  }
</script>
<!-- Selesai Custom Prompt Install PWA -->

Penjelasan Singkat

• #installPrompt adalah elemen HTML yang menjadi sticky popup di bagian bawah
• Tombol Pasang akan memicu event beforeinstallprompt
• Setelah pengguna klik dan menyetujui, popup akan disembunyikan
• Status disimpan di localStorage agar tidak muncul ulang

Kelebihan Tutorial Ini

• Popup hanya muncul jika memang belum pernah install
• Popup hilang selamanya setelah pengguna menyetujui instalasi
• Desain bersih dan profesional, cocok untuk semua tema
• Bisa digunakan bersamaan dengan plugin PWA apapun
• Tidak mengganggu performa website karena hanya dijalankan satu kali

Penutup

Dengan menambahkan custom prompt install PWA ini ke website Anda, Anda memberikan pengalaman terbaik bagi pengguna mobile. Mereka bisa mengakses situs Anda secepat membuka aplikasi di smartphone tanpa harus buka browser.

Teknologi PWA ini juga bagus untuk SEO, meningkatkan retensi pengguna, dan membantu website Anda tampil lebih profesional.

Jika Anda belum yakin bagaimana cara memasangnya, atau butuh bantuan dalam membuat website Anda mendukung PWA secara penuh, Anda bisa menghubungi tim profesional di Seoyandira.com untuk bantuan pembuatan website, optimasi SEO, dan pengembangan fitur PWA yang modern.