Create PWA and manipulate "History Back Button"

[erich.wanker]

 

 

 

Hi,

i added my UniGUI App with PWA -Basics (Progressive Web App) and manipulate the "BackButton" of Android and Windows Browser - so the user has a App-Feeling ..

WORKS PERFECT :-)

IF someone can make this Basic BETTER - please post ;-)

 

 

Injection in Servermodule-CustomCSS:

</style>
<script>
  if('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js');
  };

window.addEventListener('load', function() {
  window.history.pushState({ noBackExitsApp: true }, '')
})

window.addEventListener('popstate', function(event) {
  if (event.state && event.state.noBackExitsApp) {
    window.history.pushState({ noBackExitsApp: true }, '')
  }
})  
  
</script>
<style>

 

 

In Servermodule-CustomMeta:

<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.webmanifest">

 

 

 

in Webserver-Root Folder:

Create sw.js

self.addEventListener('install', async event => {
  console.log('install event')
});

self.addEventListener('fetch', async event => {
  console.log('fetch event')
});

 

 

create manifest.webmanifest

{
  "name": "UniGui PWA",
  "short_name": "UniGui PWA",
  "start_url": "/mo.dll",            **** the Name of your UniGui DLL 
  "display": "standalone",
  "background_color": "#000000",
  "description": "UniGui PWA",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "./mo.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

 

in MailForm -> ClientEvents -> Extevents: Windows.onClick .. (dirty but works:  writes a lot of clicks in the history..)

function window.click(sender, eOpts)
{
  window.history.pushState({ noBackExitsApp: true }, '')
}

 

At last - create a Image in Webserver-Root Folder: mo.png (144x144 px)

 

Should work fine :-)

Erich

 

[molla2005b]

perfect!
thanks you for sharing

[erich.wanker]

 

supplement..

i use this "dirty" solution to disable the "Chrome-history-back" Funktion (Desktop AND Mobile)

In my mainform - the first user click starts a ClientEvent-ExtEvent and overfills the History :

function click(sender, eOpts)
{   
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
  window.history.pushState({ noBackExitsApp: true }, '');
}

 

 

[x11]

On 6/17/2019 at 4:41 PM, erich.wanker said:

"start_url": "/mo.dll", **** the Name of your UniGui DLL

 

On 6/17/2019 at 4:41 PM, erich.wanker said:

in Webserver-Root Folder:

 

and if i use stand-alone application?

[x11]

On 6/17/2019 at 4:41 PM, erich.wanker said:

in MailForm -> ClientEvents -> Extevents: Windows.onClick

in Touch (mobile) there is no such event

[x11]

up

[erich.wanker]

hi x11

 

you can use a onClick-ExtEvent of a button or somwthing else ... works also ..

the security-system of a modern browser blocks this dirty solution - if you just want to start this code without user-interaction ..

this means: the user must make a physical touch (or click with a mouse) - the event is fireing .. and in the event where is just the above code .. 

 

 

[x11]

On 6/17/2019 at 4:41 PM, erich.wanker said:

"strt_url": "/mo.dll", **** the Name of your UniGui DLL

and if standalone app?

 

in browser:

Quote

http://192.168.1.5:8077/m

 

[x11]

On 6/17/2019 at 4:41 PM, erich.wanker said:

create manifest.webmanifest

Where should this file be located for standalone app?

[x11]

.webmanifest not loading - Access denied:  401 Unauthorized

[x11]

Access denied: manifest.webmanifest

[x11]

---

[alfr]

Perhaps an option how to disable back swipe gesture. (The safari solution at least again shows the same page again.)

You Should Try this solution in two way :

1) CSS only fix for Chrome/Firefox

 html, body {
    overscroll-behavior-x: none;
}

2) JavaScript fix for Safari

if (window.safari) {
  history.pushState(null, null, location.href);
  window.onpopstate = function(event) {
      history.go(1);
  };
}

Over time, Safari will implement overscroll-behavior-x and we'll be able to remove the JS hack

https://stackoverflow.com/questions/30636930/disable-web-page-navigation-on-swipeback-and-forward

[Tokay]

Hi, dear library users and support team. I have same issue. I've try to add the manifest and get the 'Access denied: manifest.webmanifes' message in html. Please get for us solution for this issue or better fix the issue in source.

[alfr]

You should be able to do a manifest in json format - https://developer.mozilla.org/en-US/docs/Web/Manifest

If you want to create an IOS Splash screen - look at this link https://appsco.pe/developer/splash-screens