6 年之前 · 318ca27a94
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@
 
															 .idea/
														
 
															 # Generated files
														
 
															-js/
														
 
															+/js/
														
 
															 dist/generated/
														
 
															 dist/*.tar.gz
														
 
															 public/css/*.css
														
--- a/index.html
+++ b/index.html
@@ -59,14 +59,24 @@
 
															 <body class="{{ ctrl.statusClass }}" ng-class="{expanded: ctrl.expandStatusBar}">
														
 
															     <img src="img/bg.jpg?v=[[VERSION]]" aria-label="Background image: Blurred photo of a mountain" id="background-image" draggable="false">
														
 
															-    <noscript>
														
 
															-        <img id="logo-noscript" src="img/logo.svg?v=[[VERSION]]"/>
														
 
															+    <noscript class="compat">
														
 
															+        <img class="logo-compat" src="img/logo.svg?v=[[VERSION]]"/>
														
 
															         <div>
														
 
															             <h2>Error: JavaScript not supported</h2>
														
 
															             <p>Please enable JavaScript in your browser to be able to use Threema Web.</p>
														
 
															         </div>
														
 
															     </noscript>
														
 
															+    <div class="compat wasm" style="display: none;">
														
 
															+        <img class="logo-compat" src="img/logo.svg?v=[[VERSION]]"/>
														
 
															+        <div>
														
 
															+            <h2>Error: Browser not supported</h2>
														
 
															+            <p>You are using a browser without WebAssembly support. Please
														
 
															+            upgrade to the latest version of a
														
 
															+            <a href="https://threema.ch/faq/web_requirements">supported browser</a>.</p>
														
 
															+        </div>
														
 
															+    </div>
														
 
															+
														
 
															     <div id="main-wrapper" ng-cloak ng-class="{wide: ctrl.wide()}">
														
 
															         <header>
														
 
															             <h1 id="title" aria-label="Threema Web Logo">
														
@@ -140,6 +150,7 @@
 
															     <!-- App -->
														
 
															     <script src="app.bundle.js?v=[[VERSION]]"></script>
														
 
															+    <script src="js/compat.js?v=[[VERSION]]"></script>
														
 
															 </body>
														
 
															 </html>
														
--- a/public/js/compat.js
+++ b/public/js/compat.js
@@ -0,0 +1,7 @@
 
															+if (typeof WebAssembly === "object" && typeof WebAssembly.instantiate === "function") {
														
 
															+    console.debug('Compat: WebAssembly is supported');
														
 
															+} else {
														
 
															+    console.error('Compat: WebAssembly is NOT supported');
														
 
															+    // Show warning
														
 
															+    document.querySelector('.compat.wasm').style = 'inherit';
														
 
															+}
														
--- a/src/sass/sections/_noscript.scss
+++ b/src/sass/sections/_noscript.scss
@@ -1,4 +1,4 @@
 
															-noscript {
														
 
															+.compat {
														
 
															     div {
														
 
															         display: block;
														
 
															         margin: 16px auto 0;
														
@@ -6,9 +6,10 @@ noscript {
 
															         padding: 16px;
														
 
															         width: 50%;
														
 
															         text-align: center;
														
 
															+        line-height: 1.5em;
														
 
															     }
														
 
															-    #logo-noscript {
														
 
															+    .logo-compat {
														
 
															         display: block;
														
 
															         margin: 16px auto;
														
 
															         min-width: 100px;