Earlier today the Ionic folks published an article about Ionic 2 and PWA (Progressive Web Apps) - "Announcing PWA support in Ionic 2". The gist is that - you guessed it - Ionic 2 apps will support PWAs out the box. You don't have to actually make use of PWA of course, but if you want to build an Ionic 2 app for the web, and not hybrid mobile, then Ionic has done some of the grunt work to get you started down that path. I thought it might be useful to remind folks how you can build an Ionic web apps instead of hybrid mobile apps.
First and foremost, if you've been playing with Ionic V2 apps, most likely you've been using the beta version of the Ionic CLI. A few weeks ago the CLI was updated to 2.0 and you should no longer be using the beta version. To be clear, while the Ionic CLI is at version 2, the Ionic framework itself still defaults to version 1 (and Angular 1). To work with V2 apps, you need to pass the --v2 flag when creating your application.
To work with a web app, not Cordova, you should add another flag: -w. This tells the CLI to not add platforms and other Cordova-related stuff.
So to summarize - you can create your new app like so:
ionic start noHybridNoProblem --v2 -w
Once done, you've good to go. But then you may wonder - how in the heck do you actually view your app? Normally I use ionic emulate ios to see my builds in the simulator. Since we aren't using Cordova, that's not an option.
Instead - you'll want to use the Gulp script included in the project. Don't worry if you aren't familiar with Gulp, it's basically a simple automation library for projects. To "build" your app into something you can browse, simply do:
gulp build
You should see output like so:
And you can then see the results in your www folder. When I tested, I used httpster to fire up a little web server. Everything worked as expected, but you want to remove the line including cordova.js in your index.html file since it won't exist.
Finally, if you want the code to build automatically while you edit, use:
gulp watch
That's it. Enjoy.
Archived Comments
"ionic serve" does not work anymore?
anyway i tested PWA and looks great for "in company" apps... no more headache to go thru' the store anymore
Sure - and you can use that - my thinking was that I'd probably want to test as 'close to the bone' as possible and that means a vanilla web server. httpster makes that trivial.
Awesome. Thanks for the info. I was wondering how this worked.
Is it possible to have both a hybrid mobile app and pwa? Keep the -w flag or is -w used if only building a pwa?
You could - but my gut says that's a bad idea. So for example, you could have code that says, "If I'm a hybrid app, I can read Contacts, so enable this button". But it feels like you'll have a mishmash of features imo. I don't know. I don't have a great answer for this outside of saying I'd just pick one and focus on one, even though you COULD do both at once.
I think the real dream is to be able to write an Angular 2 web app and share code between the web app and Ionic2. So, somehow in the build process, output the component (classes) into directories for the web and Ionic and create views for each.
Great Raymond!
We already use Ionic2 for developing web app integrated in a Liferay Portal as portlets, sharing authentication stuffs and consuming json web service exposed by the portal.
We used "ionic serve" to test the app outside the portal, but "gulp build/watch" give me new perspectives like autodeploying to the portal web server.
Christophe
Yes, ionic2 blog has example about it, its just a few line of codes... however you cannot use "plugins" :-) lots of "if" in your code then :-P
so far ionic2 seems to work fine on a webserver like a normal angular2 application; very different from ionic1
Yeah, it works well as a web app, but what I'd like to do is create a separate set of views for a web app. So you'd have your Ionic views for the mobile app and more website appropriate views for the web app, but use the same code. I'm going to try it on a future project.
Could you explain what kind of web app (if any) you get when you go down the “hybrid mobile app” path? Is it the same one that is described in your article? I’m asking because I’m anticipating that a pure PWA + iOS app combo could be in demand in the near future.
Hi not sure if this is something simple, I want to offer a mobile web version of my app also, i.e actually view in a browser, (not PWA in the sense of add to home screen etc) however it seems that some of the components still use the device resolution. I.e device height, and does not factor in the normal browser status bars etc in height calculations, as such things dont display properly. any ideas?
In particular <ion-slide>
I think you were referring to 'httpster in the last paragraph instead of 'httster'
Thanks - will be fixed in next update.
I'm not entirely sure I get you. A PWA is still a web app and runs in the browser. That being said - if you are seeing issues with layout in UI items like ion-slide, your best bet is to create a reproducible example and file a bug report.
I'm not quite sure I get your question. Are you asking what a hybrid mobile app is? I don't think so - but I don't get exactly what you are asking either.
Hey mibinn could you explain how you packaged an ionic 2 app inside of a liferay portlet? I'm trying to do that on liferay 6.2 with an existing ionic 2 app and existing liferay portal. Any help would be greatly appreciated.
Hi Rodrigo,
It's a bit late for me tonight but I will try to explain how we do that :
We do it this way :
- build the Ionic app for "browser"
- creatan empty liferay plugin (portlet)
- copy all build stuff to the liferay plugin, in html folder
- Create a simple JSP for the portlet with an iframe inside it, adressing the Ionic index.html (you should set a fixed height to your iFrame)
- Build the portlet, deploy it and drag on a page
Bonus :
- to consume liferay (web) services from the ionic app, we need to retrieve the pAuth from Liferay and use it for each http request (from ionic code). So we have added a "serveresource" method insdide the portlet class to deliver this pAuth in response of an http request coming from the Ionic app.
Other way :
- we also tried to include directly the root code of the ionic app ( the launcher that is in the index.html page) instead of an iframe. It works almost but we had trouble with relative positionning (x/y) of element. That's the reason why we choose to use iFrame. And iFrame is de facto asynchrous.
Architectural :
"Server" component : Liferay
Liferay service (and our own service made by service builder) are consumed by the Ionic app via the JSON Remote services.
"Client" component : Ionic App
Inside Ionic App we define a service layer, that make http request towards the json api of Liferay. Nothing special here, just the natural Ionic/angular2 mechanism (providers, subscribe, etc...)
And it works ! efficiently ! easier than alloyui or any javascript library.
And moreover : same code can be used to build a mobile app (androïd/ios) or even a desktop one (via Electron).
Regards !
Christophe (aka Mibinn)
You sir, are a life saver. I was about to rebuild the ionic app as an angular web app but your solution worked! Thank you so much :DD
EDIT: There is no CORS issue. I was just calling the wrong requests!
Thanks again and I appreciate your help
Was offline last days, but glad you had success. I have some tips about cors and auth. I'll post all about that soon ... Stay tuned!
That would be amazing :D putting the app within liferay as a portlet solved my cors issue. I'm also able to make calls as long as I have email and pass basic auth header (I don't need to include the pAuth param for some reason). What I haven't figured out is how to perform Facebook login using jsonws since I don't have a way of looking up users by their facebookId and I don't know how to create a basic auth header using a facebook response.
Any tips would be greatly appreciated!
Have you gotten deeplinks/url routing to work with ionic 3? Looks like in portal environment, liferay impedes the app from controlling the url.