WebApps with LocalStorage and AppCache/Types of AppLSAC

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

AppLSACs cannot access the file system like apps on a mobile device or applications on a desktop computer. So in browser 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.

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

These basis 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.

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 Mardown 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-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 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 loaded data are loaded from different servers (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. The loaded files are stored in generated ZIP-file with the library JSZip within the browser and the ZIP-file in the browser environment can be saved as Download event to the local file system for further use. Browsers cannot create files in folders on the file system directly, 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)