Parcourir la source

Show warning if browser does not support WebAssembly (#887)

Danilo Bargen il y a 6 ans
Parent
commit
318ca27a94
4 fichiers modifiés avec 24 ajouts et 5 suppressions
  1. 1 1
      .gitignore
  2. 13 2
      index.html
  3. 7 0
      public/js/compat.js
  4. 3 2
      src/sass/sections/_noscript.scss

+ 1 - 1
.gitignore

@@ -5,7 +5,7 @@
 .idea/
 
 # Generated files
-js/
+/js/
 dist/generated/
 dist/*.tar.gz
 public/css/*.css

+ 13 - 2
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>

+ 7 - 0
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';
+}

+ 3 - 2
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;