WebApps with LocalStorage and AppCache/Types of AppLSAC

From Wikiversity
Jump to navigation Jump to search
Basic AppLSAC with Browser as Runtime Environment

AppLSACs are web-based applications that use the browser as runtime enviroment without the need to run a local or remote server or dependent on remotely injected Javascript libraries.

Access to File System[edit | edit source]

AppLSACs cannot access the file system (silently) like native apps on a mobile device or applications on a desktop computer, that can save files to file system without any notification to the user. So in browsers any operation about loading and saving to the local filesystem must be triggered by the users (press a button - interaction with the graphical user interface). This is a security feature for browsers so that websites cannot explore your local filesystem without permission.

Upload - Download by Browsers[edit | edit source]

In general browsers are able to download and upload files from remote servers and the browser can download arbitrary files and of course other applications to your local file system. Furthermore browsers are able to upload files to a remote servers.

These basic features (Load/FileReader-API and Save/FileSaverJS) for uploading and downloading files to and from remote servers can be used by programmers of AppLSACs to load files into the browser or save data stored internally in the browser to a file without connecting to or downloading from the internet.

Privacy Aspects[edit | edit source]

The underlying concept is that the loaded and processed data should not leave the local browser environment (see also privacy aspects).

Remote Servers[edit | edit source]

Even if the offline web-based application is able to run completely without a server, the AppLSAC might require to fetch remote data that is processed locally or the AppLSAC is loaded from a remote server for convenience of the user. To distinguish between those possible levels of remote interaction with servers, the following types of AppLSACs are defined. In general a higher number is a higher privacy level of the AppLSAC use.


Learning Tasks[edit | edit source]

  • (Simple Editor) A simple text editor is used to explain the basic principles of an AppLSAC.
    • AppLSAC/Load: Load a text file from local file system into the browser and not to a remote server.
    • AppLSAC/Processing: Edit the loaded text in a HTML textarea in the browser
    • AppLSAC/Save: Save the content in the HTML textarea after editing back to the local file system.
Explore the basic principles and explain, why a remote server is not necessary to process the data.
  • (WebApps and Privacy) An AppLSAC consists of HTML, CSS and Javascript files, that can be stored. With the priority to minimize the digital footprint, files are loaded locally whenever possible. Analyse the following types of WebApps and identify requirements and constraints for reducing the digital footprint of web-based applications.

Types of AppLSAC[edit | edit source]

This learning resource explains the different types of AppLSAC.

Example AppLSAC-2[edit | edit source]

Look a the first example Handlebars4Code. It converts a UML structure of a Javascript Class

  • into Javascript source code and
  • into a GitHub/GitLab Markdown language for a README.md for the package.

This type-2 AppLSAC can be downloaded as ZIP from a GitHub repository, which shows all the files that are included in the ZIP-file. Once copied on the local file system the HTML5 runs completely in your browser even if you are offline. AppLSAC is not dependent on any fetched data or injected remote Javascript code from a remote CDN (Content Delivery Network). Data processed runs with Javascript in the browser and not on a remote server.

Examples and Comparison AppLSAC-0, AppLSAC-1 and AppLSAC-2[edit | edit source]

From type AppLSAC-0 towards AppLSAC-2 the design of a WebApp becomes more privacy friendly.

AppLSAC-0 AppLSAC-1 AppLSAC-2
AppLSAC-1: WebApp is loaded from Server - Data is loaded from the remote server, processed in browser and the output stored on local storage - NO processing of data on a server. AppLSAC-1: WebApp is loaded from Server - Data is loaded into the browser from local filesystem, processed in browser and stored results again on local storage - NO processing of data on a server. AppLSAC-2: A HTML file with Javascript is loaded from the local file system and not from a remote server. AppLSAC on level 2 has two privacy friendly aspects. Data is processed locally and HTML/Javascript WebApp is loaded from local filesystem.
AppLSAC-0: Wiki2Reveal is a small tool for Wikiversity learning resources. It is an AppLSAC-0, that does not need a save option. If you click on the Link https://niebert.github.io/Wiki2Reveal/index.html the WebApp is loaded from a GitHub-Server. By pressing on the Download-Button the specified article is fetched from the Wikiversity database as wiki source and converted into a RevealJS presentation. The browser generates a webbased presentation within the browser and displays the webbased presentation. In this AppLSAC-0 WebApp and loading data from a remote server is allowed and the user actively triggers fetching data from a visible server location (WebApp from GitHub, Data from Wikiversity Server API) AppLSAC-1: Click on the Link https://niebert.github.io/audioslides4web/index.html and the WebApp is loaded from a WebServer on GitHub. Then generation of the webbased presentation is performed completely in the browser. Images and audio comments for the slides are loaded from the local file system into the browser environment (and not on a remote server). The loaded files are stored in a generated ZIP-file with the library JSZip within the browser and the ZIP-file in the browser environment can be saved by a "Download" event to the local file system for further use. Browsers can download a single file but cannot create files in folders arbitrary on the file system, so the folder structure in the ZIP file is used to store files in folders and provide the folder structure in a single file as AppLSAC-1. AppLSAC-2: Download the ZIP-file of the repository[1] AudioSlides4Web and start the AppLSAC in the directory docs/index.html e.g. without internet connectivity. HTML, Javascript and CSS files are stored locally on the filesystem of the mobile device or desktop PC. The WebApp does not contact a remote server for processing a specific task. All processing is performed within the browser as runtime environment. AppLSAC-2 does not create any digital footprint as internet activity, assuming that the used browser itself is privacy friendly.

See also[edit | edit source]

References[edit | edit source]

  1. AudioSlides4Web (2019) Engelbert Niehaus - AppLSAC Repository to create webbased presentation in the browser with connection to the internet - As AppLSAC-1 url application: https://niebert.github.io/audioslides4web - for offline use ZIP: https://github.com/niebert/audioslides4web/archive/master.zip - (accessed 2019/09/14)