WebApps with LocalStorage and AppCache/Processing
Appearance
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)
- (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
[edit | edit source]Load Files into the Browser
[edit | edit source]- LoadFile4DOM to load files into the browser for browser internal processing of user data.
Save Files processed in the Browser
[edit | edit source]- FileSaver to save files generated/processed in the browser for browser internal processing of user data.
GUI Layout
[edit | edit source]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
- 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
[edit | edit source]- 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
[edit | edit source]- (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
[edit | edit source]Used Libraries
[edit | edit source]- 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.