Jump to content

Create PWA and manipulate "History Back Button"


erich.wanker

Recommended Posts

 

 

 

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

 

  • Like 4
Link to comment
Share on other sites

 

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 }, '');
}

 

 

Link to comment
Share on other sites

  • 1 year later...
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?

Link to comment
Share on other sites

  • 2 weeks later...

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 .. 

 

 

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

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

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...