Web app guidelines and shit, offline support

markasoftware · Jan 12, 2018 · 7d997a3 · 7d997a3
1 parent f89a043
commit 7d997a3
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 8 deletions.
diff --git a/build/build.bash b/build/build.bash
@@ -2,17 +2,21 @@
 
 # doesn't work with process substitution for some reason, so this will do
 echo 'Combining specs...'
-node build/gen-specs.js specs /tmp/specs.js public/generated/sitemap.txt
+node build/gen-specs.js specs /tmp/specs.js public/sitemap.txt
 [[ $1 == 'production' ]] && cssMini='csso' || cssMini='cat'
 echo 'Bundling scripts...'
 # TODO: maybe add --noparse /tmp/specs.js but last time i tried it didn't make a noticeable difference (but mithril did)
-browserify -r /tmp/specs.js:spec-data --noparse mithril --debug src/js/entry.js > public/generated/bundle.js
+browserify -r /tmp/specs.js:spec-data --noparse mithril --debug src/js/entry.js > public/bundle.js
 if [[ $1 == 'production' ]]
 then
     echo 'Compiling and minifying scripts...'
-    babel public/generated/bundle.js | uglifyjs --compress --mangle --screw-ie8 > /tmp/bundle.js
-    mv /tmp/bundle.js public/generated/bundle.js
+    # we have to write it to tmp first then move because doing it all at once causes babel to freak the fuck out
+    # the file is truncated before babel has fully read it
+    babel public/bundle.js | uglifyjs -cmo public/bundle.js
+    echo 'Generating service worker...'
+    sw-precache --root=public --sw-file=sw.js --static-file-globs='public/*'
+    uglifyjs -cmo public/sw.js public/sw.js 2> /dev/null
 fi
 echo 'Bundling styles...'
-cat src/css/*.css | $cssMini > public/generated/all.css
+cat src/css/*.css | $cssMini > public/all.css
 echo 'Build complete'
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "js-yaml": "^3",
     "mithril": "^1",
     "natural-compare": "^1.4.0",
+    "sw-precache": "^5.2.0",
     "tap-spec": "*",
     "tape": "^4",
     "uglify-js": "^2"

diff --git a/public/generated/.gitignore → public/.gitignore b/public/generated/.gitignore → public/.gitignore
@@ -2,3 +2,4 @@ all.css
 bundle.js
 specs.json
 sitemap.txt
+sw.js
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon-192.png b/public/icon-192.png
diff --git a/public/icon-512.png b/public/icon-512.png
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,13 @@
     <title>SpecDB — View and Compare Graphics Cards and CPUs</title>
     <meta name='description' content="Designed as an AMD equivalent of Intel's ARK, SpecDB is the definitive source for AMD hardware specifications">
     <meta name='viewport' content='initial-scale=0.8, user-scalable=no, width=device-width'>
+    <meta name='theme-color' content='#ff4545'>
     <meta charset='utf8'>
-    <script src='generated/bundle.js' defer></script>
+    <script src='bundle.js' defer></script>
     <link rel='dns-prefetch' href='//fonts.gstatic.com'>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Quicksand:300,400" rel="stylesheet">
-    <link rel='stylesheet' href='generated/all.css'>
+    <link rel='stylesheet' href='all.css'>
+    <link rel='manifest' href='manifest.json'>
 </head>
 <body>
     <div id='error-wrapper'>

diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,18 @@
+{
+    "name": "SpecDB",
+    "short_name": "SpecDB",
+    "description": "View and compare graphics cards, CPUs, and APUs manufactured by AMD",
+    "start_url": ".",
+    "theme_color": "#ff4545",
+    "background_color": "#eee",
+    "display": "standalone",
+    "icons": [{
+        "src": "icon-192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+    }, {
+        "src": "icon-512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+    }]
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -1 +1 @@
-Sitemap: https://specdb.info/generated/sitemap.txt
+Sitemap: https://specdb.info/sitemap.txt
diff --git a/src/js/entry.js b/src/js/entry.js
@@ -10,4 +10,10 @@ m.mount(document.getElementById('part-selector'), require('./part-selector.js'))
 // extend part selector if no parts are selected on mobile
 if(hash.getList().length === 0) {
     document.getElementById('mobile-toggle').checked = true;
+}
+
+// service worker registration
+if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js')
+    .catch(() => console.log('Service worker registration failed, make sure you are in production mode'));
 }