Running WhatsApp, Allo, Todoist, and OneNote on Ubuntu
In the absence of native desktop apps for Linux from WhatsApp, Allo, Todoist, OneNote and many others, the next best alternative is to simply run the web app via web browser. To make the experience of launching it closer to a native app, read on.
Motivation
Having switched to Ubuntu, I often feel that software companies do not seem to give enough love to Linux users; needing to use web browser to run their web apps whereas Windows and Mac get native options.
Previously, I setup Chrome to run upon login and set its startup pages to the said apps. This works but I dislike this approach for a few reasons:
- Upon starting Chrome, I get a set of tabs already loaded whereas I prefer them to show up as a standalone window.
- One or more Chrome extensions that I use have interfered with the web apps causing the layout to appear incorrectly. I had to exclude these web app URLs explicitly. Another use case was when I needed to switch proxy settings via an extension but I did not want the proxy settings to affect these web apps. I had to explicitly exclude these URLs too. Ideally, I do not want extensions affecting any of these web apps.
- I usually do not need all of them to be opened at the same time so closing the unneeded tabs can help to reduce memory usage but when I needed to have them visible again, I had to relaunch Chrome. I prefer to launch them independently.
Solution overview
The solution is to wrap these web apps with Electron and create a desktop launcher with the correct icon for the app.
Pre-requisites
Firstly, NodeJS and NPM are required. I tested with NodeJS 8.10.0.
Then install nativefier via NPM, a tool for creating a native wrapper for any web page:
npm install -g nativefier
Do not run npm install -g with sudo. If you encounter permission issues, follow NPM’s getting started guide on “How to prevent permissions errors". The guide will also explain how to add these globally installed packages into $PATH environment variable.
Downloading app icons
Desktop launcher needs to have an icon. Icons must be in PNG format. It also needs to have enough pixels, 48x48. Otherwise, the icon will look pixelated. Although any arbitrary icon can be used, using the proper icon would make the app identifiable.
Icons for popular web apps can be found on nativefier-icons. Alternatively, view the source the web app, then look for favicon and download it. If it is not in PNG format, it will have to be converted to PNG using an image editor.
Nativefy the web app
Below are examples of how to use nativefier. Run them within your home directory where you have permissions to write without sudo.
For Allo:
nativefier --name "Allo" "https://allo.google.com/web" --disable-dev-tools --single-instance --icon allo.png
For OneNote:
nativefier --name "OneNote" "https://www.onenote.com/" --disable-dev-tools --single-instance --icon onenote.png
For Todoist:
nativefier --name "Todoist" "https://todoist.com/" --disable-dev-tools --single-instance --icon todoist.png
WhatsApp:
nativefier --name "WhatsApp" "https://web.whatsapp.com/" --disable-dev-tools --single-instance --icon whatsapp.png
I found no use for allowing multi-instances of each app so I specified the --single-instance parameter. There is no need for Chrome developer tools, hence --disable-dev-tools. Do not forget to specify the correct file name for the --icon. More details can be found on nativefier API documentation.
Upon running the above, if successful, a new folder will appear named as <name>-linux-x64. Note that “WhatsApp” will appear as whats-app-linux-x64 as it will convert Pascal case into lowercase with a dash in between.
This folder should then be moved to /opt to allow other users to use these apps:
sudo mkdir -p /opt
sudo mv whats-app-linux-x64 /opt/whatsapp
First run of the app
Run the app, taking WhatsApp for example:
/opt/whatsapp/whats-app
On first run, it will create a folder to store configuration files on "$HOME/.config/applications/whats-app-nativefier-xxxxxx" where xxxxxx is a 6-character hexadecimal.
This keeps your login session state so that you do not need to relogin on subsequent runs.
Adding a desktop launcher icon
Launchers for all users is located at /usr/share/applications.
Launchers for current user is located at "$HOME/.local/share/applications".
Launcher file names are named with .desktop npmjsextension.
Example of how to add a WhatsApp launcher for all users using nano editor:
sudo nano /usr/share/applications/whatsapp.desktop
Then, paste the following and save:
[Desktop Entry]
Encoding=UTF-8
Version=1.0
Type=Application
Name=WhatsApp
Icon=/opt/whatsapp/resources/app/icon.png
Path=/opt/whatsapp
Exec=/opt/whatsapp/whats-app
StartupNotify=false
StartupWMClass=whats-app-nativefier-xxxxxx
OnlyShowIn=GNOME;
Remember to substitute xxxxxx in StartupWMClass setting with the correct 6-character hexadecimal. This is so that the app will not show up as a separate icon on the launcher bar when running it.
The app can now be added into favourites and ready to be used.
FAQ
Why is the old icon still being shown despite having changed it
Upon changing an icon, to have this reflected, the icon cache needs to be updated:
sudo update-icon-caches /usr/share/icons/*
Do I need to update the app
Short answer, it depends.
Given that the app is a Chromium web browser pointing to a URL, there is no need to update the app unless the URL has changed. Nevertheless, it is a good practice to keep your software up-to-date as new releases may include security related fixes.