Quick, Portable, Universal Linux Webapps - From Terminal To Taskbar

I'll leave the explanation for the end, because this took me way too long to figure out for how exceedingly simple it turned out to be.

Here's how you do it:

  1. Make a function in your ~/.bashrc, ~/.zshrc, ~/bash_profile or whatever:
mkdesktopshortcut () { URL="$1"; NAME="$2"; ICON="$3"; DOMAIN="`echo $URL | awk -F/ '{print $3}' -`"; echo "\
[Desktop Entry]
Name=$NAME
Icon=$HOME/MEGAsync/docs/Iconz/$ICON
Exec=vivaldi --app=\"$URL\"; xdotool search --sync --classname \"$DOMAIN\" set_window --class \"$NAME\"
Type=Application
StartupWMClass=$NAME
" > ~/.local/share/applications/$NAME.desktop ; }

That's literally it.

This creates a bash function to quickly make a .desktop file for any webapp you want, taking as parameters: the URL, the app/shortcut's name, and (optionally) the filename for the icon you want to use. So for me, to create an "app" for GroupMe's web interface, I'd run the following command:

Screenshot_20210210_161534.png

Done. Now go to your Application Launcher/Start Menu/whatever it's called in whichever DE you use, find your newly created shortcut, and pin it to your taskbar (or "Task Manager" in KDE... which is what I use):

Screenshot_20210210_161425.png

Boom, a self-contained PWA/"chromium app" that acts 99% like a natively-installed Linux app, runs in your existing (chromium-based) browser of choice, and whose icon stays put on your taskbar like a true independent program would, without opening up as just an extra browser window icon.

(this also allows you to use any chrome extensions you already have installed, right inside your webapp container - invaluable, for example, with Bitwarden or other password managers, for when I've cleared my cookies & need to sign back in somewhere.)

Obviously, btw, if you don't use Vivaldi like I do, you'll want to change the Exec line in the function definition to match whichever browser you use; as well as the Icon line to point towards wherever you store your icon files. For me, I just googled groupme's name and grabbed a nice .png of its logo off google images.

EXPLANATION

There are a ton of lesser-known or not-as-often-used app platforms and services that lack a decent native Linux app, or even if there is one, your distro of choice might not have a package for it in its repos. But almost all of these apps usually have a passable web-based interface, so you probably find yourself relegated to using the odd app or two from within your browser.

Chrome has an extremely handy feature to automatically create a desktop shortcut for any website - either in the more comprehensive form of "Install"-ing a sorta-almost-native App, which is only sometimes an option for select sites like Twitter; or if that's not available, just as a regular desktop shortcut which opens a standalone Chrome window to that site's URL. It's pretty great, in fact pretty close to a lifesaver in some cases, except for 2 very annoying problems.

One, this feature is (I think) technically available in every chromium-based browser as part of its core framework, but for some reason some of them don't have the button for it anywhere on their UI. Not going to name any names, but VIVALDI I'M LOOKING AT YOU! WHAT THE HELL IT'S BEEN YEARS NOW WHAT ARE YOU DOING!

Two, as soon as you click the cute little shortcut, it opens a standalone window separate from your existing 13 open browser windows full of tabs and distractions, so far so good - but suddenly you realize upon Alt+Tabbing back to it after a minute that its icon shows up as the same ambiguous icon for yet another generic browser window:

Screenshot_20210210_164632.png

My god I can't express how annoying this seemingly inconsequential detail has been for my years of using this chrome shortcut trick. If I have lots of browser windows, I have to mouse over each one first to be sure I'm clicking "the groupme one" or "the twitter one" or whatever, or make a mental note and remember the position of each one, which of course changes between reboots or closing the entire browser.

The solution

For the first issue, it's easily fixed by simply appending an --app="URL" flag to the browser's terminal command syntax. This is common to the chromium core code and so, thank god, it's available in all browsers that are based on it.

For the second, I finally today discovered this gem of a Stack Exchange answer among the sea of other identical questions asking about how to fix this little niggle:

superuser.com/a/1587871

Apparently keeping the icon from changing to that of the parent browser itself can be done relatively easily with an extra bit of help from xdotool, being due to some kind of limitation on the Freedesktop specification or how X handles the StartupWMClass or something or other... idk.

Don't care. All I know is that it works, and it looks to be (hopefully) somewhat independent of future Chromium changes & screwiness too, so HELL YEAH!

Hope this saves you a headache or 50, I'm really a big fan of making my linux desktop experience just 0.5% nicer to use with small tricks like this.