search

Glavin001 / SMMApp2

Saint Mary's Mobile App, Version 2.0 @
http://society.cs.smu.ca:7000
2 stars 0 forks source link

Offline Access #13

Closed Glavin001 closed 10 years ago

Glavin001 commented 10 years ago

Enable offline access with HTML5 Manifests: http://diveintohtml5.info/offline.html

With the HTML, CSS, and JavaScript being cached client side there will be minimal requests to the server and when users do not have internet access they can still perform many operations, such as basic map functionality.

CanIUse, browser support: http://caniuse.com/offline-apps

See https://developers.facebook.com/blog/post/2012/07/16/mastering-the-application-cache-manifest-for-offline-web-apps-and-performance/ for more information.

Glavin001 commented 10 years ago

The /appcache updates on every restart of the Node.js app. See app.js line stating Handle Appcache request.

Glavin001 commented 10 years ago

/home and /login are being incorrectly being cached. This is because "Authors are encouraged to include the main page in the manifest also, but in practice the page that referenced the manifest is automatically cached even if it isn't explicitly mentioned." See http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Non-cachable pages should not have html(lang="en", manifest="/appcache").

Kayoti commented 10 years ago

Just a side note, keep in mind that If the map requests some sort of user information then caching such information will cause privacy issues. It all depends of course on the logic of how the map is suppose to interacts with the user data and if such info is required for the map to operate in offline mode.

Glavin001 commented 10 years ago

We aren't really caching the users information, so much as we are caching our code that processes and displays information.

Glavin001 commented 10 years ago

Emptying app.manifest so that pages are not cached.

Old file contents:

/404
/favicon.ico

SETTINGS:
prefer-online

NETWORK:
*
http:/tile.cloudmade.com/

CACHE:
# Main
/css/style.css
# jQuery
/vendor/jquery.form.js
/vendor/jquery.min.js
# Leaflet
/vendor/leaflet/leaflet.js
/vendor/leaflet/leaflet.css
/vendor/leaflet/leaflet.ie.css
/vendor/leaflet/images/layers.png
/vendor/leaflet/images/layers-2x.png
# Twitter Bootstrap
/vendor/bootstrap-modal.js
/vendor/bootstrap-transition.js
/vendor/bootstrap.min.css
# Glyphicons
/img/glyphicons-halflings-white.png
/img/glyphicons-halflings.png
# JavaScript Controllers
/js/controllers/homeController.js
/js/controllers/loginController.js
/js/controllers/mapController.js
/js/controllers/signupController.js
/js/controllers/socketController.js
# JS Form Validators
/js/form-validators/accountValidator.js
/js/form-validators/emailValidator.js
/js/form-validators/loginValidator.js
/js/form-validators/resetValidator.js
# JS Views
/js/views/home.js
/js/views/login.js
/js/views/reset.js
/js/views/signup.js
# SMU Data
/data/campus.geojson
# Socket.io
/socket.io/socket.io.js

FALLBACK:
/ /offline
Glavin001 commented 10 years ago

TODO:

Jade --> static HTML --> Served to user by Node.js --> Cached in Manifest User loads HTML webpage, loads JavaScript --> Detects that user is logged in --> Edit DOM to display specific data based off of Account Logged In That way, the server will always serve the same HTML files (generated from the Jade) and therefore CAN be Cached.

Re-assigning from @Glavin001 to @Danlock .

Glavin001 commented 10 years ago

Not working in iOS:

Glavin001 commented 10 years ago

There was not much to be done so @Glavin finished it up.