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.

Introduction
As explained by :
 * A web application (or web app) is that runs on a, unlike computer-based software programs that are run locally on the  (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  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 (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 ) offers a built-in web app manager that handles creation of appropriate  files (i.e. shortcuts) in an easy and straightforward manner. Click on the hamburger icon in the upper right corner and use to open a context menu which allows you to choose a name for the shortcut that will be created. Open about:applications or 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, accessible through the hamburger menu in an opened web app.

Firefox
(and its extended support release ) 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  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  one can create directly a new profile. Launch a specific profile with.

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.

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  file (located in your profile directory)
 * In this JavaScript file you may use the function  to set keys to certain values. E.g. (slightly modified excerpt from ):

Site-specific browser (SSB)
First, you need to enable this experimental feature by setting the property  to. After that, you can use the CLI options  (where   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. 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
equivalent. Another option is to use the file  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  to   (this should already be set like this when you are using ).

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

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. Set it to your desired user agent (e.g.  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 to be executed.

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

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
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.
 * or : Start Falkon in its mobile mode
 * or : Create new profile (to isolate workloads) or use existing ones and start Falkon in its environment
 * or : Start Falkon in full screen

E.g.  opens the Hydrogen Web App full screen in a separate hydrogen profile. To view available options, exxecute.

ICE
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).

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:, , and. You might then execute following commands to start the web app manager:

Nativefier ???
https://github.com/nativefier/nativefier

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

Linux Mint Webapp Manager

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