Can I use ionic framework to create Mobile web apps?

ionic-v1
1

I came across today mobile-angular-mobile framework.

How different is this from Ionic framework?

Can I create responsive web apps using Ionic framework?

2

You can take a look at this page and decide yourself.

3

Hey there!

So ionic’s focus right now isn’t really mobile web apps, but mobile hybrid apps that are wrapped with cordova.

4

@mhartington Do you see any potential complications from using this as a web-app framework?

5

Just browser support and support on older devices. Plus the UI/UX isn’t really for web-apps.

So ionic may not work great for web-apps, but you can still use angular.

6

Not worried about browser support with our targeted devices. And the UI/UX is what the client wants. (native look and feel).

I’m more worried about down the line, implementing $cookies resource or other potential gotchas.

7

Well since ionic is built on angular, it should be good.

But a good place to check out for info would be CanIUse

http://caniuse.com/#feat=namevalue-storage

8

Awesome, Thank you once again for your help! Appreciate it.

9

What about the way to inject or not dependencies ? I’m thinking about a smart way to kinda switch on or off cordova calls depending if its an web app or on the “native” app.
One way of doing that would be to check at every cordova call if cordova is available or not but that doesn’t seem like a good scalable/maintainable solution. Any better idea ?

10

Maybe to function tests when the app initializes itself. Wrap those in a try catch maybe and then if a feature works have a global variable set or something in a service set so the rest of the app can decide whether to show or hide certain things?

Just like the others though, depends how much you want to keep the platforms consistent and what your needs are.

11

As for now, I have a cordovaCall service where I have all the cordova calls I do (Keyboard, Geolocation, Push, StatusBar, Action Sheet, etc …)
Is not much of a show or hide but what to show. Example: On share button click, call the action sheet if native or call a modal if web.
I thought of having a method that runs on init to check if cordova is available and propagate that to every controller/directive where there are calls to the cordovaCall service. I’ll try to implement your solution, @nnnnnorthhhhh as it seems like an interesting approach…
How does injection of unnecessary dependencies affect app speed ? Should I care about it? Sorry if it sounds like a really dumb question

1 Like
12

@pmigabreu Probably little to none. It’s going to look at those to see what’s going on but if you’re not calling them they shouldn’t affect during-use performance. I follow a similar pattern too for all my apps, I have a service called Settings and just include that with every controller. Then with the new ionic betas, just tie into the before enter event for the view and have it check Settings.isRunningMobile and set it as a scope wide variable for your UI and controller to handle the rest. I do something similar in a different angular project (not ionic, though) for localization and different app functionalities for different locations.

13

are you tried

$: ionic platform browser

in your project? you can see some info here:

[http://j.mp/19zzTJM][1]

Kind regards,

@carlosrojas_o
[1]: http://j.mp/19zzTJM

14

Don’t know if it’s helpful or not but I implemented this the following way,

I have a function in a service that gets two arguments, the native function and the web function. In other words, it gets the action I want to do if it’s a native app or a web app (non cordova).

Not sure if it’s the best way to do it but it was the solution I came up with. Any suggestions are welcome of course.

    var isCordovaEnabled = (function(){
        if(typeof $window.cordova === 'object'){
            return true;
        }
        else{
            return false;
        }
    })();

    this.checkIfCordova = function(nativeCallback,webCallback){
        if(isCordovaEnabled === true){
            if (isFunction(nativeCallback) === true) {
                nativeCallback();
            }
        }
        else{
            if (isFunction(webCallback) === true) {
                webCallback();
            }
        }
    }

Implementation example on a directive:

function link(scope, element, attrs) {
    cordovaCall.checkIfCordova(function(){cordovaShare(scope);},function(){webShare(scope);});
}

...

function webShare(scope){
    //use ionic modal
}
    
function cordovaShare(scope){
    //use cordova social share plugin
}