WebApps with LocalStorage and AppCache/Processing

As a first example we process a ZIP file in the browser. With a combination of loadfile4dom.js

• (Load Files) We load files with loadfile4dom.js into the browser environment, that are selected by a user to be added to a ZIP file. The selected files are not submitted to server for processing, they remain in the browser environment.
• (Processing)
  • (ZIP Generation) The processing in the browser performs the task of adding the loaded files into a ZIP. This is performed in the browser by using the jszip.js for handling ZIP files with Javascript.
  • (Printing) This learning module is about printing of generated content in the AppLSAC.
• (Save ZIP) finally we save the generated ZIP file with FileSaver.js if the user presses a button a Download event is generate, but the file is NOT fetched from a remote server - the uses downloads a generated file handled by JSZip in the browser environment

Basic Constituents

Load Files into the Browser

• LoadFile4DOM to load files into the browser for browser internal processing of user data.

Save Files processed in the Browser

• FileSaver to save files generated/processed in the browser for browser internal processing of user data.

GUI Layout

A Graphical User Interface Interface (GUI) is used to offer processing features of the AppLSAC. User can press button, move slides, enter text, draw on a canvas, .... The interaction of the user at the interface create input parameters for the internal processing within the browser without submission of the data to a remote server.

• Boilerplate templates or frameworks that define the layout of a Graphical User Interface
  • JQuery Mobile Demos
• Hamburger Menu for WebApp
• Icons for Menus for your WebApp based on SVG files JQuery-Mobile SVG icons and SVG files in Wiki Commons.

Data Management JSON

• JSON Data Editor
  • JSON Editor by Jeremy Dorn
  • Application of JSON Schema and definition of the structure of data (see JSON2Schema)
  • Search and compare existing frameworks to handle save and load JSON files in a browser.
• Output File Generator, that creates the desired product for the user in the browser, e.g.:
  • Image Maps for Wikiversity
  • 3D Models that can be used for visualization in a learning resource
• NPM module cross-fetch to load data from a remote server into a WebApp of type AppLSAC-0.

Learning Tasks

• (JSON Editor) Explore the application type "JSON Editor" and explain how a JSON editor can be used in an AppLSAC to editor data.
• (Template Engine) Explore the concept of template engine driven file generation from a JSON file by analysis of Handlebars4Code and explain how the library Handlebars4Code can be used in AppLSACs to generate a text file in within the browser without internet connectivity just with the browser as runtime enviroment of the AppLSAC Javascript code.

See also

• JSON Editor
• ZIP File Format
• JSZip to handle ZIP files in a WebApp

Used Libraries

• loadfile4dom.js for loading files into the browser.
• jszip.js for handling ZIP files in a browser.
• FileSaver.js for saving/exporting generated files from the browser by emulation of a standard download event for a file that is generated within the browser environment.