Web Apps

One alternative to the usual Debian apt application or flatpak is to use web apps as desktop apps. There are some advantages to this approach.

  • Uses an official application when none might exist already on Linux and/or ARM
  • The same look and feel as other OSes, such as Mac OS and Windows
  • Upgrades happen automatically each time you load the site
  • Browsers allows you to customize certain aspects of the app without forking it

The goal is to be able to treat websites much like you do with normal Mobian apps. First, you launch them from the Phosh home screen. When they are running, you can see what they are and switch between them normally. Also, you can close them like any other app with the little 'x' on the top-right corner of the Phosh task panel. That last bit is important because the PinePhone can only run so many apps before it runs out of RAM and gets really slow. There needs to be a way to launch/stop apps easily.

Note that there are some websites that are just not going to work at all for the time being on the PinePhone. Sorry, there is no way to get Netflix or Apple Music (yes, they have a website now) working because of the special Digital Rights Management libraries. None of the available web browsers will work yet with those on the ARM architecture.

Also, none of the major browsers integrate with the GeoClue library in Gnome to get position data. This means that you won't be able to use Google Maps or Open Street Maps to do in-car navigation yet.

GNOME Web (Epiphany)

Mobian comes pre-installed with the GNOME Web (aka. Epiphany) browser, which is standards compliant and built on WebKit, which is what Chrome and Safari used to use as their core.

The Good:

  • Most sites load and look fine
  • It's really easy and quick to make a desktop launcher for a site from the browser
  • Notifications work and show up in the Phosh notification area in the usual way
    • This works fine with Riot Web as long as you keep it running

The Bad:

  • It's a little slow, which can get annoying for your commonly used apps
  • Some websites load in a limited mobile browser mode
  • Certain websites, such as YouTube, just don't work properly since WebKit is falling out of popularity
  • No access to microphone or camera

Gnome Web is a good place to get started with Web Apps for its ease of use.

Chromium

Chromium is the Google independent core of the Chrome browser. It works well with a wide variety of websites since many web developers do extensive development and testing with it. While it's easy to install Chromium on Mobian, it's not really usable at all on Mobian yet.

The Good:

  • YouTube works out of the box
  • Most websites look great
  • Scrolling is very smooth, likely due to large efforts to make Chromium work well with Android
  • Gesture support for going back and forward. Pull down to refresh can be enabled as well.

Roadblocks:

  • Runs only with X11, not Wayland
    • Phosh can't automatically resize and position X11 windows to fit the screen (xdotool can be your friend here)
    • Keyboard doesn't work (each key is mapped incorrectly in “xmodmap”)
    • There are rumours of experimental support for Wayland coming via the “Ozone” windowing system abstraction
    • Note that compiling your own Chromium for Mobian on ARM is extremely problematic and resource intensive (8GB RAM, 100GB disk space) so it's probably best to avoid
    • Note that Phosh may one day support X11 apps a bit better
  • GPU rendering doesn't work
    • You can launch chromium with --disable-gpu to work around this, but it's slower without GPU

Firefox ESR

Firefox ESR is the enterprise edition of Firefox and comes pre-installed in Mobian. It lags behind in many ways from the newest versions of Firefox, but it is meant to be stable and reliable. It also works reasonably well with most web sites and a bit faster than Gnome Web. Making launchers out of websites with Firefox ESR is doable, but less automated than with Gnome Web. See below with Firefox 78 for details on how to make these launchers.

The Good:

  • Already installed
  • YouTube works out of the box since version 78.8.0esr-1
  • Supported by many websites as one of the major web browsers out there
  • Supports notifications and integrates with the Phosh notification area

The Bad:

  • It's just a little slow for simple things like scrolling
  • The defaults are annoying (see tips and tricks)
    • Opening links in new tabs instead of windows means that Phosh doesn't see them
    • Restoring a crashed window session (happens from time to time), means scrolling down to click a button each time
  • The memory consumption is a bit high, which can lead to performance problems with alot of websites open
  • Some of the UI elements (menus, panels, buttons) are a bit hard to reach on a small screen (see tips and tricks)
    • Clicking on the little 'x' to close a tab requires a very light and accurate touch
  • Opening URLs in Firefox that come from other places like Chatty tries to open a new Firefox instance on the same profile and fails with an error dialog

Tips and Tricks:

  • Touch and hold on areas like the browser tab opens the context-menu like a right-click gesture on desktop
    • This is super useful to access functionality like cut-copy-paste
    • Also, on a blank area of a website to access page info and control the permissions for notifications, local storage, etc.
  • Recommend disabling the setting to open links in new tabs instead of windows
    • Go to menu preferences → General → Tabs → Open links in new tabs instead of windows
    • When the browser opens a bunch of tabs and the system starts slowing down you can use the usual Phosh window management to close unused browser windows more easily
  • When a Firefox menu shows up and isn't easily dismissed try opening the Phosh keyboard, go to the terminal keyboard's extra keys section (with Esc, F1, F2, etc.) and hit Esc (Escape) to dismiss it
    • The menu can be delayed from displaying by modifying about:config and ui.click_hold_context_menus.delay from 500 to 50000.
  • Enable the “touch layout” with the 'about:config' switch 'browser.uidensity'. Set it to '2' for the “touch layout”.
  • Use -kiosk option to get borderless fullscreen without address bar

Firefox 79

Firefox 79 is very new (July, 2020). The prior version to this, Firefox 78 is slated to be the next ESR for enterprise installations where extra stability is needed. Version 79 however can be installed into Mobian with the unstable package.

Installation:

The Good:

  • Smoothest functional web browser for Mobian so far
  • YouTube works out of the box
  • Support for Single Site Browser windows

The Bad:

  • It's still a tiny bit slower than one might hope
  • It seems to use even more RAM than the old ESR
    • Keep closing those old browser windows that aren't needed anymore
    • Consider using zram to compensate
  • The main window won't automatically resize to fit the PinePhone resolution anymore (slight regression since old ESR)
    • See tips and tricks to work around this
  • Menus and dialogs show up with large font sizes and are cut off with no scrolling capability
    • The main menu (see tips and tricks to work around)
    • Notification dialogs for when websites ask for certain permissions, such as notification (see tips and tricks)
  • It's unclear whether this package from Debian sid will continue to be installable in Mobian, which is on Debian bullseye

Tips and Tricks:

  • See above for Firefox ESR. Most tips and tricks apply here too.
  • Phosh can compensate for the window being wider than the screen. See https://wiki.mobian-project.org/doku.php?id=tweaks#automatic-app-scaling (app ID is firefox). This sometimes introduces inconsistencies, where the scaling while change while using the browser, making it unnecessarily small.
  • alternatively, the screen fit can be forced with the about:config switch layout.css.devPixelsPerPx. The default -1.0 uses a very big scaling. Setting it to a value near 1.5 works very well (this was tested with the “touch layout”, see further below in this section).
  • The main menu can be navigated (blindly) using the up and down arrows in the Phosh “terminal” keyboard
    • Use space bar to “click” on one of the menu items (e.g. zoom in/out buttons)
  • Permissions dialog (allow notifications, access to camera, microphone, etc.) are not directly accessible
    • These can be closed as separate windows using Phosh window manager (click the little 'x' on them)
    • This will disable the permission by default. However, you can access all the permissions granted to a website by pressing and holding a finger down on a blank area of the web page, which brings up a context menu. Select “Page Info” and it will bring up the page info dialog. There is a permissions tab where you can manually give the page the necessary permissions, such as notifications, microphone or local storage. The radio button and checkboxes are really small but with persistence and aim they can be clicked.
    • Memory is precious on the PinePhone, limit the memory consumption and number of firefox processes
      • Go to about:preferences
      • Uncheck “Use recommended performance settings”
      • Lower the number of helper processes to something like 2
    • You can enable hardware-accelerated compositing (OpenGL) by going to about:config and setting layers.acceleration.force-enabled to true. Some users have reported that this improves scrolling performance. Also, some users have reported some stability problems.
    • Similarly to the Firefox ESR version, you can enable the “touch” ui density, in order to make it easier to click the buttons on a touch screen. Because it is hard to navigate the (currently) broken menus in Firefox from the Sid Repository, you can enable the touch UI via about:config. Simply set the browser.uidensity to 2.
    • PostmarketOS offers a userChrome.css Hack, that optimizes Firefox' layout for a smartphone screen, which can be obtained from their Gitlab.

Creating Webapp Launchers

The easiest way to set up a launcher for a website is to use Gnome Web. Note the limitations above.

  • Go to the website location where the launcher should use
  • Invoke Menu → Install Site as Web Application…
  • Set the name, icon and other details to the preferred values
  • It adds the launcher to the Phosh home screen with the site's icon
  • You can customize the zoom level for each Web Application, privacy settings, download default location and more using the preference

However, if Firefox ESR (or Firefox 78) is preferred. The procedure is a bit more manual. Luckily, you can start with the Gnome web launcher and copy and customize it for Firefox, including the launcher icon copied from the website.

  • Create a Gnome Web launcher using the instructions above
  • Launch the preferred Firefox and navigate to the website
    • Tell Firefox to remember the login password
    • Set the preferred zoom level for the site
    • Set the permissions for the website (eg. notifications, camera, microphone, local storage, etc.) using the above techniques
  • Close the web browser window
  • Copy the Gnome Web launcher created above to a new launcher
    • cp ~/.local/share/applications/epiphany-<launcher_name>* ~/.local/share/applications/<launcher_name>.desktop
  • Edit the new launcher (desktop) file
    • Take note of the Icon= location
    • Make a copy of the icon file and put it in ~/.local/share
    • Change the Icon= to the location of the copy of the icon
    • Change the Exec= line to have only the URL of the website
    • Add either firefox (78) or firefox-esr (old ESR) before the URL
  • With the new launcher it will probably look identical to the one you created with Gnome Web. You can delete the old one and avoid any confusion.
    • Launch Gnome Web
    • Menu → Open Application Manager
    • Click the delete button beside the unwanted launcher

Firefox 78 comes with a new capability called Site Specific Browser (SSB). This will open a browser window without the Firefox UI. To use SSB, you will need to enable it by setting `browser.ssb.enabled` to `true` in about:config.

Exec=firefox --profile /path/to/your/profile/folder --ssb https://example.com

NB.: The --profile flag is currently needed has a workaround to prevent bug 1655271

With SSB, there can be some changes to the width of the browser window. You may need to navigate to the website with the Firefox launcher and adjust the zoom level to better suit the different geometry. As SSB is slated for removal, consider the -kiosk option.

Chromium can also open sites as an app by modifying the following in the .desktop file:

Exec=chromium --app=https://example.com

Or in fullscreen mode:

Exec=chromium --start-fullscreen https://example.com

For best results, make sure scale-to-fit Chromium on has been set.

Tip: Purism has a script that generates webapps semi-automatic, using epiphany as backend

Webapp wrappers

Two helper can enable webapps with Firefox or Chrome-based webbrowsers. This is getting more relevant as Mozilla is removing the –ssb flag (site-specific-browser).

Peppermint OS' ice or (even better) Mint's fork webapp-manager allow to isolate Firefox into full-screen webapps. These allow to have a gui for creating webapps within any installed browser (Firefox, Chromium, GNOME Web, …).

Some notes after using webapp-manager: webapp-manager's window is slightly large and works better when scaled (scale-to-fit webapp-manager.py). It does not apply the mobile-specific CSS, so the layout might be worse. This can be fixed by cat ~/.mozilla/firefox/my-cool-profile/chrome/userChrome.css » ~/.local/share/ice/firefox/my-cool-webapp/chrome/userChrome.css (investigate, on a first attempt, it brought back the normal chrome and tabs…).

Simplified building instructions for Ice: obtain from their GitHub Repo and build via dpkg-buildpackage -us -uc (see Debian docs). Afterwards, the produced .deb can be installed with dpkg or apt.