WebApps with LocalStorage and AppCache/Types of AppLSAC
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.
Load a local File[edit | edit source]
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[edit | edit source]
HTML file might include import
- 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[edit | edit source]
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.
- 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)
- 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[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.
- Explore the basic principles and explain, why a remote server is not necessary to process the data.
Types of AppLSAC[edit | edit source]
This learning resource explains the different types of AppLSAC.
Example AppLSAC-2[edit | edit source]
- into a GitHub/GitLab Markdown language for a README.md for the package.
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: 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 |
See also[edit | edit source]
- Examples of AppLSAC
- Content Delivery Network (CDN)
References[edit | edit source]
- 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)