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.



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *