Verified Commit ab7a8b56 authored by Konstantin Kopper's avatar Konstantin Kopper
Browse files

Update companion web application (closes #35)

parent 871a8720
Pipeline #15452 passed with stages
in 5 minutes and 32 seconds
......@@ -31,6 +31,7 @@ Use the following template:
### Fixed
* Autocompletion no longer triggered on `<?`.
* Debugger initialises internal code mapping only after saving the executed file.
* Companion web application correctly lists browser support for WebSocket connections. See #35.
## [2.0.3][] - 2019-05-28
### Added
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -56,7 +56,7 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
......
......@@ -21,7 +21,7 @@
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link disabled" href="/"><i class="fas fa-home"></i></a>
<a class="nav-item nav-link" href="/"><i class="fas fa-home"></i></a>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Help</a>
......@@ -54,16 +54,21 @@
<thead>
<tr>
<th scope="col"></th>
<th scope="col"><i class="fab fa-chrome"></i></th>
<th scope="col"><i class="fab fa-edge"></i></th>
<th scope="col"><i class="fab fa-firefox"></i></th>
<th scope="col"><i class="fab fa-opera"></i></th>
<th scope="col"><i class="fab fa-safari"></i></th>
<th scope="col"><a href="https://www.google.com/chrome/" target="_blank" rel="noreferrer noopener"><i
class="fab fa-chrome" title="Google Chrome"></i></a></th>
<th scope="col"><a href="https://microsoft.com/edge/" target="_blank" rel="noreferrer noopener"><i
class="fab fa-edge" title="Microsoft Edge"></i></a></th>
<th scope="col"><a href="https://www.mozilla.org/firefox/new/" target="_blank" rel="noreferrer noopener"><i
class="fab fa-firefox-browser" title="Mozilla Firefox"></i></a></th>
<th scope="col"><a href="https://www.opera.com/" target="_blank" rel="noreferrer noopener"><i
class="fab fa-opera" title="Opera"></i></a></th>
<th scope="col"><a href="https://www.apple.com/safari/" target="_blank" rel="noreferrer noopener"><i
class="fab fa-safari" title="Safari"></i></a></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Sharing API</th>
<th scope="row"><a href="#api">Sharing API</a></th>
<td><i class="fas fa-check" style="color: green"></i></td>
<td><i class="fas fa-check" style="color: green"></i></td>
<td><i class="fas fa-check" style="color: green"></i></td>
......@@ -71,9 +76,9 @@
<td><i class="fas fa-check" style="color: green"></i></td>
</tr>
<tr>
<th scope="row">WebSockets</th>
<th scope="row"><a href="#ws">WebSockets</a></th>
<td><i class="fas fa-check" style="color: green"></i></td>
<td><i class="fas fa-check" style="color: green"></i></td>
<td><i class="fas fa-times" style="color: red"></i></td>
<td><i class="fas fa-check" style="color: orange"></i></td>
<td><i class="fas fa-check" style="color: green"></i></td>
<td><i class="fas fa-times" style="color: red"></i></td>
......@@ -83,16 +88,7 @@
<p>You can choose your preferred mechanism in the <a href="/settings">Settings</a> page.</p>
<h2>The sharing API</h2>
<!--
<div class="alert alert-success" role="alert">
This approach works with every browser.
</div>
<div class="alert alert-warning" role="alert">
Using the API requires an active internet connection.
</div>
-->
<h2 id="api">The sharing API</h2>
<p>
Established for file exchange between multiple users, it does not matter whether you query the API using
......@@ -111,39 +107,11 @@
drawbacks, as discussed in the next section.
</p>
<!--
<p>
Established for file exchange between multiple users, the API is also suitable to exchange files between the IDE
and pseuCo.com. This solution has one drawback
</p>
<table class="table">
<thead>
<tr>
<th scope="col"><i class="fas fa-plus"></i> Advantages</th>
<th scope="col"><i class="fas fa-minus"></i> Drawbacks</th>
</tr>
</thead>
<tbody>
<tr>
<td>Works with every browser.</td>
<td>Requires an internet connection.</td>
</tr>
</tbody>
</table>
-->
<h2>A WebSockets based approach</h2>
<!--
<div class="alert alert-success" role="alert">
This approach does not require an active internet connection and is hence fully local.
</div>
-->
<h2 id="ws">A WebSockets based approach</h2>
<p>
The problem with any local solution is security: Since pseuCo.com is served over HTTPS and all modern browsers
restrict unsecure connections from secure environments, every local service provided by the IDE must also use
restrict insecure connections from secure environments, every local service provided by the IDE must also use
HTTPS. However, this would require a signed certificate, and since the IDE only operates on
<code>localhost</code>, who would provide a signed certificate for that hostname?
</p>
......@@ -153,7 +121,7 @@
</div>
<p>
Nevertheless, it turned out that some browsers allow unsecure connections using WebSockets. Hence the IDE
Nevertheless, it turned out that most browsers allow insecure connections using WebSockets. Hence the IDE
provides a WebSocket server, from which pseuCo.com is able to retrieve files from and upload files too, which
are then opened in the IDE.
</p>
......@@ -161,9 +129,9 @@
<h4>Browser settings</h4>
<p>
As you can conclude from the compatibility table above, Chrome and Opera inherently support this solution,
while both Edge and Safari seem to not support it at all. Only Firefox requires you to take action by
specifically enabling required features:
As you can conclude from the compatibility table above, Chrome, Edge and Opera inherently support this solution,
while Safari seems to not support it at all. Only Firefox requires you to take action by specifically enabling
required features:
</p>
<ol>
<li>Open <code>about:config</code>.</li>
......@@ -176,7 +144,7 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
......
......@@ -64,7 +64,7 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -21,7 +21,7 @@
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link disabled" href="/"><i class="fas fa-home"></i></a>
<a class="nav-item nav-link" href="/"><i class="fas fa-home"></i></a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Help</a>
......@@ -201,7 +201,7 @@
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment