Progressive Web App: Mendorong & Mengukur Penginstalan

1. Selamat Datang

Dalam lab ini, Anda akan mengambil PWA yang dapat diinstal dan menambahkan tombol penginstalan dalam aplikasi kustom. Ini adalah codelab kelima dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Dari Tab ke Taskbar. Ada tiga codelab lagi dalam seri ini.

Yang akan Anda pelajari

  • Membuat tombol penginstalan PWA dalam aplikasi kustom

Yang perlu Anda ketahui

  • JavaScript

Yang akan Anda butuhkan

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa04--prompt-measure-install. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • js/main.js - File JavaScript aplikasi utama

3. Menyiapkan Tombol Instal

Sebelum menambahkan perintah penginstalan dan merekam peristiwa penginstalan, ada beberapa penyiapan yang perlu dilakukan. Pertama, buat file js/lib/install.js dan tambahkan kode berikut:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

Kemudian, di js/main.js di bagian bawah peristiwa DOMContentLoaded, tambahkan kode berikut:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

Penjelasan

Kode ini menyiapkan class Penginstalan yang akan digunakan pada langkah berikutnya, dan melampirkannya ke aplikasi yang sedang berjalan.

4. Menambahkan Pemroses Dialog Penginstalan

Untuk menggunakan pemicu tombol penginstalan agar benar-benar memicu penginstalan PWA, Anda harus merekam perintah penginstalan. Setelah diinstal, Anda perlu mereset perintah penginstalan yang diambil. Untuk melakukannya, tulis kode untuk melakukan hal berikut di constructor dalam class Install di js/lib/install.js:

Dialog penginstalan pengambilan gambar

  • Dengarkan peristiwa beforeinstallprompt di window.
  • Mencegah peristiwa diaktifkan
  • Merekam perintah
  • Menampilkan pemicu tombol penginstalan

Reset perintah saat penginstalan

  • Dengarkan peristiwa appinstalled di window.
  • Mereset perintah yang direkam
  • Menyembunyikan pemicu tombol penginstalan

5. Memicu Penginstalan dari Tombol Dalam Aplikasi

Setelah dialog ditangkap, tombol penginstalan PWA harus dapat memicunya. Untuk melakukannya, tambahkan kode berikut ke class Install di js/lib/install.js:

  • Metode async untuk memicu penginstalan yang
    • Menggunakan perintah yang diambil untuk meminta penginstalan
    • await pilihan pengguna atas perintah
    • Reset perintah
    • Menyembunyikan tombol instal jika pengguna menerima perintah penginstalan
  • Tambahkan pemroses peristiwa click ke tombol instal di constructor class yang memanggil pemicu penginstalan.

6. Selamat!

Anda baru saja mempelajari cara memicu penginstalan PWA dari tombol penginstalan dalam aplikasi Anda sendiri.

Codelab berikutnya dalam seri ini adalah Meningkatkan Kemampuan PWA Anda