CSS

/* START - CSS settings for PWA navigation */
    
.arrow {
  width: 40px;
  height: 40px;
  background-color: var(--bs-body-bg);
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  font-size: 30px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.arrow.left, .arrow.right {
    margin-left: 10px;
    margin-right: 10px;
    align-content: center;
    position: fixed;
    top: 50%;
}
.arrow.right {
    position: fixed;
    right: 0;
}

/* END - CSS settings for PWA navigation */

JS

The below code does rely on serviceWorker but that’s typically present in all “modern” browsers

$(document).ready(function() {
  // Check if serviceWorker API is available
  if ('serviceWorker' in navigator) {
    // The browser supports service workers
    console.log('This web app supports service workers.');

    // Check if the app is installed (as PWA)
    if (window.matchMedia('(display-mode: standalone)').matches) {
      console.log('This web app is running as a Progressive Web App.');
      
      // Add HTML for navigation arrows
      $('body').append('<div class="navigation"><div class="arrow left">&lt;</div><div class="arrow right">&gt;</div></div>');

      // Handle click on left arrow
      $('.arrow.left').click(function() {
        history.back(); // Go back in history
      });

      // Handle click on right arrow
      $('.arrow.right').click(function() {
        history.forward(); // Go forward in history
      });
    } else {
      console.log('This web app is not running as a Progressive Web App.');
    }
  } else {
    console.log('This web browser does not support service workers.');
  }
});

Again, this is basic and more of a POC. Other functionality can be added in a similar way if you’d like it.

/**
* Determine the mobile operating system.
* This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*/

function getMobileOperatingSystem()
{
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  // Windows Phone must come first because its UA also contains "Android"
  if (/windows phone/i.test(userAgent))
  {
    return  "Windows Phone";
  }

  if (/android/i.test(userAgent))
  {
    return  "Android";
  }

  if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream)
  {
    return  "iOS";
  }

  return  "unknown";
  // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android
}

Once you’re in that rabbit hole, it’s impossible to get out of it.

The scroll-top button is located on the bottom right.

That now means the page scroller (the button that appears bottom right) will be in the way, although on thinking about it, we already have a page navigation when you are in the topic, so no point in having another.

Based on the above point made, I have now disabled the scroll to top button inside topics.

For example

.arrow.left, .arrow.right {
    margin-left: 10px;
    margin-right: 10px;
    align-content: center;
    position: fixed;
    bottom: 120px;
}

That now means the page scroller (the button that appears bottom right) will be in the way, although on thinking about it, we already have a page navigation when you are in the topic, so no point in having another. That would be a minor alteration to the scroll top function to have it not appear on posts.

Additionally, is there any reason that they are in the middle but not close to the bottom? That is usually where the fingers will be

/* START - CSS settings for PWA navigation */
    
.arrow {
  width: 40px;
  height: 40px;
  background-color: var(--bs-body-bg);
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  font-size: 30px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.arrow.left, .arrow.right {
    margin-left: 10px;
    margin-right: 10px;
    align-content: center;
    position: fixed;
    top: 50%;
}
.arrow.right {
    position: fixed;
    right: 0;
}

/* END - CSS settings for PWA navigation */

As you can see from the developer view, the width: 100%; sits over the top of the topic meaning it cannot be clicked or tapped. A workaround here should be to set z-index: -1; on the navigation class, but whilst that resolves the ordering issue, it means the navigation buttons no longer work as they sit under the content.

CSS

/* START - CSS settings for PWA navigation */
    
.arrow {
  width: 40px;
  height: 40px;
  background-color: var(--bs-body-bg);
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  font-size: 30px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.arrow.left, .arrow.right {
    margin-left: 10px;
    margin-right: 10px;
    align-content: center;
    position: fixed;
    top: 50%;
}
.arrow.right {
    position: fixed;
    right: 0;
}

/* END - CSS settings for PWA navigation */

JS

The below code does rely on serviceWorker but that’s typically present in all “modern” browsers

$(document).ready(function() {
  // Check if serviceWorker API is available
  if ('serviceWorker' in navigator) {
    // The browser supports service workers
    console.log('This web app supports service workers.');

    // Check if the app is installed (as PWA)
    if (window.matchMedia('(display-mode: standalone)').matches) {
      console.log('This web app is running as a Progressive Web App.');
      
      // Add HTML for navigation arrows
      $('body').append('<div class="navigation"><div class="arrow left">&lt;</div><div class="arrow right">&gt;</div></div>');

      // Handle click on left arrow
      $('.arrow.left').click(function() {
        history.back(); // Go back in history
      });

      // Handle click on right arrow
      $('.arrow.right').click(function() {
        history.forward(); // Go forward in history
      });
    } else {
      console.log('This web app is not running as a Progressive Web App.');
    }
  } else {
    console.log('This web browser does not support service workers.');
  }
});

Again, this is basic and more of a POC. Other functionality can be added in a similar way if you’d like it.