Merge pull request #327 from dwyl/optimise-js-issue-#325

PR: Optimise `JS` issue #325
dwyl · Mar 7, 2023 · e3a4554 · e3a4554
2 parents 4ae03e4 + ebe20c7
commit e3a4554
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,18 +1,17 @@
-name: deploy to Github Pages
+name: Deploy to Github Pages
 on:
   push:
     branches: [ main ]
 
-
 permissions:
   contents: write
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-
 
       - name: Install Flutter
         uses: subosito/flutter-action@v2
@@ -22,7 +21,7 @@ jobs:
       - name: Install dependencies
         run: flutter pub get
 
-      # See stackoverflow.com/questions/74164386/flutter-web-shows-blank-page-on-github-deployment.
+      # See stackoverflow.com/questions/74164386/flutter-web-shows-blank-page-on-github-deployment
       - name: Install and Build 
         run: flutter build web --release --web-renderer html
 
@@ -31,3 +30,4 @@ jobs:
         with:
           branch: gh-pages # The branch the action should deploy to.
           folder: ./build/web # The folder the action should deploy.
+
diff --git a/.gitignore b/.gitignore
@@ -44,4 +44,4 @@ app.*.map.json
 /android/app/release
 
 # Coverage files
-coverage
+coverage
diff --git a/web/index.html b/web/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <base href="$FLUTTER_BASE_HREF">
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="A new Flutter project.">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
   <!-- iOS meta tags & icons -->
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -22,35 +23,59 @@
     // Version injected by flutter build, do not touch.
     var serviceWorkerVersion = null;
   </script>
-  <!-- Flutter init JS code -->
-  <script src="flutter.js" defer></script>
   <style>
     /* unminify.com */
     body{inset:0;overflow:hidden;margin:0;padding:0;position:fixed}
     #loading{align-items:center;background-color:#354046;display:flex;flex-direction:column;justify-content:center;height:100%;width:100%}
-    #loading h1{color:#f2f2f2;font-family:'Open Sans',sans-serif;font-size:30px;font-weight:300;line-height:32px;margin-top:20px;text-align:center}
+    #loading h1{color:#f2f2f2;font-family:'Open Sans',sans-serif;font-size:46px;font-weight:300;line-height:32px;margin-top:20px;text-align:center}
+    button{display:inline-block;font-size:42px;padding:.4em .7em;color:#FFF;background-color:#4bc0a9;text-align:center;text-shadow: 2px 2px 3px #354046; cursor: pointer}
   </style>
 </head>
 <body>
   <div id="loading">
-    <img src="icons/Icon-192.png" alt="dwyl logo" height="64px" />
+    <img src="icons/Icon-192.png" alt="dwyl logo" height="128px" width="128px" />
     <h1>do what you love</h1>
+    <button onclick="human();">I am not a robot</button>
   </div>
   <script>
     window.addEventListener('load', function(ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: async function(app) {
-          let appRunner = await app.initializeEngine();
-          await appRunner.runApp();
-          // Remove loading screen when App available: 
-          document.querySelector('#loading').remove();
-        }
-      });
+      // Only Load Flutter App if Human
+      localStorage.getItem('human') && load();
     });
+
+    function human() {
+      // console.log('human')
+      localStorage.setItem('human', true);
+      load();
+    }
+
+    function load() {
+      loadScript('flutter.js').then(() => {
+        // Download main.dart.js
+        _flutter.loader.loadEntrypoint({
+          serviceWorker: {
+            serviceWorkerVersion: serviceWorkerVersion,
+          },
+          onEntrypointLoaded: async function(app) {
+            let appRunner = await app.initializeEngine();
+            await appRunner.runApp();
+            // Remove loading screen when App available: 
+            document.querySelector('#loading').remove();
+          }
+        });
+      })
+    }
+
+    function loadScript(src) {
+      return new Promise(function (resolve, reject) {
+        var script = document.createElement('script');
+        script.src = src;
+        script.onload = function () { resolve(); };
+        script.onerror = function () { reject(); };
+        document.body.appendChild(script);
+        // console.log('loaded ', src)
+      });
+    }
   </script>
 </body>
 </html>