Kích hoạt lời nhắc cài đặt từ PWA của bạn

Thêm giao diện cài đặt trong ứng dụng

Trước tiên, hãy thêm một số giao diện vào ứng dụng để cho biết rằng người dùng có thể cài nó. Ví dụ:

<button id="install" hidden>Install</button>

Chúng ta đang đặt thuộc tính hidden cho nút, vì nếu người dùng truy cập ứng dụng bằng trình duyệt không thể cài nó, chúng ta không muốn giao diện cài đặt hiển thị. Tiếp theo, chúng ta sẽ xem cách làm cho nút chỉ hiển thị trên các trình duyệt hỗ trợ cài PWA cục bộ.

Lắng nghe beforeinstallprompt

Ngay khi trình duyệt xác định rằng nó có thể cài ứng dụng, nó sẽ kích hoạt sự kiện beforeinstallprompt trong phạm vi toàn cục Window.

Trong mã ứng dụng chính, chúng ta sẽ lắng nghe sự kiện này:

// main.js

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

Trình xử lý sự kiện ở đây làm ba việc:

• Gọi preventDefault() trên sự kiện. Điều này ngăn trình duyệt hiển thị giao diện cài đặt riêng của nó.
• Lấy tham chiếu đến đối tượng sự kiện được truyền vào handler. Đây là một thể hiện của BeforeInstallPromptEvent, và nó sẽ cho phép chúng ta nhắc người dùng cài ứng dụng.
• Hiện giao diện cài đặt trong ứng dụng của chúng ta bằng cách bỏ thuộc tính hidden khỏi nút.

Lưu ý rằng sự kiện sẽ không được kích hoạt nếu:

• PWA đã được cài sẵn.
• Ứng dụng không vượt qua tiêu chí cài đặt PWA.
• PWA không thể cài trên thiết bị hiện tại (ví dụ do thiếu quyền).

Kích hoạt lời nhắc cài đặt

Tiếp theo, chúng ta cần thêm một trình xử lý click cho nút cài đặt trong ứng dụng:

// main.js

installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

Biến installPrompt đã được khởi tạo bằng đối tượng BeforeInstallPromptEvent trong trình xử lý sự kiện beforeinstallprompt của chúng ta. Nếu vì bất kỳ lý do gì installPrompt chưa được khởi tạo, chúng ta sẽ không làm gì.

Ngược lại, chúng ta gọi phương thức prompt() của nó. Điều này sẽ hiển thị lời nhắc cài đặt, và trả về một Promise mà kết quả của nó cho biết ứng dụng đã được cài hay chưa. Cụ thể, thuộc tính outcome của nó là "accepted" nếu người dùng chọn cài ứng dụng, hoặc "dismissed" nếu họ đóng lời nhắc.

Bằng cách nào đi nữa, chúng ta phải đặt lại trạng thái sau khi gọi prompt(), vì chúng ta chỉ có thể gọi nó một lần cho mỗi thể hiện BeforeInstallPromptEvent. Vì vậy, chúng ta đặt lại biến installPrompt và ẩn nút cài đặt مرة nữa.

Phản hồi khi ứng dụng được cài

Tùy theo trình duyệt và nền tảng, trình duyệt vẫn có thể cung cấp giao diện riêng để cài ứng dụng. Điều này có nghĩa là ứng dụng vẫn có thể được cài mà không đi qua giao diện cài đặt trong ứng dụng của chúng ta. Nếu điều này xảy ra, chúng ta muốn tắt giao diện cài đặt trong ứng dụng, nếu không nó sẽ hiển thị trong một ứng dụng đã được cài rồi.

Để làm điều này, chúng ta có thể lắng nghe sự kiện appinstalled, sự kiện này được kích hoạt trong phạm vi toàn cục Window khi ứng dụng đã được cài:

// main.js

window.addEventListener("appinstalled", () => {
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

Phản hồi khi các ứng dụng đặc thù nền tảng được cài

Nếu bạn có một phiên bản ứng dụng đặc thù nền tảng cùng với một ứng dụng web, và bạn muốn cá nhân hóa trải nghiệm ứng dụng web tùy theo việc ứng dụng đặc thù nền tảng đã được cài hay chưa. Bạn có thể không muốn mời người dùng cài PWA nếu họ đã có sẵn ứng dụng đặc thù nền tảng, và/hoặc bạn có thể muốn mời họ chuyển sang ứng dụng đặc thù nền tảng để xem nội dung.

Việc này có thể được xử lý bằng phương thức Navigator.getInstalledRelatedApps(), phương thức cho phép bạn phát hiện các ứng dụng nền tảng liên quan đã được cài (hoặc PWA) và phản hồi phù hợp.

Ví dụ:

const relatedApps = await navigator.getInstalledRelatedApps();

// Search for a specific installed platform-specific app
const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

if (psApp) {
  // Update UI as appropriate
}

Phương thức này cũng có thể được kết hợp với beforeinstallprompt để ẩn giao diện cài đặt của trình duyệt dựa trên sự tồn tại của một ứng dụng đặc thù nền tảng:

window.addEventListener("beforeinstallprompt", async (event) => {
  const relatedApps = await navigator.getInstalledRelatedApps();

  // Search for a specific installed platform-specific app
  const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

  if (psApp) {
    event.preventDefault();
    // Update UI as appropriate
  }
});

Xem thêm

• Making PWAs installable
• Sự kiện beforeinstallprompt
• Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn trên web.dev (2021)
• Lời nhắc cài đặt trên web.dev (2022)