onappinstalled - for when an app is installed.

Chrome gần đây (ít nhất là trong 2017) đã triển khai window.onappinstalled event. Nó được kích hoạt khi người dùng cài đặt ứng dụng web tiến bộ thông qua API Add to Homescreen (hàm prompt () trên sự kiện được gửi qua sự kiện onbeforeinstallprompt) or giờ đây quan trọng hơn thông qua phương thức thủ công của Add to Homescreen.

Đây là một bổ sung rất hữu ích vì nó cho phép bạn thấy sự tương tác trên dấu nhắc so với những người sử dụng các biểu ngữ hệ thống hoặc các nút menu để cài đặt một ứng dụng web tiến bộ.

Tôi đã thêm nó vào Airhorner để bạn có thể thấy nó hoạt động nếu DevTools được đính kèm. Đoạn mã dưới đây quản lý onbeforeinstallprompt onappinstalled - trong trường hợp này tôi sử dụng onbeforeinstallprompt để trì hoãn lời nhắc cài đặt cho nút tùy chỉnh và onappinstalled để xóa giao diện người dùng và thực hiện một số phân tích cơ bản.

const Installer = function(root) {
  let promptEvent;

  const install = function(e) {
    if(promptEvent) {
      promptEvent.prompt();
      promptEvent.userChoice
        .then(function(choiceResult) {
          // The user actioned the prompt (good or bad).
          // good is handled in 
          promptEvent = null;
          ga('send', 'event', 'install', choiceResult);
          root.classList.remove('available');
        })
        .catch(function(installError) {
          // Boo. update the UI.
          promptEvent = null;
          ga('send', 'event', 'install', 'errored');
          root.classList.remove('available');
        });
    }
  };

  const installed = function(e) {
    promptEvent = null;
    // This fires after onbeforinstallprompt OR after manual add to homescreen.
    ga('send', 'event', 'install', 'installed');
    root.classList.remove('available');
  };

  const beforeinstallprompt = function(e) {
    promptEvent = e;
    promptEvent.preventDefault();
    ga('send', 'event', 'install', 'available');
    root.classList.add('available');
    return false;
  };

  window.addEventListener('beforeinstallprompt', beforeinstallprompt);
  window.addEventListener('appinstalled', installed);

  root.addEventListener('click', install.bind(this));
  root.addEventListener('touchend', install.bind(this));
};

About Me: Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.