Giters

EddyVerbruggen / Toast-PhoneGap-Plugin

:beers: A Toast popup plugin for your fancy Cordova app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Toast message not displayed in iOS 10

sumedh-plenarea opened this issue · comments

commented

I am using this plugin in my Ionic app and recently, we have upgraded our device to iOS 10. Previously, everything was working fine and now after the upgrade, toast messages are displayed only at the time when I move the app from foreground to background or vice versa. Not sure about this behaviour but this is kinda weird.

Expected behaviour

Toast message should be displayed when Ionic app is in foreground and not at the time when it moves to background or vice versa.

Actual behaviour

Toast message displayed at the time where I put app to background or foreground.

I'm seeing this behaviour on

  • iOS device

Hardware models

iPhone 6s plus

OS versions

iOS 10

I'm not a dummy, so I've checked these

  • It happens on a fresh Cordova CLI project as well.
  • I'm waiting for deviceready to fire.
  • My JavaScript has no errors (window.onerror catches nothing).

So how can we reproduce this?

Try to display the toast message on any event (eg. login) and check the above scenario.

commented

For ios 10 simulators:
for your ionic project you can update your content security policy like below code

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data: *; default-src gap://ready file://* *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

you need to add gap://ready file://* *; in your default src

commented

Just tried with the following code in index.html: all fine. Copy it over your own to verify:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
        content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="app">
  <div id="deviceready" class="blink">
    <p class="event listening">Connecting to Device</p>
    <p class="event received">Device is Ready</p>
    <button onclick="tap()">tap</button>
  </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
  function tap() {

  window.plugins.toast.showWithOptions(
                {
                    message: "hey there",
                    duration: "long",
                    position: "bottom",
          styling: {
            backgroundColor: '#66B2FF',
            textColor: '#000000',
          }
                },
                //Success callback
                function(args) {
          console.log('cordovaToast: ' + JSON.stringify(args));
          if (args && args.event == "touch") {
            alert("touched");
          }
                },
                function(error) {
                    log('cordovaToast error: ', error);
                }
    );
  }
</script>
</body>
</html>

excuse the lousy formatting..