I'm trying to implement a pull-to-refresh function in my mobile PWA.

Since I want to avoid using touchStart and touchEnd to determine if the user pulled down the page, so I thought about using an intersectionObserver.

My approach is "if page wrapper is 50% in view, fire refresh function".

( pullToRefresh = () => { 

  const wrapper = document.querySelector('.wrapper');

  const options = {
    root: null,
    rootMargin: "0px 0px 0px 0px",
    threshold: 0,
  };

  wrapperObserver = new IntersectionObserver (function (entries, observer) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0.5) {
        console.log('wrapper in view')
      } else if (entry.intersectionRatio <= 0.5) {
        console.log("wrapper out of view")
        location.reload(true)
      }
    });
  }, options);

  wrapperObserver(wrapper);

})();

The const wrapper is in view from the beginning and always only 100vh high.

However, I can't get it to fire. (I'm using the iOS simulator to test it.) Thanks for any tips!