Create a Native Application of any Web Page Using Nativefier

By Pratyush Mishra

Ā·

3 min read

Create a Native Application of any Web Page Using Nativefier

Hi everyonešŸ‘‹, Do you use some websites very often? Having a native app for them on your computer can really make them more accessible. Imagine you do not have to go to your browser and then look for the tab that has your website opened. In this post, weā€™ve covered a command line tool called Nativefier that lets you create native applications for any web-app or webpage. Weā€™ve also covered the steps that you can follow to create a native application for any of your favorite web pages.

You can refer to my YouTube video to see a working tutorial for better understanding and a step-by-step guide of the same.

Nativefier Review

Nativefier is open source and written in JavaScript and uses Electron to make native applications for Windows, Mac, and Linux. The applications created by Nativefier can preserve some configuration and settings to give you a more app-like experience. To use Nativefier you need to have Node.js installed on your machine.

  • Open a CMD window in the desired directory.
  • Execute the following command to install Nativefier.

npm install -g nativefier

  • Once the installation is complete, you can execute the following command to create a native application for any webpage or web-app.

nativefier --name ā€œApplication Nameā€ ā€œhttp://applicationurl.comā€

  • This should create an application named Application Name whose URL is applicationurl.com. Now you can open the folder created by Nativefier and locate the executable for your application. You can create shortcuts to this exe file so that you can directly launch it from the start menu, taskbar or any other place of your choice.

Flash Support

  • If your chosen website requires flash support, you can easily add it by adding a ā€“flash tag in the installation command. The command would become:

nativefier --name --flash ā€œApplication Nameā€ ā€œhttp://applicationurl.comā€

  • For flash to work, Google Chrome is required, or you need to install the PepperFlash Chrome Plugin manually.

Application Menu

  • Since these applications are nothing but a WebView wrapped around your desired URL. You can perform some basic operations that you could have done on a normal web browser. To do so, you can access the application menu by pressing the ā€˜Altā€™ key on your keyboard. Now using these menus, you can navigate forward or backward or reload the entire application.

  • Like most web browsers, you can easily zoom in using Ctrl+= and zoom out using Ctrl+-. There is even an option to toggle full-screen mode. The best part about Nativefier-generated applications is that they come with full-fledged Chrome-like developer tools. You get access to the console, network, and all other features that are offered by Chrome Developer Tools. You can enable/disable developer tools by hitting Ctrl+Shift+I.

  • As mentioned the applications can preserve some minimal configuration, and this can be cleared by going to the application menu and then selecting Edit and then Clear App Data. This should completely reset the application with all the sessions or logins that you might have maintained.

Portability

  • All the applications generated using Nativefier are portable. You can easily carry them around with all their configuration. This makes sure you have your data everywhere and prevents you from logging in again and again.

  • Nativefier is a great tool to have in your collection. If you use any website so frequently that you feel like having a native application for that, you must give Nativefier a try. The applications generated are simple, fast, and reliable. Also using your favorite web apps in a dedicated native window is a great experience in total. Iā€™ve used Nativefier to create native applications for most of the Social Networks, GitHub, and various other web apps. Click here to know more about Nativefier.

Alright, guys! I hope this article was helpful for you if it is the leave your comments below. I will meet you in another article until then KEEP CODINGšŸ¤—.
Ā