Pull to refresh

iOS?

Because when I set the Android images in Studio for PWA when it installs it sets the icon and on start (splash) the image I installed.

On Android, PWA uses whatever browser you installed it from. So example, if I install from Chrome, it opens and uses chrome. Same with Firefox. Both have pull to refresh.

Another reason I hate iOS 😂😂😂 (plus, I hack every aspect of my devices lol - from custom look and feel to full root).

Yes, iOS. 🙂

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>

Updated script. Now it ensures the refresh only triggers when scroll position is at top.

Yes, I have that set up. Unfortunately, Apple still wants to do things a little differently. Apple looks for a start up splash screen.

Here’s a forum talking a little about it.

https://forums.developer.apple.com/forums/thread/733490

And this is a generator:

https://progressier.com/pwa-icons-and-ios-splash-screen-generator

The key seems to be ensuring there is: apple-touch-startup-image link 

It sounds like it’s a pain because there has to be one image per device size… but, maybe UNA could pick the top three or four sizes and that could be good enough.

The experience now isn’t awful, it’s a blank screen as the site loads. But, it feels more like an app when you see the splash icon screen first.

Good old Apple/iOS insisting on doing things differently.

Examples:

My UNA site loading:

Another site of mine loading that uses a different CMS: