Turning Websites into Web Apps Instantly

What is a Web App vs Website?

In a web application, the user not only read the page content but also manipulate the restricted data. A website provides visual & text content which user can view and read, but not affect it 's functioning. Web applications need authentication, as they offer a much broader scope of options than websites.

Nativefier

As described from Github, it's a command-line tool to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by Electron in an OS executable (.app, .exe, etc.) for use on Windows, macOS and Linux. Jiahoag did this because Jiahoag was tired of having to ⌘-tab or alt-tab to my browser and then search through the numerous open tabs when Jiahoag was using Facebook Messenger or Whatsapp Web.

Why would I use this?

In my case, I don't get tired over time opening my browser just to access websites like Twitter and Reddit. With Nativefier, I could just click and open and the web page will be there right in front of me.

Using Nativefier

Since Nativefier is a command-line tool, you might think it will be a little confusing. It's really not if you look into it, all other commands will also be listed below this post. Nativefier does support Windows, Mac(10.9 and up), and all Linux operating systems.

Make sure to have Node installed first and then we can continue. Then open your terminal/cmd. Here is a basic example of creating a web app with Nativefier:

nativefier --name "Name of App" "https://LinkToSite.com"

There also a lot of other commands to use even for adding an icon, custom CSS, and more! And I will put more examples down below that may help.

Icons

When adding a custom icon, the extension of the image needs to be right for your operating system. For Windows, it must be a ICO icon. For Mac, it must be a .icns icon with a size of 512x512. For Linux, luckly, it can be a .png image which is easy to work with.

More Examples

Applying Icon

nativefier --icon /path/to/icon.ico --name "Name of App" "https://LinkToSite.com"

Setting a default size

nativefier --width 1200 --height 750 --name "Name of App" "https://LinkToSite.com"

Setting dark mode for macOS

nativefier --darwin-dark-mode-support --name "Name of App" "https://LinkToSite.com"

Adding a custom css file

nativefier --inject /path/to/cssfile.css --name "Name of App" "https://LinkToSite.com"

All Commands

Nativefier has more commands to use when creating a web app, click here to view them.