Topics


Pages


Content

Byline:

Make any web page a desktop application

Key links

  • 👨‍💻 Repo: repo badge stars badge forks badge

Info from the website:

Nativefier is a command-line tool to easily create a desktop app for any web site with minimal configuration.

Apps are wrapped by Electron (which uses Chromium under the hood) in an OS executable (.app, .exe, etc) for use on Windows, macOS and Linux.

Example usage

See also:

Install globally with NPM.

$ npm install -g nativefier@latest

Run against a website.

$ nativefier URL

You can try it on https://github.com. Then you can browse the docs or sign in and browse repos.

Or on https://medium.com. The docs of the app suggest WhatsApp web (though why not just download WhatsApp desktop app, I don’t know).

For example, on macOS:

$ cd ~/Downloads
$ nativefier https://michaelcurrin.github.io/badge-generator/

That creates a directory badge-generator-darwin-x64/ with a file badge-generator.app that you can double click on. You can explore it with cd and ls as a directory, but that is not necessary.

Move it to applications.

$ mv badge-generator-darwin-x64/badge-generator.app ~/Applications

Then you can double-click on it in your applications directory.

There are just license files and metadata left - so you can delete the directory in Downloads.

$ rm -rf badge-generator-darwin-x64/

My experience

I’ve used Nativefier a bit and found it really easy to use. I was wondering if I should learn Electron or similar so I can build a desktop app which uses HTML, CSS and jS internally. But that was too much effort. Then I discovered Nativefier, which does all the hard work for you.

Instead of browsing YouTube, or GitHub, or Medium or whatever in your browser, you get to have a separate application that you can launch. It works as its own window, so its easy to switch. And you don’t have to have the browser open.

Extra features

These were not clear from my first experience but now I see how they work.

I found under the View menu (and with corresponding keyboard shortcuts).

  • You can navigate with the Back and Forward button.
  • There is a Reload button to refresh the page.
  • There is a Toggle Dev Tools option.

You can even make new tabs. There is a plus button in the top right, which defaults to the homepage of the site you set up. Also, if you press CTR/CMD when clicking a URL, it opens thatURL in a new tab within the window.

I can I can latest content of a webpag within the app, without having to rebuild the entire app. You might have to press the Reload button though to force a refresh.

Downsides

It adds convenience.

But it has some downsides. At least in the default setup - I haven’t explored options.

  • No URL bar.
  • No clear back or next button.

Alternatives

An alternative to using this flow is just moving a browser tab to a separate window. Then you can switch between say 20 Firefox tabs as usual and 1 Firefox tab in another window. You’ll still get all the features of running in a browser. And depending on your OS and preferences, you might have one Firefox icon and two windows to choose from, or it appears as two pieces in your taskbar.

Another option is to use Chrome and Firefox and keep them open. I have one for work and one for personal stuff, including music playing and articles to read. I could even use Chromium (or that other Firefox experimental browser), so that I have two Chromes (or two Firefoxes) to choose from and start independently.