Linux Fu: Turn A Web App Into A Full Program

I hate to admit it. I don’t really use Linux on my desktop anymore. Well, technically I do. I boot into Linux. Then I do about 95% of my work in Chrome. About the only native applications I use anymore are development tools, the shell, emacs, and GIMP. If I really wanted to, I could probably find replacements for nearly all of those that run in the browser. I don’t use it, but there’s even an ssh client in the browser. Mail client? Gmail. Blogging? WordPress. Notes? OneNote or Evernote. Wouldn’t it be great to run those as actual applications instead of tabs in a browser? You can and I’ll show you how.

Having apps inside Chrome can be a real problem. I wind up with dozens of tabs open — I’m bad about that anyway. Restarting chrome is a nightmare as it struggles to load 100 tabs all at once. (Related tip: Go to chrome://flags and turn “Offline Auto-Reload Mode” off and “Only Auto-Reload Visible Tabs” on.) I also waste a lot of time searching since I try to organize tabs by window. So I have to find the window that has, say, Gmail in it and then find Gmail among the twenty or so tabs in that window.

What I want is a way to wrap web applications in their own window so that they’d show up in the task bar with their own icon, but external web pages that open from these apps ought to open in Chrome rather than in the same window. If applications were outside of the single browser window, I could move them to different desktops and organize them like they were any other program, including adding them to a launcher. Hopefully, this would let me have fewer windows like this:

Electron

There’s a library known as Electron which allows web developers to package their content into a desktop application. It is a little controversial because — frankly — what isn’t? Detractors say that web applications are not efficient. However, in this case, it isn’t like you have a way to make a “proper” GMail desktop app, so it probably isn’t much worse than just having GMail open in a browser all the time.

In theory, you could just use Electron to “develop” your own version of GMail or whatever app you like. However, that takes a little time. Instead, I’ve been using nativefier to do the job mostly automatically. The program can take just about any web page or application and make it a Windows, Linux, or Mac application.

The program tries hard to just do the right thing. So if you install it and just run the program with a URL it ought to figure out the right name, the right icon, and so on. However, there are a few things you should know.

A Quick Test

Let’s say you want to make Microsoft’s OneNote into a Linux application. Yes, there’s already a OneNote app, but not for Linux. It sort of works under Wine, but the web application is the one that gets the updates now and it works smoother than using Wine.

Your first attempt might be: nativefier onenote.com. There’s a problem with that, though. While the program picks up all the relevant data, it doesn’t keep your main browser’s passwords and cached login credentials. Therefore, you’ll need to log in.

Oops. Clicking the sign in button takes you to another Microsoft web site and that causes the program to open that in your regular browser. Logging in there doesn’t help you any.

So does that mean you can’t use nativefier for OneNote or anything else that has a login? Not at all.

The Solution

If you ask for help (use the --help option) you’ll see there is a dizzying array of command line options. For example, you can override the default icon or title. You can set various browser options. You can even inject custom CSS, set the window size, and enable the browser menu, if you like. But the one thing that will help our problem is the --internal-urls option. This is a regular expression that the program will look at when a URL opens in a new window or tab. If the URL matches, it will stay in the window. It may take a little trial and error and — of course — the matching can be as tight or loose as you want it to be. I wound up with this command line:

nativefier onenote.com --internal-urls ".*(\\.office\\.com)|(\\.onenote\.com)|(go\\.microsoft\\.com)|(\\.live\\.com).*"

In English that says if the URL ends in .office.com, .onenote.com, or .live.com, it is internal. It also catches go.microsoft.com. I could probably have just grabbed all of microsoft.com, too, but if you had a real external link you might want it to go to the outside browser.

Again, you can adjust this as you need to. If you know you’ll never link out of the app, you could just use .* as the regular expression, but that seems lazy.

Programs

Any web page you want to treat like a separate program will work. I’ve even put the Hackaday.io chat in its own window, which is handy. Even though it uses GitHub to authenticate, it does so in a way that doesn’t confuse nativefier, and the default command worked fine there. Some other sites that worked well: messages.android.com (needs a custom icon), WordPress, and, of course, GMail. For another favorite, try this command line:

nativefier http://falstad.com/circuit/circuitjs.html?cct=$+1+0.000005+10.20027730826997+50+5+50%0A --name 'Falstad Circuit Simulator'

 

If you don’t use the browser like I do, this may seem like a waste of time. Or maybe you have another technique to deal with browser tab bloat. But if you want to turn that web app into a program, nativefier seems to work well and definitely makes my workflow easier.

There are a few problems, though. For one, spell checking doesn’t work inside these applications. So maybe WordPress isn’t a good one to convert after all. But for some apps, like the circuit simulator, you probably won’t miss spell checking. There’s a feature request on GitHub to add this and if they manage that, it would make it even more useful.

68 thoughts on “Linux Fu: Turn A Web App Into A Full Program

      1. Websites are at least supposedly are sandboxed so they are not as much of a risk as running native binaries. But this is getting worse and worse though as browsers expose more and more of their host operating system’s functionality. The benefits of using a website instead of a native app are quickly disappearing, while the drawbacks have only been somewhat mitigated. We’re getting to the point where browsers are worthy of the decades old criticism Emacs has received. They have eventually become an OS with many fine features – simply lacking a good web browser.

        1. The dumb terminal gets re-invented every generation, and disappears for the same reasons: it’s slow and fragile, uses up tons of resources for a gimped version of the same software, and the applications eventually break down on you without an offline fallback.

          Another issue with online software is the “In construction” problem, where, since the software isn’t locked to a distribution version anymore and they keep changing it continuously until the users get pissed off. It’s never “done”.

          A third problem is “software as a service”, where the publishers are increasingly trying to lock you down to paying monthly fees since they can keep monitoring your use online. Those “small” payments end up costing a lot.

          Fourth problem is the continuous streams of ads, which make the software “free”, except you pay anyhow because the companies put the cost of those ads into their prices, so the more ads get served the more you pay – even for ads in software that other people use. That’s just the ads industry helping themselves to your wallet.

          In other words: it’s not going to be long until people get fed up with apps running in a browser, just like they did with JAVA terminals etc. and return to native apps they can own and keep.

          1. Yes, it does seem that way, and if your predictions fail. it isn’t from lack of truths (same one’s used last time) but not acknowledging that there has been significant progression from last time. From hardware of all kinds, to our better understanding of problems and the CS we use to solve them. This is not our grandparents future.

        2. I”d say the benefits of a web application are now non-existent. Not only do they have the same access to the OS a local application would use, but you now have no way of figuring out what is going behind the scenes, where you data exists, and now you must be connected tot the internet at all times just to even get access to your data. Plus, not only are you having to trust the company at the authors at the time of writing, but now you have to trust them in perpetuity. You are also adding a bunch of risks i the from of the rest of your network, your ISP, the intermediate NSPs, the application operator’s ISP, their networks, their hardware, and so on.

          Then you also have to worry about the stability of the author of the application. What if tomorrow they suddenly pulled the plug and now you no longer have access to your data or now just have a big blob of data in some proprietary format that you have no idea how to process.

          1. I think we need to really go full circle and have full filesystem access (Through sandboxed dialog boxes of course, with maybe some convenience features like remembering what you gave permission for), and offline website files.

            We already have the browser cache(Or we did, till they decided to use per-site caching in fear of leaking bits of info on history, without giving the user a choice…)

            You should be able to take a site, package it as a ZIP file(Preferably a better archive format, but we don’t really have a lot of those), sign it with an SSL key from a certain website, and have it run exactly like you fetched that site straight over the internet.

            We should also be able to (With user permission) communicate directly over the local network to other browsers or local servers.

            There’s lots of open source web apps out there. Any one of them could vanish, or the offline first browser caching could toss it out, etc. This would give people the same confidence they have in native apps.

            Web apps *should* have full access to the system. We have permission systems that are in practice really good.

            And having a standard archivable web app format would give us a true cross platform way to make apps.

        3. “We’re getting to the point where browsers are worthy of the decades old criticism ”

          I’m reminded of one of Remond’s early fears about browsers. That they would eventually render the OS irrelevant because that wasn’t what developers, developers, developers were writing software to. The browser had become a form of virtualization. Write for…run everywhere.

    1. Fire was two holidays ago. But is OS choice really as relevant as it use to be when even home virtualization (and hardware) is so cheap and easy to do*? One can run from the oldest to the newest irrespective of platform complete with associated applications. Images of all types traded as easily as candy, from containers to VMs.

      *Even GPUs can be virtualized, let alone pass-through.

    2. I read that I thought, isn’t that exactly the sort of personal workflow that the linux desktop encourages?

      Me, I run dozens of xterms to get things done. If we were all doing it the same way, it wouldn’t be linux. :)

  1. So I’m thinking about this, am I’m like, cool. But then I’m like, how is this any different than tabs or just another window? Now you have tabs on the task bar. or you could just pop a new window then that is a tab on the task bar. I think, well it let’s you open and close the window without thinking about it, i.e. remembering the url, all the clicking just to get to said webpage. Then I’m like bookmark? well then I have to dig through my bookmarks. Then shortcut on the desktop or start menu. I’m hard pressed to say that isolating a webpage in it’s own process is advantageous. other than security, why?

    1. ^This. The solution might be to close some tabs, not that I’m any better: My Firefox tabs scroll left and right and the Chrome tabs no longer have space for the favicon. It amazes me to think that there was a time when browsers didn’t have tabs though I wonder if it was better that way. I need to thin my gnome-terminal tabs too. Any tips?

      1. I’m not great at doing this, but what I have is a wiki with my project documentation and most of my web pages that I don’t want to close are related to one of them. So I try to put them there when I clean up. The other solution is that I have 5 monitors. So each monitor is a type of work. email/social/phone stuff, research, network management, house status. etc. also I break up activities into windows, stuff I’m trying to buy verse the other stuff I listed. Each group gets it’s own window.

  2. I don’t like these web apps posing as standalone… they always seem to forget your credentials. Worst offender is a local car sharing app that suddenly doesn’t know me any more when I’m in a hurry and it’s raining.

  3. I can’t relate to this whole the desktop is dead, everything is web thing.

    For me it’s:
    OpenSCAD
    Slic3r
    Emacs
    KiCAD

    Granted, I do usually have a web browser open at the same time, mostly for use in looking for help with those other 3.

    Yes, I do know that web-based alternatives to those programs exist but… I’m already waiting ages for some of my OpenSCAD projects to render. How much worse would the javascript clone be? And KiCAD? Are any of the web based alternatives really as full featued? I doubt that.

      1. And Audacity and Anki.

        Ok, I probably use the Anki Android app more than the linux application but there are card edits and reschedules that can only be done from the desktop application so I need that too.

        1. All they can really do is force people to use HTTP headers that mimic their desktop; there is a limit to what they can do without causing the website to also stop working for a lot of people.

  4. Just use chromium app mode:
    /usr/bin/chromium –app=https://web.whatsapp.com

    Everything works correctly as well as that external links are opened in the chromium session as tabs

  5. just say no to web-apps! I mean how many of them do you actually need versus how many of them are you using to chase some magic efficiency. I call it magic efficiency because most of these web-apps can be somewhat more efficient if you didn’t have to relearn the UI or the functionality didn’t change a few times a year. Before you go porting web-apps to a native desktop app and thus just moving the tab from your browser to your taskbar, you should go through your workflow and tool chain and simplify both. Learn to do a job and then close the associated windows (or browser tabs), stop jumping around between jobs, use less “tools” for your individual jobs, there are many solutions to your problem that don’t involve just moving the problem to a different location (browser vs taskbar)

  6. You can also do this with vanilla Chrome using the –app flag fwiw:

    google-chrome –app=https://example.com

    To make it an application available through your desktop environment, just add a Desktop file in ~/.local/share/applications like this:

    #!/usr/bin/env xdg-open
    [Desktop Entry]
    Version=1.0
    Terminal=false
    Type=Application
    Name=Example
    Exec=/opt/google/chrome/google-chrome –app=https://example.com
    Icon=youriconname
    StartupWMClass=example_app

    Chrome’s “create shortcut” feature used to do this for you automatically, but it doesn’t appear to anymore.

  7. Why don’t you just make desktop apps from web apps in Chrome, without using bloated Electron? In Chrome, go to the hamburger menu -> More tools -> Add to desktop or menu -> Install to desktop.

  8. Hey since you said you spend a lot of time searching for a particular tab, I just wanted you to know that there’s a Chrome extension to allow you to search for open tabs. I think it’s called ‘search by tab’. Check it out. You can start typing the name of the window in the tab and it will find it for you. If that’s not the right extension name, let me know and I’ll find it for you; I’ve got it installed on my laptop.

Leave a Reply to superkuhCancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.