Greetings. I wish to create an app written entirely in HTML5 / CSS / JavaScript / JSON, something I've done before in browser exclusive format and am familiar with. This time however I need to do something different: I want my application to work directly in web browsers, but also package and distribute it as a standalone program which can be downloaded and ran in its own window. The plan is to have a single project and repository on Github, compatible with Github Pages (the program can be ran inside Github), but also possible to launch as a standalone program if you clone the repository and open it with the service used to package / compile it.
Creating and distributing the standalone version is the new and tricky part: It seems what I'm looking for is a tool called Electron, which I understand will compile my application using Chromium to emulate the browser... this sounds like the safest and most common approach to go about it. As an alternative I understand I may use Node Webkit, which I hear is simpler but Node.js may not be what I'm looking for here. So the starting question would be which launcher / backbone is best for creating a standalone app out of a website?
My main question is about the details of scripting and designing the product, so the same thing can act as both an app or a website depending on how it's accessed. The main page will be called index.html as usual with content in subdirectories (css for styles, js for scripts, svg for icons, etc) which should work with both ways. There are of course some specifics I'll need to be aware of:
- Obviously I need my code to know which version is running. Anything that works in an if statement will do meaning `if(running_in_browser === true) { ... }` or oppositely `if(is_standalone_version === true) { ... }`. Knowing the browser name / version should be irrelevant, it only matters to know if it's the standalone version or not.
- Stuff like settings and logs will be stored in json files inside subfolders. For the standalone version I'll want the settings path of the program to be something like `/home/username/.config/myapp/settings` whereas for web browsers I'll want to use the cache which should mean something like `/home/username/.mozilla/firefox/#.default/cache/myapp/settings` for Firefox. The structure of the settings directory should be the same, only its location thus the read / write process may differ.
- If I want to log something to the console, do I need to use different `print()` functions based on the type running? For the standalone version I expect stdout to be printed in the console, for the web version in the designated browser console.
- I will desire support for notifications. In browsers websites can ask for a permission allowing them to pop up messages in your system tray. Can the code be written in a way that handles tray notifications for both runtimes?
The rest of the code should be common between the two environments. Let me know if there's anything else I should be aware of pops to mind regarding this sort of design.
Back to top
