Add pull to refresh in standalone PWA

saltiresocial a free speech social media network

Proxybunker

Super Admin
Staff member
Head Administrator
As you all know apple has disabled the pull to refresh for PWA's that are in standalone mode this quick Java code will enable the pull to refresh and it is very simple to add into Sngine

This was not created by myself and more information can be found here

let's get started

This guide assumes that you have your site working as a PWA already


Step 1
open: content/themes/default/templates
and find the head.tpl file

Step 2
Add this code just under
<meta name="version" content="{$system['system_version']}">

Code:
JavaScript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.22/index.umd.min.js" integrity="sha512-djmgTiVR15A/7fON+ojDzFYrRsfVkzQZu07ZVb0zLC1OhA2iISP39Lzs05GqSKF0vPjkLzL5hBC+am6po7dKpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Step 3
Login to your website and navigate to the admin panel now open
design and scroll down till you see Footer Custom JavaScript and add this code to it

Code:
JavaScript:
const ptr = PullToRefresh.init({
  mainElement: 'body',
  onRefresh() {
    window.location.reload();
    distThreshold: 60
    distMax: 10
  }
 
});

now click Save Changes at the bottom and you are done

pulltorefresh.gif
 
Back
Top