Swipe to refresh for browsers

SwipeToRefresh.js

// ==UserScript==
// @name         Swipe to Refresh
// @namespace    https://jumpkick.io/
// @version      1.0.0
// @author       Miles Hingston
// @include      *
// @noframes
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const img = document.createElement('img');
    img.src =  `data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgd2lkdGg9IjIzMDguNTcxNSIKICAgIGhlaWdodD0iMjI1MS40Mjg1IgogICAgdmlld0JveD0iMCAwIDIzMDguNTcxNSAyMjUxLjQyODUiPgogICAgPGcKICAgICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzQuMjg1NjQ1LDEyNjEuOTI1NikiPgogICAgICAgIDxlbGxpcHNlCiAgICAgICAgc3R5bGU9ImZpbGw6I2Y5ZjlmOSIKICAgICAgICBjeD0iMTIyOC41NzE0IgogICAgICAgIGN5PSItMTM2LjIxMTQxIgogICAgICAgIHJ4PSIxMTU0LjI4NTgiCiAgICAgICAgcnk9IjExMjUuNzE0MiIgLz4KICAgICAgICA8cGF0aAogICAgICAgIGQ9Im0gMTk5NC40Mjg1LDE4LjA3NDMxNSBxIDAsNSAtMSw3IC02NCwyNjcuOTk5OTk1IC0yNjcuOTk5OSw0MzQuNDk5OTk1IC0yMDQsMTY2LjUgLTQ3OCwxNjYuNSAtMTQ2LDAgLTI4Mi41LC01NSAtMTM2LjUsLTU1IC0yNDMuNSwtMTU3IGwgLTEyOSwxMjkgcSAtMTksMTkgLTQ1LDE5IC0yNiwwIC00NSwtMTkgLTE5LC0xOSAtMTksLTQ1IGwgMCwtNDQ3Ljk5OTk5NSBxIDAsLTI2IDE5LC00NS4wMDAwMDAyIDE5LC0xOC45OTk5OTk4IDQ1LC0xOC45OTk5OTk4IGwgNDQ4LDAgcSAyNiwwIDQ1LDE4Ljk5OTk5OTggMTksMTkuMDAwMDAwMiAxOSw0NS4wMDAwMDAyIDAsMjYgLTE5LDQ1IGwgLTEzNywxMzYuOTk5OTk1IHEgNzEsNjYgMTYxLDEwMiA5MCwzNiAxODcsMzYgMTM0LDAgMjUwLC02NSAxMTYsLTY1IDE4NiwtMTc5IDExLC0xNyA1MywtMTE2Ljk5OTk5NTIgOCwtMjIuOTk5OTk5OCAzMCwtMjIuOTk5OTk5OCBsIDE5MS45OTk5LDAgcSAxMywwIDIyLjUsOS40OTk5OTk4IDkuNSw5LjUgOS41LDIyLjUwMDAwMDIgeiBtIDI1LC04MDAuMDAwMDM1IDAsNDQ4IHEgMCwyNiAtMTksNDUgLTE5LDE5IC00NSwxOSBsIC00NDcuOTk5OSwwIHEgLTI2LDAgLTQ1LC0xOSAtMTksLTE5IC0xOSwtNDUgMCwtMjYgMTksLTQ1IGwgMTM4LC0xMzggcSAtMTQ4LC0xMzcgLTM0OSwtMTM3IC0xMzQsMCAtMjUwLDY1IC0xMTYsNjUgLTE4NiwxNzkgLTExLDE3IC01MywxMTcgLTgsMjMgLTMwLDIzIGwgLTE5OSwwIHEgLTEzLDAgLTIyLjUsLTkuNSAtOS41LC05LjUgLTkuNSwtMjIuNSBsIDAsLTcgcSA2NSwtMjY4IDI3MCwtNDM0LjUgMjA1LC0xNjYuNSA0ODAsLTE2Ni41IDE0NiwwIDI4NCw1NS41IDEzOCw1NS41IDI0NSwxNTYuNSBsIDEyOS45OTk5LC0xMjkgcSAxOSwtMTkgNDUsLTE5IDI2LDAgNDUsMTkgMTksMTkgMTksNDUgeiIKICAgICAgICBpZD0icGF0aDMzMzgiIC8+CiAgICA8L2c+CiAgICA8L3N2Zz4=`;
    img.style='width: 48px; height: 48px; z-index: 999; position: fixed; left: calc(50% - 24px); top: -48px; border: 0';
    document.body.appendChild(img);

    let startY, lastY, topOfPage;

    window.addEventListener('touchstart', function(e)
    {
        if(e.changedTouches.length === 1)
        {
            startY = lastY = e.changedTouches[0].pageY;
            topOfPage = window.scrollY === 0;
        }
    });

    window.addEventListener('touchmove', function(e)
    {
        if(e.changedTouches.length === 1 && topOfPage && e.changedTouches[0].pageY > lastY)
        {
            lastY = e.changedTouches[0].pageY;
            const pageY = -48 + (lastY - startY);

            if(pageY <= 128)
            {
                img.style.top = `${pageY}px`;
            }
        }
    });

    window.addEventListener('touchend', function(e)
    {
        if(topOfPage && e.changedTouches.length === 1 && e.changedTouches[0].pageY - startY >= 128)
        {
            location.reload();
        }

        else
        {
            img.style.top = '-48px';
        }
    });
})();