Jump to content

WebApps with LocalStorage and AppCache/Processing

From Wikiversity

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

[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.

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.:
  • 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.