Automate UpUp asset reference via router.php

README.md

@@ -25,9 +25,3 @@ It's less useful, but `npm run serve-frontend-only` will bundle and serve _only_
 ## Production
 
 `npm run bundle` bundles and minifies the frontend stuff and also copies the backend stuff to `dist`. Be sure to run `npm run clear` to delete the contents of `dist` and `.cache` before using `npm run bundle` to make sure you don't get old dev versions of the bundled code included in your upload.
-
-## UpUp Configuration
-
-[UpUp](https://github.com/TalAter/UpUp) is a tool that enables browsers to download an offline version of a website so users can still access it if they lose internet connection. Because Parcel Bundler hashes every file accessed via reference within the code, you need to ensure that the UpUp configuration at the bottom of `index.html` is kept up to date whenever you make changes to files. Typically the only file hashes that will change are `src.*.js` and `main.*.css`, but it's best to check all of them just to make sure.
-
-After bundling, update the files referenced in the configuration to make sure UpUp can download the files correctly, then bundle again so `dist/index.html` gets updated. I'm desperately hoping I can find a way to automate this in the build process, but I haven't figured it out just yet. Maybe I'll end up using `router.php` and `.htaccess` to do the heavy lifting for me. We'll see.

package.json

@@ -10,8 +10,10 @@
     "start": "concurrently \"npm run watch-js\" \"npm run watch-php\" \"npm run copy-files\"",
     "watch-js": "parcel watch template-index.html offline.html template-view.html template-passwordreset.html --no-hmr --public-url ./",
     "watch-php": "cpx \"src/php/**/{*,.*}\" dist -v -w",
-    "copy-files": "cpx \"node_modules/upup/dist/upup.sw.min.js\" dist -v",
-    "bundle": "parcel build template-index.html offline.html template-view.html template-passwordreset.html && npm run copy-files && cpx \"src/php/**/{*,.*}\" dist",
+    "bundle": "npm run bundle-js && npm run copy-files && npm run copy-php",
+    "bundle-js": "parcel build template-index.html offline.html template-view.html template-passwordreset.html",
+    "copy-files": "cpx \"node_modules/upup/dist/*.min.js\" dist -v",
+    "copy-php": "cpx \"src/php/**/{*,.*}\" dist",
     "serve-frontend-only": "parcel template-index.html",
     "clear": "npm run clear-dist && npm run clear-cache",
     "clear-dist": "rimraf dist/*",

src/php/router.php

@@ -83,6 +83,47 @@ switch ($view) {
       }
     }
     $html = str_replace('{{announcements}}', $announcements_html, $html);
+
+    $upup_files = array(
+      'src.js',
+      'main.css',
+      'help.html',
+      'privacy.html',
+      'terms.html',
+      'usage.html',
+      'ipa-table.html',
+      'favicon.png',
+    );
+    $files = array_map(function($file_name) use($upup_files) {
+      foreach($upup_files as $index => $upup_file) {
+        $file_pieces = explode('.', $upup_file);
+        if (substr($file_name, 0, strlen($file_pieces[0])) === $file_pieces[0]
+          && substr($file_name, -strlen($file_pieces[1])) === $file_pieces[1]) {
+          return str_replace('\\', '/', $file_name);
+        }
+      }
+      return false;
+    }, scandir('.'));
+    $files = array_filter($files);
+
+    $upup_insert = "<script src=\"upup.min.js\"></script>
+    <script>
+    window.onload = (function (oldLoad) {
+      oldLoad && oldLoad();
+      if (UpUp) {
+        UpUp.start({
+          'cache-version': '2.0.0',
+          'content-url': 'offline.html',
+          'assets': [
+            \"" . implode('","', $files) . "\"
+          ],
+        });
+      }
+    })(window.onload);
+    </script>";
+    
+    $html = str_replace('{{upup_insert}}', $upup_insert, $html);
+
     return Response::html($html);
     break;
   }

template-index.html

@@ -370,28 +370,6 @@
 
   <div id="messagingSection"></div>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/UpUp/1.1.0/upup.min.js"></script>
-  <script>
-  window.onload = (function (oldLoad) {
-    oldLoad && oldLoad();
-    if (UpUp) {
-      UpUp.start({
-        'cache-version': '2.0.0',
-        'content-url': 'offline.html',
-        'assets': [
-          'src.9470fa7a.js',
-          'main.3381ca43.css',
-          'help.ecc721dc.html',
-          'privacy.5cbf7ea0.html',
-          'terms.bcb4cecc.html',
-          'usage.4a51122f.html',
-          'ipa-table.6c5cf939.html',
-          'favicon.5d013634.png',
-        ],
-        'service-worker-url': 'upup.sw.min.js',
-      });
-    }
-  })(window.onload);
-  </script>
+  {{upup_insert}}
 </body>
 </html>