I was shared some neat code that adds refresh functionality when swiping down on a mobile app and wanted to share it here as well. Credit to Neil Manchester for this snippet:
//Add a pull down to refresh page on touch devices
let startY;
let startTime;
let holdTimeout;
const holdDuration = 1500; // Hold for 1500 milliseconds (1.5 seconds)
const swipeThreshold = 50; // Require a swipe of at least 50 pixels
document.addEventListener('touchstart', function(event) {
startY = event.touches[0].clientY;
startTime = new Date().getTime();
// Start a timeout to check if the user holds the swipe
holdTimeout = setTimeout(function() {
holdTimeout = null; // Reset holdTimeout if the hold is completed
}, holdDuration);
}, false);
document.addEventListener('touchmove', function(event) {
const currentY = event.touches[0].clientY;
const elapsedTime = new Date().getTime() - startTime;
if (startY < currentY && (currentY - startY) > swipeThreshold && elapsedTime > holdDuration) {
// If swipe down is detected, swipe distance is more than threshold, and hold duration is met
location.reload(); // Refresh the page
}
// Clear the hold timeout if user lifts their finger before completing the hold
if (holdTimeout && elapsedTime < holdDuration) {
clearTimeout(holdTimeout);
}
}, false);
document.addEventListener('touchend', function() {
// Clear the hold timeout if the swipe is interrupted
if (holdTimeout) {
clearTimeout(holdTimeout);
}
}, false);