This is needed for iOS users who save your UNA site to their home screen. When they do this, they add your site to their home screen and they can open it like a native app. However, there is no built-in "pull to refresh." So, you need to add it. @Andrey Yasko - UNA might want to add something like this to core. It's a key PWA feature, especially for iOS. Side note, and something else to add eventually: There's also a way (I don't know how) to add a loading PWA icon (which UNA) doesn't have. So when you open the app from the iOS home screen, you see the site's icon first.

Pull to refresh JS:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var startY;
    var dist;
    var threshold = 100; // Minimum distance user needs to pull down to trigger refresh
    var isRefreshing = false;


    var refreshText = document.createElement('div');
    refreshText.textContent = 'Release to refresh';
    refreshText.style.position = 'absolute';
    refreshText.style.top = '10px'; // Adjust as needed for vertical position
    refreshText.style.left = '50%';
    refreshText.style.transform = 'translateX(-50%)';
    refreshText.style.fontFamily = 'Arial, sans-serif';
    refreshText.style.fontSize = '14px';
    refreshText.style.color = '#333';
    refreshText.style.zIndex = '1000'; // Ensure it's above other content
    refreshText.style.opacity = '0';
    document.body.appendChild(refreshText);


    window.addEventListener('touchstart', function(e) {
        if (document.documentElement.scrollTop === 0 && !isRefreshing) {
            var touchobj = e.changedTouches[0];
            startY = touchobj.clientY;
            dist = 0;
            refreshText.style.opacity = '0'; // Ensure text is hidden initially
        } else {
            startY = undefined; // Reset startY if not at the top
        }
    }, { passive: true });


    window.addEventListener('touchmove', function(e) {
        if (startY === undefined) return;


        var touchobj = e.changedTouches[0];
        var deltaY = touchobj.clientY - startY;
        dist = deltaY;


        if (deltaY >= threshold && !isRefreshing) {
            refreshText.style.opacity = '1'; // Show release message
        } else {
            refreshText.style.opacity = '0'; // Hide message if not pulling enough
        }
    }, { passive: true });


    window.addEventListener('touchend', function(e) {
        if (startY !== undefined && dist >= threshold && !isRefreshing) {
            isRefreshing = true;
            refreshText.textContent = 'Refreshing...'; // Change text to indicate refreshing
            refreshText.style.opacity = '1'; // Keep text visible during refresh


            location.reload(); // Reload the page immediately
        } else {
            refreshText.style.opacity = '0'; // Hide the refresh text on touch end
        }
        startY = undefined; // Reset startY after touch ends
    }, { passive: true });
});
</script>