Nativefier
Convert an existing website into a desktop app, using one command
Topics
Pages
Content
Byline:Make any web page a desktop application
Key links
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.
Related sections
- Electron dev resources.
Example usage
See also:
- Badge Generator repo
- Install as Desktop app in that project’s docs.
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.