WebApps with LocalStorage and AppCache/Save
Local Storage of JSON Data in Browser Edit
The data in a WebApp can be stored locally in the browser instead of submitting the data to a server. A basic technology for storing JSON data in a Browser is the LocalStorage of the browser (see Tutorial of W3Schools for LocalStorage).
File Handling Edit
Browsers can write directly to your hard drive for security reasons.
- FileSaver: Look at FileSaver.js by Eli Grey and explore how WebApps can utilitize the download feature of the browser to save generated file products in the browser (with explicit permission of the user) to the local file system.
- LevelFS: level-fs allows tp replace fs API to write files on the hard drive, but in an encapsuled enviroment in the browser. In comparision to regular apps that have access to your whole SD-card or other data sources the level-fs is an implementation of an encapsuled LocalStorage on top of level- In replaces the fs methods with the level-fs functions. Data in the level-fs can be exported by FileSaver.js into your regular file system.
- BrowserifyFS: browserify-fs is browersified FileSystem support emulates a filesystem in the browser cache without creating full access to the clients filesystem (like fs has in NodeJS)
- RequestFileSystem Firefox and RequestFileSystem Chrome: is a non-standard Window method requestFileSystem() method is the browser Firefox or Chrome, which lets programmers access internal browser file system for permanent storage of files locally in the browser without providing access to the filesystem of the computer to store and load files. The file in the RequestFileSystem are stored locally in the browser and are not submitted to server by default.
Learning Tasks - File Handling Edit
- (FileSaver) Create a HTML-page and save a text file hello.txt with the content hello world, if the user clicks on a button!
- (RequestFileSystem) Create a wrapper library for the RequestFileSystem in Firefox and the RequestFileSystem Chrome to have a unified access to the request filesystem. This requires that users must use the WebApp with Firefox or Chrome (according) to their preferences, but they do not need install an application on their computer for using the WebApp.
Learning Steps Edit
- Create a GitHub repository to share your results with other learners - meet in small teams or use the discuss page to interact with other users about AppLSAC design and challenges
- Learn about basic tools for developing WebApps NodeJS, browserify, concat of code, software bundles, package management and maintenance of software
- Package Managers: NPM, ...
- Development Tools: Browserify, Watchify, Uglify, Lint (Code quality checkers in general)
- Learn AppCache: Pitfalls development, benefits and limitations for release management, ...
- Discuss Pros and Cons of Offline Apps (e.g. in the context of collaborative work - humanitarian crowd sourcing or Collaborative Mapping).