WebApps with LocalStorage and AppCache/Save
Local Storage of JSON Data in Browser
[edit | edit source]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).
Remark: If you are new to JavaScript programming checkout Wikiversity Internet Fundamentals for Javascript.
File Handling
[edit | edit source]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 | edit source]- (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.
AppCache
[edit | edit source]Instead of updating an app from a software repository or mobile application store the AppCache loads HTML, Javascript and CSS files from a web site and the AppCache mechnanism store the files locally in the browser cache. After just one visit of the website the browser loads the WebApp from the browser cache instead of loading all the files again from the webserver. If the WebApp does not require a server backend the WebApp runs offline without installation just in the browser. A manifest lists all the files that belong to the WebApp. This mechanism allows the generation of offline WebApps without the need to install the app from an Mobile Application Store.
Learning Steps
[edit | edit source]- 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).