WebApps with LocalStorage and AppCache/Types of AppLSAC

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 be dependent on remotely injected Javascript libraries.

Access to File System

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.

Load a local File

Browsers in general are capable to display local HTML content similar to web-based HTML content that is fetched from a remote server. Browsers had in the past the "Open File" option, so that the users can

• open local files (e.g. for testing the layout of HTML content) and
• open remote file or content provided with a URL and served from webserver, which could be HTML file on a webserver or in content provided by a Content Management System.

Access to Subdirectory

HTML file might include import

• Javascript files,
• Style Sheets or
• Media files that are stored on the local device (e.g. images, audio sample, 3D models, ...), that are included in Open Educational Resources and that can be shared between learners and modified by teachers according to the requirements and constraints of the digital learning environment.

HTML file is stored e.g. in a specific directory. Assume the images, Javascript file and CSS style sheet file are stored in subdirectory e.g. js/mylib1.js or css/mystyle2.css.

Learning Tasks

Assume the users opens a HTML file WebApp as a HTML file webapp1/index.html in the folder webapp1/ of your local file system. The expected behaviour is the same as if the HTML, JS, CSS files are loaded from a remote server via a URL e.g. https://www.example.com/webapp1/index.html.

• Explain why the browser could perform an access policy for the local file system that allows webapp1/index.html only to access subdirectories of the folder webapp1/ and not to access to arbitrary files and folders in the local file system (e.g. the parent directory of webapp1/? e.g.
  • webapp1/js/mylib1.js
  • webapp1/css/mystyle2.css
• Explain why is it important that browser should load and save files only with a user interaction, that lets the users select which file should be loaded with a file dialog or which file should be saved to the local file system with a file dialog and lets the user to define or change the filename and path of the stored file.
• Look at the permission control of existing Open Source browsers, either in GUI or into the Open Source code and explain how permissions for Cookies can be granted for specific domains. Transfer this concept to request of permission if a webapp1/index.html wants to access an icon of a jointly used image folder in the parent folder (e.g. with the relative file path ../images/myicon.svg)
• (Define an Offline Privacy Policy) Define a offline privacy policy for locally executed AppLSACs in browser (e.g. they may contact a remote server for load CSS, JS files with explicit permissions of users only, ...)
• Apply that concept of digital learning environments that run a mobile devices e.g. in remote areas where internet connectivity is not available.
• (Open Source Browser - Software Development) add an "Open File" menu item to an Open Source browsers and identify relevant information for the user that should informed about according to your security policy you defined in the learning task above.
• (FileReader API) Modern browsers support the FileReader API, that allows e.g. uploading a photo take from a mobile device to a school server. Define a requirements and contraints for saving files with a file dialog (e.g. FileSaver API with a dialog)

Upload - Download by Browsers

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

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

• used files are uncompressed and can be validated as privacy friendly,
• files are stored in a subdirectories js/, css/, img/, tpl/, so that they can be reused and modified (see FAIR principles).

Remote Servers

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

• (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

This learning resource explains the different types of AppLSAC.

Example AppLSAC-2

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

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

AppLSAC-0	AppLSAC-1	AppLSAC-2
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 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

• Examples of AppLSAC
• Content Delivery Network (CDN)
• AppLSAC/Load
• AppLSAC/Save
• AppLSAC/Processing
• AppLSAC/Privacy