caching and defer non module scripts

clr-li · Apr 16, 2024 · cdc4b15 · cdc4b15
1 parent 2c95d4e
commit cdc4b15
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 63 deletions.
diff --git a/firebase.json b/firebase.json
@@ -1,6 +1,35 @@
 {
     "hosting": {
         "public": "public",
-        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+        "headers": [
+            {
+                "source": "**/*.@(js|css|html)",
+                "headers": [
+                    {
+                        "key": "Cache-Control",
+                        "value": "max-age=3600"
+                    }
+                ]
+            },
+            {
+                "source": "**/lib/**",
+                "headers": [
+                    {
+                        "key": "Cache-Control",
+                        "value": "max-age=604800"
+                    }
+                ]
+            },
+            {
+                "source": "**/*.@(jpg|jpeg|gif|png)",
+                "headers": [
+                    {
+                        "key": "Cache-Control",
+                        "value": "max-age=604800"
+                    }
+                ]
+            }
+        ]
     }
 }
diff --git a/public/404.html b/public/404.html
@@ -6,14 +6,14 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Custom Components -->
-        <script type="module" src="/components/Navigation.js"></script>
-        <script type="module" src="/components/MessageContainer.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
+        <script type="module" src="./components/MessageContainer.js"></script>
     </head>
     <body>
         <navigation-manager>

diff --git a/public/about.html b/public/about.html
@@ -6,17 +6,26 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- Import the webpage's stylesheet -->
-        <link rel="stylesheet" href="style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
-        <!-- Import QR Code creating -->
-        <script src="lib/qrcode.min.js"></script>
+        <!-- Import QR Code creation -->
+        <script src="./lib/qrcode.min.js" defer></script>
 
         <!-- Custom Components -->
-        <script type="module" src="components/Navigation.js"></script>
-        <script type="module" src="components/ContactForm.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
+        <script type="module" src="./components/ContactForm.js"></script>
+
+        <!-- Prefetch -->
+        <link rel="prefetch" href="./assets/logo.png" />
+        <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
+        <link rel="preconnect" href="https://attendqr.fly.dev" />
+        <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
+        <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
+        <link rel="preconnect" href="https://www.gstatic.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
 
         <style>
             /* smooth load */

diff --git a/public/admin.html b/public/admin.html
@@ -6,21 +6,21 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Import QR generating capabilities -->
-        <script src="lib/qrcode.min.js"></script>
+        <script src="./lib/qrcode.min.js" defer></script>
 
         <!-- Custom Components -->
         <script type="module" src="./components/Navigation.js"></script>
         <script type="module" src="./components/TypeSelect.js"></script>
         <script type="module" src="./components/DataTable.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />

diff --git a/public/calendar.html b/public/calendar.html
@@ -5,18 +5,18 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
         <!-- Add the evo-calendar.css for styling -->
-        <link rel="stylesheet" type="text/css" href="/lib/evo-calendar.min.css" />
+        <link rel="stylesheet" type="text/css" href="./lib/evo-calendar.min.css" />
 
         <!-- Custom Components -->
-        <script type="module" src="/components/Navigation.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
@@ -40,10 +40,10 @@
         <navigation-manager>
             <div id="calendar" style="min-height: 100%"></div>
         </navigation-manager>
-        <script src="/lib/jquery.min.js"></script>
+        <script src="./lib/jquery.min.js"></script>
         <!-- jQuery is required for evo-calendar -->
-        <script src="/lib/evo-calendar.min.js"></script>
-        <script type="module" src="/calendar.js"></script>
+        <script src="./lib/evo-calendar.min.js"></script>
+        <script type="module" src="./calendar.js"></script>
         <noscript>
             Please enable JavaScript for full functionality.
             <!-- smooth load -->

diff --git a/public/groups.html b/public/groups.html
@@ -6,22 +6,22 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- Import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Import QR scanning capabilities -->
-        <script defer src="lib/html5_qrcode.min.js"></script>
+        <script src="./lib/html5_qrcode.min.js" defer></script>
 
         <!-- Charts -->
-        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
 
         <!-- Custom Components -->
-        <script type="module" src="components/Navigation.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
@@ -40,7 +40,7 @@
         <navigation-manager>
             <section class="light-section" style="min-height: 65%">
                 <h1>My Groups</h1>
-                <a href="/payment.html" class="button">Manage Groups</a>
+                <a href="./payment.html" class="button">Manage Groups</a>
                 <button class="button" id="join">Scan QR Code to Join</button>
                 <div class="qr-container">
                     <div id="qr-reader" class="buttonize"></div>
@@ -50,7 +50,7 @@ <h1>My Groups</h1>
             </section>
         </navigation-manager>
 
-        <script type="module" src="/groups.js"></script>
+        <script type="module" src="./groups.js"></script>
         <noscript>
             Please enable JavaScript for full functionality.
             <!-- smooth load -->

diff --git a/public/index.html b/public/index.html
@@ -6,21 +6,21 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- Import the webpage's stylesheet -->
-        <link rel="stylesheet" href="style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Import QR Code creating -->
-        <script src="lib/qrcode.min.js"></script>
+        <script src="lib/qrcode.min.js" defer></script>
 
         <!-- Custom Components -->
-        <script type="module" src="components/Navigation.js"></script>
-        <script type="module" src="components/ContactForm.js"></script>
-        <script type="module" src="components/Action.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
+        <script type="module" src="./components/ContactForm.js"></script>
+        <script type="module" src="./components/Action.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />

diff --git a/public/login.html b/public/login.html
@@ -6,18 +6,18 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- import the webpage's stylesheet -->
-        <link type="text/css" rel="stylesheet" href="/style.css" />
+        <link type="text/css" rel="stylesheet" href="./style.css" />
 
         <!-- Custom Components -->
-        <script type="module" src="/components/Navigation.js"></script>
-        <script type="module" src="/components/CircleLoader.js"></script>
-        <script type="module" src="/components/MessageContainer.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
+        <script type="module" src="./components/CircleLoader.js"></script>
+        <script type="module" src="./components/MessageContainer.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
@@ -39,6 +39,6 @@ <h1>Click below to sign in:</h1>
 
         <circle-loader id="loader"></circle-loader>
 
-        <script type="module" src="/login.js"></script>
+        <script type="module" src="./login.js"></script>
     </body>
 </html>
diff --git a/public/payment.html b/public/payment.html
@@ -6,22 +6,22 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Payment with Braintree -->
-        <script src="https://js.braintreegateway.com/web/dropin/1.33.7/js/dropin.min.js"></script>
-        <script src="https://js.braintreegateway.com/web/3.88.6/js/client.min.js"></script>
-        <script src="https://js.braintreegateway.com/web/3.88.6/js/data-collector.min.js"></script>
+        <script src="https://js.braintreegateway.com/web/dropin/1.33.7/js/dropin.min.js" defer></script>
+        <script src="https://js.braintreegateway.com/web/3.88.6/js/client.min.js" defer></script>
+        <script src="https://js.braintreegateway.com/web/3.88.6/js/data-collector.min.js" defer></script>
 
         <!-- Custom Components -->
-        <script type="module" src="/components/Navigation.js"></script>
-        <script type="module" src="/components/CircleLoader.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
+        <script type="module" src="./components/CircleLoader.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
@@ -96,6 +96,6 @@ <h2>Purchase Subscription</h2>
 
         <circle-loader id="loader"></circle-loader>
 
-        <script type="module" src="/payment.js"></script>
+        <script type="module" src="./payment.js"></script>
     </body>
 </html>
diff --git a/public/scanner.html b/public/scanner.html
@@ -6,16 +6,16 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- Import the webpage's stylesheet -->
         <link rel="stylesheet" href="/style.css" />
 
         <!-- Import QR scanning capabilities   -->
-        <script src="lib/html5_qrcode.min.js"></script>
+        <script src="lib/html5_qrcode.min.js" defer></script>
 
         <!-- Import QR generating -->
-        <script src="lib/qrcode.min.js"></script>
+        <script src="lib/qrcode.min.js" defer></script>
 
         <!-- Custom Components -->
         <script type="module" src="/components/Navigation.js"></script>
@@ -62,6 +62,6 @@ <h1>Scan QR Codes to Take Attendance</h1>
             </section>
         </navigation-manager>
 
-        <script type="module" src="/scanner.js" defer></script>
+        <script type="module" src="./scanner.js" defer></script>
     </body>
 </html>
diff --git a/public/userAttendance.html b/public/userAttendance.html
@@ -6,16 +6,16 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" type="image/png" href="/assets/logo.png" />
+        <link rel="icon" type="image/png" href="./assets/logo.png" />
 
         <!-- Import the webpage's stylesheet -->
-        <link rel="stylesheet" href="/style.css" />
+        <link rel="stylesheet" href="./style.css" />
 
         <!-- Custom Components -->
-        <script type="module" src="/components/Navigation.js"></script>
+        <script type="module" src="./components/Navigation.js"></script>
 
         <!-- Prefetch -->
-        <link rel="prefetch" href="/assets/logo.png" />
+        <link rel="prefetch" href="./assets/logo.png" />
         <link rel="preconnect" href="https://attendancescannerqr.firebaseapp.com" />
         <link rel="preconnect" href="https://attendqr.fly.dev" />
         <link rel="preconnect" href="https://identitytoolkit.googleapis.com" />
@@ -32,7 +32,7 @@
             </section>
         </navigation-manager>
 
-        <script type="module" defer>
+        <script type="module">
             import { POST } from './util/Client.js';
             import { requireLogin, getCurrentUser } from './util/Auth.js';
             import { useURL } from './util/StateManager.js';