无法跟踪 pwa 添加到主屏幕事件

Question

我已经在我的 index.html 文件中创建了服务工作者文件和清单文件并注册了服务工作者文件。我想跟踪有多少用户可以看到 "Add to home screen button" 以及有多少用户点击了 "Add to home screen" 。我的申请已经满足 pwa 的所有标准。我在服务文件中使用了 "beforeinstallprompt" 事件，但当显示 "Add to home screen" 时它没有触发。

我的 service worker 代码如下。

var doCache = true;
var version = 481;
// Name our cache
var CACHE_NAME = 'health-cache-v='+version;
var filesToCache = [
'index.html'
];

let deferredPrompt;

self.addEventListener('beforeinstallprompt', (event) => { 
 onsole.log('add to home screen popup show'); 
event.userChoice.then(choiceResult => {
if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the add to home screen popup'); 
  } else {
    console.log('User dismissed the add to home screen popup');

  }     
});
});


// Delete old caches that are not our current one!
self.addEventListener("activate", event => {
  const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
  caches.keys()
    .then(keyList =>
      Promise.all(keyList.map(key => {
      if (!cacheWhitelist.includes(key)) {
        console.log('Deleting cache: ' + key)
        return caches.delete(key);
      }
    }))
   )
  );
 });


 self.addEventListener('install', function(event) {
 if (doCache) {
   event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {       
        cache.addAll(filesToCache);         
          console.log('cached');
    })
   );
  }
 });

 self.addEventListener('fetch', function(event) { 
  if (doCache) {         
    event.respondWith(
      caches.match(event.request).then(function(response) {
          return response || fetch(event.request);
      })
    );
   }
  });

Answer 1

添加以下代码以检查默认 windows 提示，然后阻止该默认提示并在需要时随时触发该事件。

var deferredPrompt; // to store event

// check for windows default prompt and preventing it 
window.addEventListener('beforeinstallprompt',(event)=>{

  console.log('Default a2hs triggered' ,event);
  // here preventing default prompt
  event.preventDefault();
  // storing that event
  deferredPrompt = event;
  return false;
})


// now lets says you want to trigger it when addToHomeScreen() invokes as 
button.addEventListener('click', addToHomeScreen());

function addToHomeScreen() {
  addToHomeScreen.style.display = 'block';
  if (deferredPrompt) {
  // here prompting that event
    deferredPrompt.prompt();  // --> you missed this code

    deferredPrompt.userChoice.then(function(choiceResult) {
      console.log(choiceResult.outcome);

      if (choiceResult.outcome === 'dismissed') {
        console.log('User cancelled installation');
      } else {
        console.log('User added to home screen');
      }
    });

    deferredPrompt = null;
  }

希望对您有所帮助。

无法跟踪 pwa 添加到主屏幕事件

Unable to track pwa add to home screen events

javascript

angularjs

service-worker

a2hs