WebApps with LocalStorage and AppCache/Types of AppLSAC

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

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.