Deploy ionic app as a website

ionic-v1
1

Hi guys, need a bit of advice regarding webapp vs ionic mobile app.

Ideally would like to have my app to be accessible from app store (iOS to start with) as well as via the web (for non-iOS mobile access and desktop)

Would it be advisable to deploy the ionic app code (assuming it doesn’t use anything from cordova.js, or phone’s functionality) as a web site to allow access for non-iOS mobile phones?

And for other non mobile traffic, forward requests to a angularJS based web site (hoping to share angularJS code with web and ionic app) ?

Any potential security issue?

Thanks.

3 Likes
2

I wouldn’t recommend it, ionic is more geared to be used as a cordova app rather than a mobile web app.

Ionic is focused on building native/hybrid mobile apps rather than mobile websites.

3

Is the only limitation to deploying an ionic app to a website is browser support? might there be anything else?

4

Browser support & UI/UX mainly.

5

Ok, thanks. Has anyone tried it before and has some pros and cons on his mind?

1 Like
6

I just did this yesterday with an app using a Rails-backed API. I placed my built assets inside the public/ directory and everything worked.

1 Like
7

A con would be support for IE and FF, which are two popular browsers & IE being the most (unfortunately). While we do have some IE in the nightlies, it’s mostly for WP8. So keep that in mind

8

Judging from the CSS docs about 80%-90% of Ionic works fine on Firefox and IE10+.

IE9 is support terrible but IE10 is pretty good. Things that get let down are selects, sliders and some padding issues. Support in Firefox is even better with only a few problem areas.

Assuming that someone was willing to test and reimplement certain components to catch these cases, I think Ionic could make a good basis for a browser based webapp. IE9 support really isn’t that important, at least for webapps.

9

You are talking about desktop browsers, right?
What about mobile browsers? is there good support for them?

10

Did anyone wrote a css, which will convert ionic specific UI elements to a web application elements? That css would be a great resource I guess, if someone’s not really concerned about browser support! I am currently looking for one, so please point me if someone has already written it.

Thanks in advance.

1 Like
11

Let me “up” the thread. Can somebody share with positive experience of using Ionic for deploying regular mobile web site? I mean site which works great (transitions, effects, appearance) in mobile Chrome and Safari?

12

I think using ionic is like driving a sportscar in the desert. Maybe it works but it’s not supposed to do the job. There are other frameworks that are better made for web like jQuery Mobile. As soon as someone uses Internet explorer your users will hate you. Ionic is made and tested on a very limited amount of browsers because they only use the native ones from iOS and Android + crosswalk.

My company uses ionic as hybrid app framework for mobile devices and a webpage that gives the user the same possibilities, but we developed an adapter to have one core code for all platforms. The great thing is that this is quit easy, because ionic uses AngularJS. We used Bootstrap to make our website mobile ready.

Good luck.

3 Likes
13

Thanks @Janson! In our project we want to achieve the same - single code base for 3 platforms: native app for Android, for Iphone and a web-based version for mobile browsers of both Android and Iphone

2 Likes
14

@the_ghost good luck, send me a pm if you need assistance.

15

I don’t see any problem in Chrome and FF.

Oh… I forgot IE… does any one in the world uses IE? :smiley:

16

As it turns out yes,

https://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0

17

Oh yeah. I was just trying to be humorous :slight_smile: I know IE is one of the most widely used.

But personally, when I setup my desktop, I use IE just to download other browsers. :smiley:

2 Likes
18

How would I go about deploying my ionic app as a cloud based website? (Purely to easily and quickly allow clients to test basic functionality of my app).

19

I have both running: mobile App and desktop browser. It works fine as long as you are ok sticking to mobile UI conventions for the desktop app. I also added some code to let me test the platform deviceReady.device().isBrowser and do the right thing.

It’s a single-page angular app, so hosting it is really easy in the cloud. I just rsync it to my server and it runs fine. But I only care about modern browsers - no IE support expected.

You can get a link to the App on iTunes and also the website ('the Test-drive) here: http://app.snaphappi.com/on-the-go/#call-to-action

# coffeescript
angular.factory 'deviceReady', [
  '$q', '$timeout',  '$ionicPlatform', '$cordovaNetwork', '$localStorage'
  ($q, $timeout, $ionicPlatform, $cordovaNetwork, $localStorage)->

    _promise = null
    _timeout = 2000
    _contentWidth = null 
    _device = {}
    _device = 
      if $localStorage['device']?
      then angular.copy( $localStorage['device'] )
      else {    # initialize
        id: '00000000000'
        platform: {}
        isDevice: null
        isBrowser: null
      }

    self = {

      device: ()->
        return _device

      contentWidth: (force)->
        return _contentWidth if _contentWidth && !force
        return _contentWidth = document.getElementsByTagName('ion-side-menu-content')[0]?.clientWidth
          
      waitP: ()->
        return _promise if _promise
        deferred = $q.defer()
        _cancel = $timeout ()->
            # console.warn "$ionicPlatform.ready TIMEOUT!!!"
            return deferred.reject("ERROR: ionicPlatform.ready does not respond")
          , _timeout
        $ionicPlatform.ready ()->
          $timeout.cancel _cancel
          platform = _.defaults ionic.Platform.device(), {
            available: false
            cordova: false
            platform: 'browser'
            uuid: 'browser'
          }
          $localStorage['device'] = {
            id: platform.uuid
            platform : platform
            isDevice: ionic.Platform.isWebView()
            isBrowser: ionic.Platform.isWebView() == false
           }
          _device = angular.copy $localStorage['device']
          # console.log "$ionicPlatform reports deviceReady, device.id=" + $localStorage['device'].id
          return deferred.resolve( _device )
        return _promise = deferred.promise

      isOnline: ()->
        return !$cordovaNetwork.isOffline()
    }
    return self
]
2 Likes
20

I try to do the same. A link on the website to access the contents of the app, as mentioned (http://app.snaphappi.com/on-the-go/#call-to-action).

But I do not have much experience with angular / ionic. Which runs the factory deviceReady? In the run block? Could give me a more complete example if possible?

Thanks.