Title: Ionic 2 Now Supports Desktop. Does that mean one code, all device?
Tags: angular;typescript;ionic-framework;ionic2;progressive-web-apps
Question: I have seen this yesterday from my email
Ionic is now Desktop Ready Build apps for phones up to large desktop
displays with Grid and Split Panel Over the last few weeks we've been
hard at work adding support for one of Ionic's most highly requested
features: Desktop and Tablet support.
With the new responsive Grid system and Split Panel in Ionic Framework
2.2.0, Ionic developers can now build UIs that scale up from smartphones through tablets and desktop displays. All with one code
base!
Our goal with Ionic is to enable web developers to build apps on all
the platforms they care about. While mobile is still our bread and
butter, since Ionic is based on web technologies it works just as well
in a mobile app as it does on the web or as a desktop application.
Give the new Grid and Split Panel a try today, and let us know what
you think!
Does this mean that I can create an ionic app for IOS, Android, Windows as well as hosting the 'app' to my website and to www.mywebapp.com to view exactly what I would see in the mobile apps (All with one code base!)? Or is this idea too good to be true.


Here is another answer: Theorically you could have 1 code base for native apps, PWA and your desktop app. It depends on your business I think.
I went a slightly different route for QueMesa:
The DESKTOP website is like a landing page. It has some terms and conditions, FAQs, blurb and about pages and it can launch the app:  https://www.quemesa.com
This is a vanilla Angular4 app + Bootstrap but I could just have easily have used Wordpress (ie. it is NOT an app - it's a website).
The mobile web app (PWA) is on a different domain: https://m.quemesa.com
It does NOT look great on anything bigger than an ipad, however it still works. The amount of effort I want to invest in this to make it look great on a desktop is purely a business decsion based on my target users and the cost/benefit.
Note: If you navigate to https://www.quemesa.com on a mobile app then I do an automatic redirect to the mobile web app (so mobile users always go straight to the mobile web app). Only desktop users will ever see the desktop app.
Thanks to Ionic, the exact same code is used for the Android and iOS apps: https://www.quemesa.com/mobile-app
So I think each use-case is different and it depends on WHAT your app is and how your users will use it. I currently in Mexico and native apps are not nearly as popular as they are in other parts of the world (yet). However, desktops are not used nearly as much as mobiles, so the PWA is one less barrier to entry.
The only reason my main landing page is an Angular App/serparate codebase is because it used to be a fully functional app until the Ionic mobile apps surpassed it in functionality. I then had the choice to can it, keep it in synch or just remove the app parts of it and leave it as a landing page.
The reason I don't use one code-base completely is because the Ionic layout is just not close enough to the UX of a desktop website. So the desktop website just launches the app...

Here is another answer: Does this mean that I can create an ionic app for IOS, Android, Windows - Yes
as well as hosting the 'app' to my website and to www.mywebapp.com to view exactly what I would see in the mobile apps (All with one code base!) - No
Here they are talking about the progressive web apps (PWA).When you develop a PWA you must consider a number of factors.The key thing is you cannot use Native mobile plugins with that apps.B'cos native plugins have been built only for mobile devices.Likewise, so many factors are there.Please read below article to learn more about it.
What is a Progressive Web App (PWA)?
A Progressive Web App uses modern web capabilities to deliver an
app-like user experience. They evolve from pages in browser tabs to
immersive, top-level apps, maintaining the web's low friction at every
moment.
If you would like to see the demo of Ionic build PWA see this:  Ionic PWA
Progressive Web Apps are:
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor, desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Use the app-shell model to provide app-style navigations and interactions.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via TLS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation.
Here you can read more about above concepts: Getting started with Progressive Web Apps
Comment for this answer: You're Wrong.If you see the Ionic conference app which I have shared above that is a mobile app.You can see that now it works as a PWA also.Why? B'cos they have designed it carefully according to cater both worlds.You too can do that way.But if you use native plugins then you have to remove those stuff from your PWA.Hope you'll get my point.It is all about carefully design the app. You can use most of the Ionic2 UI components with the PWAs. You can definitely use more than 70-80% of the code base with both worlds. Maybe more if you design it by considering the both app types.
Comment for this answer: If you start a project in that way then sooner or later you'll have completely 2 different code bases for both app types.I don't think that is a good option.So start it as one project.When you'll have requirements which it cannot cater to both app types, try to develop it as a separate pluggable module.If you do so then you'll have a single project and different modules which are suitable for different app types.
Comment for this answer: Thanks. So what you mean is, if I create an ionic app todo app for the mobile platforms that stores and reads data in the cloud, if I want to create a desktop version that syncs with the cloud, I will need to create a 'seperate' ionic project with modified code? I am guessing that would be pretty much the same as creating the desktop web app via angular 2 if I do not need the ionic UI right?
Comment for this answer: Sorry for all these questions. I'm trying to get my head around it as I have build PWA with Angular 2 and explored Ionic 2 a little bit before this announcement. So in short, building ios + android + windows app from Ionic is one project (do it all in one go). And If I want a progressive web app version that is hosted on www.myapp.com, I will need to create a SEPERATE ionic project and harness whatever code I can use right?

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2017:00:03/23/17', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><typescript><ionic-framework><ionic2><progressive-web-apps>', 'Title': 'Ionic 2 Now Supports Desktop. Does that mean one code, all device?', 'ViewCount': 3092, 'id': 42977466, 'user_AboutMe': None, 'user_AccountId': 10197316.0, 'user_DisplayName': 'ErnieKev', 'user_Reputation': 2631.0, 'user_Views': 96.0, 'user_id': 7528750.0}}