Ứng dụng web tiến bộ: Nhắc nhở và đo lường lượt cài đặt

1. Chào mừng bạn

Trong lớp học này, bạn sẽ lấy một PWA có thể cài đặt hiện có và thêm một nút cài đặt tuỳ chỉnh trong ứng dụng. Đây là lớp học lập trình thứ năm trong loạt lớp học lập trình đi kèm cho hội thảo về Ứng dụng web tiến bộ. Lớp học lập trình trước đó là Từ thẻ đến thanh tác vụ. Còn 3 lớp học lập trình nữa trong loạt lớp học lập trình này.

Kiến thức bạn sẽ học được

  • Tạo nút cài đặt PWA tuỳ chỉnh trong ứng dụng

Những điều bạn cần biết

  • JavaScript

Bạn cần có

2. Bắt đầu thiết lập

Bắt đầu bằng cách sao chép hoặc tải mã khởi đầu cần thiết để hoàn tất lớp học lập trình này:

Nếu bạn sao chép repo, hãy đảm bảo rằng bạn đang ở nhánh pwa04--prompt-measure-install. Tệp zip cũng chứa mã cho nhánh đó.

Cơ sở mã này yêu cầu Node.js 14 trở lên. Sau khi có mã, hãy chạy npm ci từ dòng lệnh trong thư mục mã để cài đặt tất cả các phần phụ thuộc mà bạn sẽ cần. Sau đó, hãy chạy npm start để khởi động máy chủ phát triển cho lớp học lập trình.

Tệp README.md của mã nguồn cung cấp nội dung giải thích cho tất cả các tệp được phân phối. Ngoài ra, sau đây là các tệp hiện có chính mà bạn sẽ sử dụng trong suốt lớp học lập trình này:

Tệp khoá

  • js/main.js – Tệp JavaScript của ứng dụng chính

3. Thiết lập nút Cài đặt

Trước khi thêm lời nhắc cài đặt và ghi lại các sự kiện cài đặt, bạn cần thực hiện một số bước thiết lập. Trước tiên, hãy tạo tệp js/lib/install.js rồi thêm đoạn mã sau:

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';
    }
  }
}

Sau đó, trong js/main.js ở cuối sự kiện DOMContentLoaded, hãy thêm mã sau:

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

Giải thích

Mã này thiết lập một lớp Cài đặt sẽ được dùng trong bước tiếp theo và đính kèm lớp đó vào ứng dụng đang chạy.

4. Thêm trình nghe lời nhắc cài đặt

Để sử dụng nút kích hoạt cài đặt nhằm thực sự kích hoạt PWA cài đặt, bạn cần nắm bắt lời nhắc cài đặt. Khi cài đặt, bạn cần đặt lại lời nhắc cài đặt đã ghi lại. Để làm như vậy, hãy viết mã để thực hiện những việc sau trong constructor trong lớp Install trong js/lib/install.js:

Ghi lại lời nhắc cài đặt

  • Theo dõi sự kiện beforeinstallprompt trên window.
  • Ngăn sự kiện kích hoạt
  • Chụp câu lệnh
  • Hiện trình kích hoạt nút cài đặt

Đặt lại lời nhắc khi cài đặt

  • Theo dõi sự kiện appinstalled trên window.
  • Đặt lại câu lệnh đã chụp
  • Ẩn trình kích hoạt nút cài đặt

5. Kích hoạt lượt cài đặt từ nút trong ứng dụng

Sau khi lời nhắc được ghi lại, nút cài đặt của PWA cần có khả năng kích hoạt lời nhắc đó. Để thực hiện việc này, hãy thêm nội dung sau vào lớp Install trong js/lib/install.js:

  • Một phương thức async để kích hoạt lượt cài đặt mà
    • Sử dụng câu lệnh đã ghi lại để nhắc cài đặt
    • await lựa chọn của người dùng đối với lời nhắc
    • Đặt lại câu lệnh
    • Ẩn nút cài đặt nếu người dùng chấp nhận lời nhắc cài đặt
  • Thêm trình nghe sự kiện click vào nút cài đặt trong constructor của lớp để gọi trình kích hoạt cài đặt.

6. Xin chúc mừng!

Bạn vừa tìm hiểu cách kích hoạt quá trình cài đặt PWA từ nút cài đặt trong ứng dụng của riêng mình.

Lớp học lập trình tiếp theo trong loạt lớp học này là Nâng cao PWA