first-paint cache + sw

1 files changed, 28 insertions, 4 deletions

diff --git a/index.html b/index.html
index 350f379..04f7bc3 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,9 @@
     </noscript>
 
     <div id='warnings'></div>
-    <div id='content'></div>
+    <div id='content'>
+        rendering content...
+    </div>
     <div>
         tempo is licensed under creative-commons.
         <br>
@@ -79,6 +81,17 @@
         </a>
     </div>
     <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/serviceWorker.js')
+                    .then(reg => console.log('Service Worker registered'))
+                    .catch(err => console.log('SW registration failed', err))
+            })
+        } else {
+            console.log('[warn] no service worker support')
+        }
+    </script>
+    <script>
         function escapeHTML(str) {
             if (!str) return ''
             const a = []
@@ -334,7 +347,7 @@
             const defPattern = /^def\s+(\S+)/gm
 
             while ((match = defPattern.exec(text)) !== null) {
-                console.log('defined:', match[1])
+                // console.log('defined:', match[1])
                 definedSymbols.add(match[1].replace(/^\\/g, '').replace(/\\$/g, ''))
             }
 
@@ -371,15 +384,26 @@
                 parser.tokenize()
                 const html = parser.render()
 
+                // store first 4kb of website in local storage
                 document.getElementById('content').innerHTML = html
-
+                try {
+                    localStorage.setItem('rendered', html.substring(0, 32768))
+                } catch (err) {
+                    console.log('[warn] localStorage caching failed. subsequent loads will not benefit from first-paint rendering.')
+                }
             } catch (err) {
                 console.error("failed to load tempo file:", err)
                 document.getElementById('content').innerHTML = "<p>error loading content.</p>"
             }
         }
 
-        loadMarkdown().then(e => document.querySelector('script').remove())
+        const title = document.title
+        const previousRender = localStorage.getItem('rendered')
+        if (previousRender) {
+            document.title = 'contents are stale...'
+            content.innerHTMl = previousRender
+        }
+        loadMarkdown().then(e => document.title = title)
     </script>
 
     <script>