Đảm bảo dễ cài đặt

Pete LePage

Sự cố này chứa tệp kê khai web với các trường bắt buộc để khiến một Ứng dụng web có thể cài đặt.

Ứng dụng này cũng có một nút cài đặt bị ẩn theo mặc định.

Theo dõi sự kiện beforeinstallprompt

Khi trình duyệt kích hoạt sự kiện beforeinstallprompt, đó là chỉ báo cho biết ứng dụng web có thể được cài đặt và người dùng có thể thấy nút cài đặt. Sự kiện beforeinstallprompt được kích hoạt khi ứng dụng đáp ứng các tiêu chí về khả năng cài đặt.

Việc ghi lại sự kiện cho phép các nhà phát triển tuỳ chỉnh việc cài đặt và nhắc người dùng cài đặt khi họ cho rằng thời điểm tốt nhất.

  1. Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
  2. Thêm một trình xử lý sự kiện beforeinstallprompt vào đối tượng window.
  3. Lưu event dưới dạng biến toàn cục; chúng ta sẽ cần biến này sau để hiển thị lời nhắc.
  4. Hiện nút cài đặt.

Mã:

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent the mini-infobar from appearing on mobile.
  event.preventDefault();
  console.log('👍', 'beforeinstallprompt', event);
  // Stash the event so it can be triggered later.
  window.deferredPrompt = event;
  // Remove the 'hidden' class from the install button container.
  divInstall.classList.toggle('hidden', false);
});

Xử lý lượt nhấp vào nút cài đặt

Để hiển thị lời nhắc cài đặt, hãy gọi prompt() trên sự kiện beforeinstallprompt đã lưu. Việc gọi prompt() được thực hiện trong trình xử lý lượt nhấp vào nút cài đặt vì prompt() phải được gọi từ cử chỉ của người dùng.

  1. Thêm một trình xử lý sự kiện nhấp chuột cho nút cài đặt.
  2. Gọi prompt() trên sự kiện beforeinstallprompt đã lưu.
  3. Ghi lại kết quả của lời nhắc.
  4. Đặt sự kiện beforeinstallprompt đã lưu thành rỗng.
  5. Ẩn nút cài đặt.

Mã:

butInstall.addEventListener('click', async () => {
  console.log('👍', 'butInstall-clicked');
  const promptEvent = window.deferredPrompt;
  if (!promptEvent) {
    // The deferred prompt isn't available.
    return;
  }
  // Show the install prompt.
  promptEvent.prompt();
  // Log the result
  const result = await promptEvent.userChoice;
  console.log('👍', 'userChoice', result);
  // Reset the deferred prompt variable, since
  // prompt() can only be called once.
  window.deferredPrompt = null;
  // Hide the install button.
  divInstall.classList.toggle('hidden', true);
});

Theo dõi sự kiện cài đặt

Việc cài đặt ứng dụng web thông qua nút cài đặt chỉ là một cách mà người dùng có thể cài đặt ứng dụng đó. Họ cũng có thể sử dụng trình đơn của Chrome, thanh thông tin thu nhỏ và thông qua một biểu tượng trong thanh địa chỉ. Bạn có thể theo dõi tất cả các cách cài đặt này bằng cách theo dõi sự kiện appinstalled.

  1. Thêm một trình xử lý sự kiện appinstalled vào đối tượng window.
  2. Ghi lại sự kiện cài đặt vào Analytics hoặc cơ chế khác.

Mã:

window.addEventListener('appinstalled', (event) => {
  console.log('👍', 'appinstalled', event);
  // Clear the deferredPrompt so it can be garbage collected
  window.deferredPrompt = null;
});

Tài liệu đọc thêm

Xin chúc mừng, ứng dụng của bạn hiện có thể cài đặt!

Dưới đây là một số điều bổ sung mà bạn có thể làm: