Is it possible to handle swipe gestures in PWA application? - progressive-web-apps

Question

I'm creating a PWA, ASP server side and JS client side.
Users interact nicely with it using buttons.
The boss ask me if we can implement something like "scroll between app screen" or "perform some operation (edit, delete..) on elements" using the swipe gesture, as many native apps do.
Is there an easy way? or any way anyhow?
Thanks!

Answer 1

There are a couple of libraries that can help implement touch gestures for PWAs - have a look at Hammerjs:
https://hammerjs.github.io/
Your question is fairly generic though, there might be better solutions but that's just one off the top of my head

Answer 2

Have a drawer component in a PWA that can swipe to close using similar JS as below. Made an example that logs out the direction of a swipe / gesture here: https://jsfiddle.net/jamiesmith/e9gndqpc/3/
Below checks a function called ignoreSwipe so we can add a class of ignoreSwipe to some element(s) we specifically want to ignore gestures from.
Some standards below makes use of:
TouchEvent.touches - https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches
TouchEvent.touchstart & touchmove - https://developer.mozilla.org/en-US/docs/Web/API/Touch_events
let _xDown, _yDown;
document.querySelector('div.app')
.addEventListener(
'touchstart',
handleTouchStart,
false
);
document.querySelector('div.app')
.addEventListener(
'touchmove',
handleTouchMove,
false
);
function ignoreSwipe(event) {
// if some touches come from elements with ignoreswipe class > ignore
return Array.from(event.touches).some((t) =>
t.target.classList.contains('noswipe')
);
}
function handleTouchStart(event) {
if (ignoreSwipe(event)) {
_xDown = undefined;
_yDown = undefined;
return;
}
const firstTouch = event.touches[0];
_xDown = firstTouch.clientX;
_yDown = firstTouch.clientY;
}
function handleTouchMove(event) {
if (!_xDown || !_yDown) {
return;
}
const xUp = event.touches[0].clientX;
const yUp = event.touches[0].clientY;
const xDiff = _xDown - xUp;
const yDiff = _yDown - yUp;
if (Math.abs(xDiff) > Math.abs(yDiff)) {
/*most significant*/
if (xDiff > 0) {
/* left swipe */
console.log('app: left swipe ', true);
} else {
/* right swipe */
console.log('app: right swipe ', true);
}
} else {
if (yDiff > 0) {
/* up swipe */
console.log('app: up swipe ', true);
} else {
/* down swipe */
console.log('app: down swipe ', true);
}
}
/* reset values */
_xDown = null;
_yDown = null;
}