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.

+3


source to share


1 answer


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.

+1


source







All Articles