Safari iPhone - A problem occurred with this webpage so it was reloaded #487

lorol · 2019-04-16T20:59:54Z

Expected behavior

To work

Actual behavior

On Safari Browser, the page reloads and "A problem occurred with this webpage so it was reloaded" warning is shown on each attempt to send "help" or "connect" by the enter button of iphone virtual keyboard

Steps to reproduce

Use nodejs as described as server side and iPhone on same network to act as a client browser (Safari)
https://github.com/hallard/WebSocketToSerial#test-web-page-without-esp8266
You need to update the js and css to latest terminal versions otherwise on ios it will not even show the keyboard. Also on nodejs modules and code use mime-types instead of mime

Same behavior is on a real device .

Browser and OS

Safari ios 12.2 Iphone 6

This nice jquery teminal works fine on above project when connecting with PC and various browsers. except on latest Safari on iPhone. Tried with old and new releases of your code. Suspecting something related to insecure http because another browser (Azul) app. works fine on same phone.

On the other side, the Safari works fine on your demo online terminal (https)

jcubic · 2019-04-17T11:09:34Z

Not sure if I will be able to test it, I have access to BrowserStack and I can test iPhone, there are few option that I can test to run local node.js in BrowserStack. Will try to check if on this setup the library is also broken.

lorol · 2019-04-17T13:44:58Z

Thanks @jcubic for taking care.
I reset my iPhone network parameters to make sure nothing is wrong there.
Also I did a generic "terminal replacement" test to rule out base security restrictions.
See the code below that works on same iPhone/browser/node server, while jquery.terminal throws "A problem occurred with this webpage so it was reloaded"

<!DOCTYPE html>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="initial-scale=1.0">
</head>
<body>

<input id="stt" type="button" value="Connect"/> <input id="dtt" type="button" value="Disonnect"/>
<pre id="log" name="output" style="color: white; background-color: black; width:350px; height:400px; overflow:auto; font-size:x-small;" ></pre>
<input id="txt" style="color: yellow; background-color: black; width:145px;">
<input id="btn" type="button" value="Enter"/>

<script>
  var ws;
  
  stt.addEventListener('click', function(e) {  
	ws = new WebSocket('ws://' + document.location.host + '/ws');
    ws.onopen = function() {
      log('CONNECTED');              
    }; 
    ws.onmessage = function(e) {
      log(':' + e.data);      
    };
    ws.onclose = function(e) {
      log('DISCONNECTED: code = ' + e.code);
    };    
  });
  
  dtt.addEventListener('click', function(e) {    
     ws.close();
  });  
  
    btn.addEventListener('click', function(e) {    
    ws.send(txt.value);  
  });
  
  function log(msg) {
    document.getElementById('log').innerText += msg + '\n';
	document.getElementById('log').scrollTop = 9999999;
  }
</script>

</body>
</html>

jcubic · 2019-04-17T21:25:14Z

Sorry but this project is not maintained see hallard/WebSocketToSerial#2 it will be hard to debug someone else old library. Last commit was year ago. How can I be sure that this project even work for your case. And what is ESP8266 device?

lorol · 2019-04-17T22:06:38Z

Hi, indeed, the project I use is abandoned, It is up to you to close the ticket or dig a bit more. No problem. Regardless of ESP8266 specific of the project, the test web page emulation link https://github.com/hallard/WebSocketToSerial#test-web-page-without-esp8266 uses your terminal w/o ESP device, just by a node "server" instead. PC + chrome and Mozilla work fine on it, while iPhone' Safari doesn't. When I use a simple ws test page above in the phone instead, then it works again. That's it, It could be wrong implementation or so ... just reporting.

jcubic · 2019-04-17T22:23:37Z

This is really broken project, not package.json for node and server give errors when running

TypeError: mime.lookup is not a function

and running from link give HTTPS Cors errors: https://cdn.rawgit.com/hallard/WebSocketToSerial/master/webdev/index.htm

jcubic · 2019-04-17T22:25:51Z

You need to create better example that I can test, some public web socket server will be best, that will not give errors, that is broken when using with terminal on iPhone/Safari. This project is just some garbage, and it use terminal from 2016.

jcubic · 2019-04-17T22:29:22Z

Can you write maybe code that use jQuery Terminal latest version like the one your provided here and use web sockets that is crashing. That would be helpful and will not close such issue even if I can't test it. But probably will be if the websockets is public like with some service that give free node.js hosting like https://glitch.com/

lorol · 2019-04-19T15:08:27Z

Hi, the issue was caused by usage of jQuery(document).ready at the index.htm of this old project. iOS / Safari has problem with it. Obviously I need to learn more of your examples and do it from scratch.

jcubic · 2019-04-19T17:49:19Z

So this is solved, right? as for jQuery on ready try using shortcut $(function() {}) if that project you've mentioned is not yours you can try to create PR to patch the issue if that $(fn) works.

lorol · 2019-04-19T18:10:49Z

Yes, I will try to change terminal's html to use $(function() {}) instead of .ready. You can close the ticket. The project there is obsolete and I will do the whole thing differently for my needs, including the server side websocket on ESP8266 cheap IoT device - it has already a good library. If you are curious, here is the best short guide: https://tttapa.github.io/ESP8266/Chap14%20-%20WebSocket.html

lorol changed the title ~~Safari iPhone - http reloading, on other browser and https works~~ Safari iPhone - A problem occurred with this webpage so it was reloaded Apr 19, 2019

jcubic closed this as completed Apr 19, 2019

jcubic added the Invalid label Apr 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Safari iPhone - A problem occurred with this webpage so it was reloaded #487

Safari iPhone - A problem occurred with this webpage so it was reloaded #487

lorol commented Apr 16, 2019 •

edited

Loading

jcubic commented Apr 17, 2019

lorol commented Apr 17, 2019

jcubic commented Apr 17, 2019

lorol commented Apr 17, 2019 •

edited

Loading

jcubic commented Apr 17, 2019 •

edited

Loading

jcubic commented Apr 17, 2019 •

edited

Loading

jcubic commented Apr 17, 2019

lorol commented Apr 19, 2019

jcubic commented Apr 19, 2019

lorol commented Apr 19, 2019

Safari iPhone - A problem occurred with this webpage so it was reloaded #487

Safari iPhone - A problem occurred with this webpage so it was reloaded #487

Comments

lorol commented Apr 16, 2019 • edited Loading

Expected behavior

Actual behavior

Steps to reproduce

Browser and OS

jcubic commented Apr 17, 2019

lorol commented Apr 17, 2019

jcubic commented Apr 17, 2019

lorol commented Apr 17, 2019 • edited Loading

jcubic commented Apr 17, 2019 • edited Loading

jcubic commented Apr 17, 2019 • edited Loading

jcubic commented Apr 17, 2019

lorol commented Apr 19, 2019

jcubic commented Apr 19, 2019

lorol commented Apr 19, 2019

lorol commented Apr 16, 2019 •

edited

Loading

lorol commented Apr 17, 2019 •

edited

Loading

jcubic commented Apr 17, 2019 •

edited

Loading

jcubic commented Apr 17, 2019 •

edited

Loading