From cbcc7ecfd405c07696d331a2337846db54749e3f Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Wed, 5 Jun 2019 17:34:56 -0600 Subject: [PATCH] Add UpUp for offline mode; Update Readme for UpUp --- README.md | 8 +- index.html | 29 ++++ offline.html | 373 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 10 +- src/index.js | 6 +- src/js/utilities.js | 2 +- yarn.lock | 5 + 7 files changed, 426 insertions(+), 7 deletions(-) create mode 100644 offline.html diff --git a/README.md b/README.md index f9035f3..6c265c5 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,10 @@ 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. \ No newline at end of file +`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. \ No newline at end of file diff --git a/index.html b/index.html index 03d33cb..2256c92 100644 --- a/index.html +++ b/index.html @@ -368,5 +368,34 @@
+ + + \ No newline at end of file diff --git a/offline.html b/offline.html new file mode 100644 index 0000000..32e9966 --- /dev/null +++ b/offline.html @@ -0,0 +1,373 @@ + + + + + + + Lexiconga (OFFLINE) + + + + + + +
+ + + + + + + + + + + + + + + + + + You are OFFLINE + + + + + +
+
+ +
+ + +
+
+

Dictionary Name

+ + +
+ +
+ +
+
+
+

Loading Words

+
+
+
Please Wait...
+
+
+
+ +
+
+
+ + + + + + + +
+ + \ No newline at end of file diff --git a/package.json b/package.json index d3929a8..350ed70 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,11 @@ "author": "Robbie Antenesse ", "license": "UNLICENCED", "scripts": { - "start": "concurrently \"npm run watch-js\" \"npm run watch-php\"", - "watch-js": "parcel watch index.html template-view.html template-passwordreset.html --no-hmr --public-url ./", + "start": "concurrently \"npm run watch-js\" \"npm run watch-php\" \"npm run copy-files\"", + "watch-js": "parcel watch index.html offline.html template-view.html template-passwordreset.html --no-hmr --public-url ./", "watch-php": "cpx \"src/php/**/{*,.*}\" dist -v -w", - "bundle": "parcel build index.html template-view.html template-passwordreset.html && cpx \"src/php/**/{*,.*}\" dist", + "copy-files": "cpx \"node_modules/upup/dist/upup.sw.min.js\" dist -v", + "bundle": "parcel build index.html offline.html template-view.html template-passwordreset.html && npm run copy-files && cpx \"src/php/**/{*,.*}\" dist", "serve-frontend-only": "parcel index.html", "clear": "npm run clear-dist && npm run clear-cache", "clear-dist": "rimraf dist/*", @@ -27,6 +28,7 @@ "dependencies": { "marked": "^0.6.2", "normalize.css": "^8.0.1", - "papaparse": "^4.6.3" + "papaparse": "^4.6.3", + "upup": "^1.1.0" } } diff --git a/src/index.js b/src/index.js index 5e7abfa..48f5350 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,15 @@ import setupListeners from './js/setupListeners'; import { renderAll } from './js/render'; -import { hasToken } from './js/utilities'; +import { hasToken, addMessage } from './js/utilities'; import { loadDictionary } from './js/dictionaryManagement'; import { loadSettings } from './js/settings'; import { setupAds } from './js/ads'; function initialize() { + if (window.isOffline) { + addMessage('You are using the Offline version of Lexiconga.
Refresh the page while connected to the internet to enable using accounts.', 0); + } + loadSettings(); loadDictionary(); setupListeners(); diff --git a/src/js/utilities.js b/src/js/utilities.js index 3e2444a..02e9185 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -192,5 +192,5 @@ export function hideAllModals() { } export function hasToken() { - return getCookie('token') !== ''; + return window.isOffline !== true && getCookie('token') !== ''; } diff --git a/yarn.lock b/yarn.lock index d31ca97..de088c2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5683,6 +5683,11 @@ upath@^1.1.1: resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068" integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q== +upup@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/upup/-/upup-1.1.0.tgz#2accfeaecb0e1149e0d4f70173557c27288d3920" + integrity sha512-0CbaWVFX3mg7mkTtvg06g6bW9sijnSKKQptZdUZiHjAyvlpQWBxo+QoafVnaoQB0AlSCiYp3c8MUIYM+Jdf/Cw== + uri-js@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"