User:Alpabrz/WebApps

Since (modern) mobile Linux is still an evolving ecosystem, many of the traditional commercial (and often proprietary) applications for Android and iOS are not available. Web applications could serve as an interim solution for users who do not want to give up their known services. This article aims to give an overview of available methods to ease and simplify the usage of web applications.

TODO: Items: Citations / References Screenshots / Videos ? 2nd person vs. 3rd person target audience: aimed at computer-illiterate or advanced power users? Out-sourcing to official documentation (e.g. Firefox etc.) judgemental speech (like "this is annoying") allowed? Citation Reference (footnote) vs. Links? Maybe automation scripts?

Introduction

As explained by Wikipedia:

A web application (or web app) is application software that runs on a web server, unlike computer-based software programs that are run locally on the operating system (OS) of the device. Web applications are accessed by the user through a web browser with an active network connection. These applications are programmed using a model client–server modeled structure—the user ("client") is provided services through an off-site server that is hosted by a third-party.

Because most of the code is run on or fetched from a remote server (which is not controlled by the end user), be aware that many web applications may unknowingly run proprietary code that diminishes your freedom. Some of those web services even go as far as profiling and tracking user data. Especially many popular social media networks are known to be among the worst offenders. Do your research on the web applications you are going to use and decide for yourself whether the benefits outweigh the drawbacks.

There are several types of web applications, most often you'll encounter just a normal web-page that offers some specific service through the browser. Another kind are so-called Progressive Web Apps (or shorthand PWAs), these web pages are more tightly integrated with the desktop and store information on your device, thus often making them accessible even when not connected.

Browser-based solutions

Many browsers nowadays have a built-in web app manager or offer methods to emulate segregated web app environments.

GNOME Web

GNOME Web (also known as epiphany^PMOS) offers a built-in web app manager that handles creation of appropriate .desktop files (i.e. shortcuts) in an easy and straightforward manner. Click on the hamburger icon in the upper right corner and use Install site as Web Application... to open a context menu which allows you to choose a name for the shortcut that will be created. Open about:applications or Open application manager in the hamburger menu to delete any of the web applications again. One of the features that most of the other options listed here do not have is to keep a web app running when closing the window via the button Run in Background, accessible through the hamburger menu in an opened web app.

Firefox

firefox (and its extended support release firefox-esr) doesn't offer an approachable way to manage web apps, but through some settings and CLI options you are able to emulate a web app-like environment.

Isolating web applications

To separate several web workloads, one may use Firefox Profiles. Originally, this feature was intended to offer multi-user support, but it can also be used to leverage web app support.

Use the CLI option -ProfileManager to open an interactive, GUI-based way to set your default profile, create new profiles, open your profile directories and much more. Be aware that this dialog doesn't scale very well to mobile portrait screens. Via -CreateProfile one can create directly a new profile. Launch a specific profile with -P.

In the following steps, you might need to access the specific profile directory to modify settings - refer to Mozilla's official documentation to find its path. Usually, all profile folders should be located under ~/.mozilla/firefox.

Tweaking advanced preferences

For many of the following instructions, tweaking of advanced Firefox preferences is needed. There are two options to achieve this:

• Built-in Configuration Editor accessible via about:config

Access the built-in about:config page. When opening this page the first time, you'll hit a warning which you may safely skip. Be careful though since editing random values might break your browser in unexpected ways. You can search through all preferences and when a key doesn't exist you may choose its type and its value.

• Appending to user.js file (located in your profile directory)

In this JavaScript file you may use the function user_pref(KEY, VALUE) to set keys to certain values. E.g. (slightly modified excerpt from src/mobile-config-prefs.js):

// Set up autoconfig (we use it to copy/update userChrome.css into profile dir)
user_pref('general.config.filename', "mobile-config-autoconfig.js"); // -> String
user_pref('general.config.obscure_value', 0); // -> Number

// Select a mobile user agent for firefox (same as tor browser on android)
user_pref('general.useragent.override', 'Mozilla/5.0 (Android 9; Mobile; rv:78.0) Gecko/20100101 Firefox/78.0'); // -> String

// Enable android-style pinch-to-zoom
user_pref('dom.w3c.touch_events.enabled', true); // -> Boolean
user_pref('apz.allow_zooming', true); // -> Boolean
user_pref('apz.allow_double_tap_zooming', true); // -> Boolean

Viewing web apps

Site-specific browser (SSB)

This (hidden) feature was removed in Firefox 86.0, released on the 23rd February 2021. Consider using one of the other options listed below.

First, you need to enable this experimental feature by setting the property browser.ssb.enabled to true. After that, you can use the CLI options -ssb $URL (where $URL is the URL to your desired web app) to start a site-specific browser.

Kiosk mode

Kiosk mode is a feature that disables all bars and enters full screen mode to imprison users on a site. It's designed for use in embedded environments (to serve web content to customers in e.g. a museum etc.), but serves well as a way to view web apps. --kiosk opens Firefox in this mode.

Known issues:

• (at least on Phosh) On start, Firefox enters full screen mode. However, after switching to other windows, it adapts a proper window resolution.
• Because of it's original use case, you can not open a context (right-click) menu.
• When clicking on links, they are opened in the same window (depending on the type of the link in a new tab); this behavior is mildly annoying.

===== Hiding tab bar via userChrome.css =====equivalent. Another option is to use the file chrome/userChrome.css in your profile folder, it provides the means to fully style and customize your browser. Note that since Firefox 69, theming via this file is disabled by default, so before using it you need to set the value of the setting toolkit.legacyUserProfileCustomizations.stylesheets to true (this should already be set like this when you are using mobile-config-firefox^PMOS).

Replace the content of chrome/userChrome.css with the following to disable tab & URL bar (taken from this superuser question):

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

After restarting into the specific Firefox profile, you'll notice that your tab & URL bar are gone.

Setting the user agent

Some web apps might only function with certain user agents set (one prominent example is WhatsApp which urges you to install the app when using mobile user agents). The corresponding user preference is general.useragent.override. Set it to your desired user agent (e.g. Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0 describes an X11-based Ubuntu system with on Firefox 86). For general information regarding user agents, refer to MDN's documentation.

Automation Scripts

Look at Firefox's Wiki Page for an example script that creates custom desktop entries to ease the accessibility of all those CLI options, using the abovementioned site-specific browser feature. Note that it requires bash to be executed.

TODO: SXMO Script

Chromium

chromium is the core, open-source version of Google's Chrome Browser. It offers desktop integration for Progressive Web Apps. Browse to a PWA and you'll be able to add it to your desktop via a + icon on the right of the URL bar.

Midori

TODO: More testing!

midori is a lightweight, GTK-based browser. Unfortunately, it doesn't offer web app integration in its GUI but you may use the CLI option -a or --app= to open a site in a window, emphasizing on the page content. Integrate it with scripts to create .desktop files etc.

Plasma Angelfish

TODO: Doesn't seem to work on Phosh?

plasma-angelfish is the default browser for Plasma Mobile. Through its menu (button at the bottom right) you can add shortcuts for the current web page to your homescreen.

Falkon

falkon is a QtWebEngine-based browser from the KDE project. Even though no web app support is built-in, one may use several CLI options to emulate it.

• -o or --portable: Start Falkon in its mobile mode
• -p or --profile: Create new profile (to isolate workloads) or use existing ones and start Falkon in its environment
• -f or --fullscreen: Start Falkon in full screen

E.g. falkon -o -f -p hydrogen https://hydrogen.element.io/ opens the Hydrogen Web App full screen in a separate hydrogen profile. To view available options, exxecute falkon --help.

TODO: automation script?

Other browser ???

TODO: Maybe: Look at QtWebBrowser?

Web app managers

ICE

TODO: APKBUILD and testing

ice is a web app manager that offers multiple back end browsers. Originally, it was specifically developed for the PeppermintOS Linux distribution and therefore it is very desktop-focussed (not designed with mobile use case in mind).

OUTDATED! Maybe not, UI seems to adapt well to mobile?

Galago (WIP)

Galago is a web app viewer & manager specifically designed for the mobile Linux use case. It is QtWebEngine-based and offers the ability to create custom desktop files. It even includes a GUI-based web app launcher. Note that it is in very early development stages and thus is not already packaged, but you might like to look at contributing to this project.

Nonetheless, if you want to try it out, following packages need to be installed: git, python3, py3-pyside2 and qt5-qtbase-sqlite. You might then execute following commands to start the web app manager:

$ git clone https://github.com/RasmusRendal/Galago.git # Clone the Git repository
$ cd Galago # Change into the Repo
$ python3 ./main.py # Execute the main python script

Nativefier ???

https://github.com/nativefier/nativefier

Tangram

TODO: APKBUILD? Flathub version very slow on PinePhone at least

Tangram^Flathub is a WebKitGTK-based browser that was "designed to organize and run your Web applications". It offers the ability to add web applications, they will be persistently saved and shown in a tab bar. Note that it does not have support for convergence (yet), but it seems like there might be mobile support in the future. If you want to use Phosh scaling in the mean time, its App ID is re.sonny.Tangram.

Linux Mint Webapp Manager

• https://github.com/linuxmint/webapp-manager

Experience reports

TODO: Ideally some (sortable) table with different columns.