Integration of ionic structure and nw.js
I am going to create a nw.js (node โโwebkit) application for portability (Mac and Windows). Since I want the app to run on mobile devices (iOS and Android) later, I am using the Ionic framework. As suggested by Ionic folks , it is better to keep two sets of views, one for Ionic (mobile) and one for nw.js (desktop). Hopefully I can exchange the codes in the controller and factory.
So here's what I am doing:
1) Create a project with an ionic skeleton:
ionic start --appname Hello Hello sidemenu
cd Hello
ionic serve
...
quit
2) Create html entry point for nw.js and set up manifest:
cd www
cp index.html app.html
and remove the following cordova related lines in app.html:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
then create package.json
:
{
"name": "hello",
"version": "1.0.0",
"description": "Hello World",
"main": "app.html",
"window": {
"title": "Hello",
"toolbar": true,
"frame": false,
"width": 800,
"height": 600,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
},
"author": "Horace Ho"
}
and run your app in node webkit:
nw .
Basically I created app.html
and package.json
in the www
project folder Ionic skeleton. I now have a nw.js skeleton project with Ionic and angular frameworks.
My question is, does the above make sense? As long as there are two entry points (index.html for Ionic, app.html for nw.js), is it safe to add unrelated html / css / js to the www
Ionic folder ? For further expansion, I can replace Ionic with Bootstrap and leave only AngularJS codes (controller and factory) to be shared between mobile and desktop apps.
source to share
Ionic is clearly mobile, so you'll have to make at least some compromises on your desktop. Having two entry points will explicitly solve this, and it is safe (although not efficient) to have two separate html / css / js for both. However, I would suggest defining as much generic code as possible, at least for css / js, and using it for both. Try using sass / scss instead of plain css if possible.
If you want to have a consistent experience for desktop and mobile, I would suggest looking at the angular stuff . I am currently developing a desktop and tablet app for which it works very well, but angular stuff is clearly mobile first, or at least very mobile friendly. This makes it more mobile-friendly than Bootstrap, which I think is desktop.
source to share