WebApps with LocalStorage and AppCache/Privacy

Running an AppLSAC in Browser as Runtime Environment - disconnected from the internet or from a Local Area Network LAN - no hidden save operations without user interactions to local file system

WebApp: Classical Client-Server Architecture - Browser loads WebApp from Server in an Local Area Network LAN and exchanges data with server - (see also Virtual Private Network)

We start the consideration with an introductory example. Assume you have a group or people that have a digital device (e.g. Smartphone, Laptop, ...) and they are disconnected from the internet and disconnected from any mobile network.

Learning Task

Now we upscale interactivity between those group starting from isolated work of the community member on their own digital device.

• (Digitally Isolated Individual) people get individual task and each member of the task performs the task with their own digital device and they communicate their results on a piece of paper and put the results on a joint table for the other community members.
• Now we have an additional digital device operating as joint table and we place our digital result on joint table e.g. via BlueTooth. The users decide which files are submitted to the joint table and after submission to the join table device they disconnect again.
• (Digitally Isolated Team)On the next level we create a Mesh Network between those community members. We do not have internet connectivity so far but the community members can share files between them. What privacy concepts must be applied that every one shares on the files he wants provide access to?
• (One Fetches for the Team) Now a single person fetches remote file from the internet for use of the community members and the community members fetch the file/media/text from the joined table. What privacy concepts must be applied when community members fetch the file from the joint table device in comparison to the download of the files separately from the internet. What are the implications on the amount of data downloaded by the team.
• (AppLSAC and Client Server Interactions) Apply the AppLSAC principle to the different scenarios above and identify when client server interaction is required to perform certain digital interactions.
• (Mesh Network) Use an AppLSAC as a specific learning environment that is able to support learners offline without the need of a server. Assume that students are operating as a digitally isolated team and the group of learners must operate with the resources that are available on the device that serves as a joint digital table. Compare that with Mesh Network in the context of One Laptop per Child program. The laptops in the One Laptop per Child program use wireless mesh networking to enable students to exchange files and get on the Internet even though they lack wired or cell phone or other physical connections in their area.

AppLSAC - Requirements

• (Libraries in HTML-Header) In default mode Javascript libraries are loaded transparently in the main HTML file (e.g. in index.html in the HTML header) and they are loaded somewhere hidden in embedded libraries.
• (Libraries and Privacy Checks for Code) local libraries are available in an uncompressed format, so computer scientist of your educational unit can check, if some privacy violating code chunks are added to the code. In any case import libraries from a trusted source in your organizational network of your educational system.
• (Compressed and uncompressed Code) improvements of code will done in the uncompressed code because the compressed code is not comprehensive for developers. The use of "minified" code makes sense to reduce the network traffic and compressed versions of libraries are recommended to add especially for larger WebApps. Keep an uncompressed version in AppLSAC repositories for transparency reasons.
• (Meta-Tags) For larger projects a plugin-concept can be implemented. Plugin concept for libraries is useful when not all libraries must be loaded at start time of the app. E.g. for HTML5 editors that provide syntax highlighting for different programming languages. The users edit files in a single programming language and loading a different file might cause the HTML5 application to load another syntax highlighting. E.g the first file was Python code and the second file C++ code. In this case syntax highlighting must be changed. It is recommended to add meta tags in the HTML header that indicate which files are dynamically loaded during runtime. E.g.

   <meta name="applsac" content="plugin-folder:plugins/highlight*.js">  

• This indicates for developers transparently, that files in the plugins/ can be loaded during runtime and so these files must be taken into account if new features for an AppLSAC are added to the code and released for the learners in your educational unit.
• Remark: Keep in mind that browsers do not check these settings even on the internet (http:, https:) as long as the injected libraries come from the same origin (see also CORS).

Implementation Example

• WebApp-Game: First of all explore Bubblebreaker by bobak7 and assume that the users know to use a pseudonym for their players name when they use online games. The high score is persistent. Analyze the code in and explain why the high score list must not be transmitted to a server and no client server interaction is required even if you run the code offline in your browser e.g. on your Linux desktop PC.
• Storage of Data in LocalStorage: Highscores need to be saved, so new tries of BubbleBreaker build on the previous highscore list and injects at an outperformed ranking in the highscore list. Look into the provided Javascript libraries and perform a code analysis for used libraries and verify the statement on the README, that the code does not require any client server interaction to store data and execute the code - just a browser as run-time-environment for the Javascript code.
• Privacy and Digital Learning Environments: A highscore of a game in this basic example is not a relevant example to address "privacy". Transfer the concept to a Digital Learning Environment in which a student generates data. Identify relevant aspect for HTML5 apps that are used as learning environments in terms of privacy for student data.

See also

• Mesh Network
• One Laptop per Child program
• Virtual Private Network
• Digital Learning Environment
• Cross-origin resource sharing - CORS