Introduction: Make a Desktop App in the Browser

Picture of Make a Desktop App in the Browser

To do this we're going to use an application I developed called WebDGap. It'll allow us to convert any website or HTML/CSS/JavaScript/NodeJS web application as a native desktop app. WebDGap uses the nwjs framework for making your apps run on both 32bit and 64bit processors.

Step 1: Getting Started

Picture of Getting Started

WebDGap requires you to add your application's name first.

- Load your application's logo second.
- Lastly load in your application's source encased in a zip file.

IMPORTANT!!! (your zip file must look something like this, when exporting it as a desktop/chrome application, or extension)

- index.html
- css/style.css
- js/jquery.js
- js/script.js

The zip example below WILL NOT WORK!!!

- AppName/index.html
- AppName/css/style.css
- AppName/js/jquery.js
- AppName/js/script.js

NOTE: Larger zip files take a longer time loading and exporting!

If your application contains audio please read up on "Using MP3 & MP4 (H.264) using the video & audio tags" - https://github.com/nwjs/nw.js/wiki/Using-MP3-&-MP...

Now when you first launch WebDGap you will be presented with a "How To Use" video. You can watch that or continue along as we'll be making a Mac app on our Android phone! Why? Because many people still believe you cannot make Mac apps on non-mac devices and by showing you can make a Mac app on an Android phone will give them that WOW factor they need :D

Step 2: Exporting for Mac

Picture of Exporting for Mac

Now the file menu is coded differently on a Mac than it is on Windows and Linux (which we won't discuss here). It is also displayed differently on Windows and Linux which all we're going to do with that is make sure our application's name is visible in the Mac Finder.

Exporting Our Mac Application!
- First choose your application's name! (This will be used in the app, will need to mod it later to be visible on Mac devices via the Finder)
- Next load in your applications logo (We will need to mod it later to be visible on Mac devices)
- Next load in your zip file
- Now export for Mac's


Setting the Icon!
- Just like for Windows you can convert any image to a Mac icon by going to `iConvert Icons`
- Next open up your Mac app's contents (whatever.app). On Android you can use ES File Explorer if yours doesn't have a built-in File Explorer.
- Replace the `nw.icns` file with the new icon you've exported (Make sure the new icon you exported is named nw.icns)

Showing The Application Name in the Finder!
- Open the `info.plist` file into a text or code editor of your choice. Cause we're doing this on an Android phone we can use DroidEdit.
- Change the application name to your apps name on line 10 and 49. (Should be next to CFBundleDisplayName and CFBundleName)

Now you can compress/zip and distribute. Thus Mac users should have no problem running your application!

Step 3: Summary

Exporting for desktops is super easy but mobile devices require more work. Now I've had MAAANY people ask me. "Why is this free?" My answer is simple. Because it's faster and easier to make the world a better place. Stop complaining and enjoy. Otherwise, donate and/or help contribute :D

Mucho amor a todos. Take care and always have fun :)

Comments

kakang_anip (author)2017-05-18

thanks for all knowledge that you had give.... can it done for Microsoft desktop app?

MichaelS1307 (author)kakang_anip2017-05-18

Yes but cannot submit to Windows store. That requires Visual Studio.

About This Instructable

274views

12favorites

License:

More by mschwartz3:Make a Desktop App in the BrowserHow To Add Instructables to Firefox's Quick Search!
Add instructable to: