Ionic 2 has now expanded its functionality to include desktop support. Can this mean that a single codebase will work

Yesterday, I came across this information in my email.

Exciting news: Ionic is now Desktop Ready! Build apps that can seamlessly transition from smartphones to large desktop displays with Grid and Split Panel functionalities. After dedicated work adding support for one of the most requested features, we are proud to introduce Desktop and Tablet support in Ionic Framework 2.2.0.

With the introduction of the responsive Grid system and Split Panel, Ionic developers can now create user interfaces that adapt fluidly from small screens to tablets and desktops. It's all possible using a single code base!

Our vision for Ionic is to empower web developers to craft applications across multiple platforms. While mobile development remains our primary focus, Ionic's foundation in web technologies enables seamless transitions between mobile, web, and desktop environments.

We invite you to explore the new Grid and Split Panel features today and share your feedback with us!

Does this mean that I can develop an Ionic app for IOS, Android, Windows, as well as host it on my website (www.mywebapp.com) to provide users with an experience similar to the mobile apps? Is this too good to be true?

angulartypescriptionic-frameworkionic2progressive-web-apps

Answer №1

Is it possible to create an Ionic app for multiple platforms like iOS, Android, and Windows? - Absolutely!

Can I also host the app on my website or www.mywebapp.com to see the same content as the mobile apps with just one code base? - Not exactly.

This discussion revolves around Progressive Web Apps (PWAs). When developing a PWA, there are various factors to consider. One crucial point is that you cannot use native mobile plugins with PWAs because these plugins are specifically designed for mobile devices. There are other considerations as well. For more information, please refer to the following article:

Progressive Web App (PWA) Explained

A Progressive Web App utilizes modern web technologies to deliver an app-like user experience, transitioning from browser tabs to immersive, top-level applications while maintaining the seamless nature of web browsing.

If you wish to view a demo of an Ionic-built PWA, check out this link: Ionic PWA Demo

Key characteristics of Progressive Web Apps include:

  • Progressive - Compatible with all users, irrespective of their browser choice due to its progressive enhancement approach.
  • Responsive - Adaptable to any screen size, be it desktop, mobile, tablet, etc.
  • Connectivity independent - Capable of working offline or in low network conditions through service workers.
  • App-like - Offers app-style navigation and interaction using the app-shell model.
  • Fresh - Automatically updated by the service worker update process.
  • Safe - Served via TLS to ensure security and integrity of content.
  • Discoverable - Recognized as "applications" by search engines thanks to W3C manifests and service worker registration scope.
  • Re-engageable - Facilitates easy re-engagement through features such as push notifications.
  • Installable - Enables users to save preferred apps on their home screens without needing an app store.
  • Linkable - Easily shareable via URL without complex installation processes.

To delve deeper into these concepts, check out this resource: Getting started with Progressive Web Apps

Answer №2

In theory, it is possible to have one code base for native apps, PWAs, and desktop apps depending on the nature of your business.

For my project QueMesa, I took a slightly different approach:

The desktop website serves as a landing page, featuring terms and conditions, FAQs, blurbs, and about pages, with the ability to launch the app: . This website is built using vanilla Angular4 + Bootstrap, but Wordpress could have been used as well (it is not an app, rather a website).

The mobile web app (PWA) is hosted on a separate domain: . While it may not look optimal on larger screens like iPads, it still functions. The decision of how much effort to invest in optimizing it for desktop usage was made based on a cost-benefit analysis and target user preferences. Mobile users are automatically redirected to the mobile web app when visiting , while desktop users see the desktop version.

Thanks to Ionic, the same codebase is utilized for both Android and iOS apps:

Every use case varies, depending on the nature of the app and user behavior. In Mexico, native apps are not as popular as in other regions, whereas mobile devices are widely used compared to desktops, making PWAs a more accessible option.

The main landing page being an Angular app/separate codebase was a result of its initial functionality as a standalone app, which was later surpassed by the Ionic mobile apps. The choice was then made to either discontinue, keep it synchronized, or remove the app features and retain it as a landing page.

The reason for not using a single codebase entirely is due to the disparity in layout between Ionic and desktop UX. As a result, the desktop website simply acts as a launcher for the app...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to change the color of the tab indicator

Hello, I am currently using materializecss in conjunction with Angular 6. Just to clarify, I am solely utilizing the materializecss library and not ng2-materialize. My issue arises when attempting to customize the tab indicator background color by modifyi ...

cssangularmaterialize

Is the Dropbox JavaScript SDK compatible with Ionic3?

Does anyone know how to integrate the Dropbox JavaScript SDK into an Ionic 3 app? Just a note: I have come across some sample examples using the http endpoint. ...

angularionic-frameworkdropbox

Optimizing TypeScript/JavaScript for both browser and Node environments through efficient tree-shaking

I am currently tackling a TypeScript project that includes multiple modules shared between a browser client and a Node-based server. Our goal is to bundle and tree-shake these modules using webpack/rollup for the browser, but this requires configuring the ...

javascriptnode.jstypescriptwebpackrollup

Array class injection

I have developed a class called MetaManager: @Injectable() export class MetaManager{ constructor(private handlers:Handler[]){ console.log(handlers); } } This class requires a Handler[] to be registered as handlers. When I receive some me ...

angularangular2-injection

Combination of two generic interfaces creates a union type

I have been diving into the world of typescript and I encountered a challenge with the syntax of union types, specifically when using a generic interface: interface ArrayElementError { kind: 'failure' reason: string } interface ArrayElementS ...

typescript

Typescript - filtering out null values from JSON object

I am facing an issue with my service method that saves a date on the server. When this method sends the date to the server, it includes fields with null values in the JSON. How can I exclude these fields with null values? public create<T>(post: any) ...

jsonangulartypescript

Is there a way to display my modal separately from my sidenav while utilizing :host in Angular?

I implemented a :host with hostlistener() in my navmenu-component.ts to enable a sidemenu that slides out from my sidenavbar when a button is pressed. My goal is to display a modal for editing purposes. I have included the modal in the navmenu-component.h ...

angular

Why ngIf in Angular Ionic doesn't correctly compare arrays from parent when using the 'includes' method?

I have implemented a feature where users can select their interests through a dialog. When a user clicks on a chip, the following method is triggered: handleClick(tag){ let found = false; let index = -1; // tslint:disable-next-line:prefer-for-of for (let ...

angularionic-framework

What could be causing the dispatch function to not run synchronously within guards during the initial load?

It has come to my attention that in certain scenarios, the execution of reducers is not happening synchronously when using store.dispatch(...) as expected. This behavior seems to be isolated to CanActivate guards and during the initial loading of the appli ...

angularngrx

Tips for avoiding Union types in TypeScript from anticipating unnecessary keys?

My function getRespectiveConfig() returns a Union type that includes all the necessary types: interface AlphaConfig { title: string; } interface BetaConfig { id: string; } export interface EncompassingConfig { alphaConfig?: AlphaConfig; b ...

typescripttypes

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

What methods can be used to eliminate superfluous `require(...)` or `import "...` statements while working with Rollup?

Currently, I am in the process of developing a library named share which will be utilized in various other services. To bundle this library, I have opted for Rollup.js. share serves as a common library accessed by multiple services, therefore it is essent ...

javascriptnode.jstypescriptbundlerrollupjs

How can I prevent other input fields from being enabled once the value "matched" is received in the first input field using Angular?

When working with a template driven form, I encountered a scenario where I needed to disable other input fields if the value entered matched a specific string. For example, if the first input field's value is "sample", then the other input field shoul ...

angularforms

Navigating Angular: Efficient Ways to Manage API Requests

As a newcomer to signals, I've been exploring their usage more within our application. However, one area that still confuses me is the relationship between rxJS and Signals. Due to our use of Angular's HTTP client, we work with observables, which ...

angularrxjssignals

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

Currently, I am utilizing the Material-ui Drawer component to toggle the display of content on the right side of the screen. The functionality I am aiming for is that when the Drawer opens, it will shrink the existing content on the right without any overl ...

cssreactjstypescriptmaterial-uidrawer

Using Typescript inject with Vue 3 is currently not functioning as expected. The issue arises when trying to create spread types from object types

When using Vue 3 and TypeScript, an error is encountered (as shown below) only when the script lang="ts" attribute is present. Can someone provide insight into why the inject function in Vue 3 with TypeScript does not function correctly? ERROR in src/compo ...

typescriptvue.jsvuejs3

Creating several light beams from a rotated structure

My current challenge involves shooting multiple rays from a rotating mesh in various directions targeting points on a circle divided by the number of rays. To assist with debugging, I have added ArrowHelpers for each ray with a goal for the arrows to turn ...

typescriptthree.jsrotationraycastingreact-three-fiber

Ensuring TypeScript enforces the validation of deconstructed props

Why isn't Typescript checking props when I use destructuring? I've already experimented with the strict flag in Typescript Let's discuss a simple component const Component = (props: { foo: string }) => <div />; The following cod ...

reactjstypescript

How come the hook keeps triggering endlessly in a loop when I try to pass the updated props?

I've encountered an issue with a custom hook I created for making HTTP requests. The problem is that the request seems to be firing in an endless loop, and I'm unsure of what's causing this behavior. My intention is for the request to only t ...

javascriptreactjstypescriptreact-hooks

Woops! Looks like there's an issue - the property 'url' is not defined and cannot be

I am currently working on fetching data from a REST API using angular2, and everything seems to be going smoothly. However, I have encountered an error that only appears in the console when calling {{content.img.url}}. Interestingly, the code executes fine ...

javascriptangularhttp-get