CODEWITHSUNDEEP
javascripthtmliosprogressive-web-apps
Uriel Katz
Uriel Katz

Reputation: 329

PWA in iOS 12 no longer re-executing Javascript when re-opening app

I have a PWA which essentially re-directs the user to the messages app on open using Javascript. With the roll-out of iOS 12 and changes to PWAs, the webpage no longer re-initializes and executes the Javascript when it is re-opened or when it re-gains focus. Instead, it now loads the previously saved state and won't re-execute the Javascript.

Does anyone have any ideas around this? Can I force Javascript execution every time the PWA has focus? Can I force the page to re-initialize on load?

Sample code below:

<html manifest="ios/scripts/offline.manifest">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SMS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="SMS">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<link rel="apple-touch-icon" sizes="180x180" href="ios/img/[email protected]">
<link rel="apple-touch-startup-image" href="ios/img/LaunchImage-1125@3x~iphoneX-portrait_1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
</head>

<body>
<script>
        if (window.navigator.standalone) {
            document.write('<a id="url" href="sms:1111111111" name="url"></a>');
            var e = document.getElementById('url');
            var ev = document.createEvent('MouseEvents');
            ev.initEvent('click', true, true);
            e.dispatchEvent(ev);
        }
</script>
</body>

</html>

Upvotes: 4

Views: 1732

Answers (1)

Rony
Rony

Reputation: 434

I encountered the same problem. Here is what I did to force PWA to execute javascript at start:

  1. Register page visibility event in your javascript that is embedded between tags.
  2. Within the event handler of page visibility event, execute javascript that you want to execute when subsequently open PWA.

Any time PWA is opened, it will trigger page visibility event and execute your script.

Example: in your html file:

<script>
registerPageVisibility()
</script>


function registerPageVisibility() {
   
    let hidden;
    let visibilityChange;
    if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
        hidden = 'hidden';
        visibilityChange = 'visibilitychange';
    } else if (typeof document.msHidden !== 'undefined') {
        hidden = 'msHidden';
        visibilityChange = 'msvisibilitychange';
    } else if (typeof document.webkitHidden !== 'undefined') {
        hidden = 'webkitHidden';
        visibilityChange = 'webkitvisibilitychange';
    }
    window.document.addEventListener(visibilityChange, () => {
        if (!document[hidden]) {
            //put your script here and it will be execute everytime when PWA is opened.
            
        }
    });
}

Upvotes: 3

Related Questions