Icon TP 146

Converting web apps into hybrid mobile apps

Problem

You are working in a (long running) project for a client, in which a PWA is created that should be especially suitable for mobile devices. For reasons that no one really knows anymore, only Angular had been used for that. But you have slowly been realizing that the existing tech stack is reaching its limits and that one or the other requirement could be fulfilled more easily with a native app. No worries, there is a way to preserve the work already done.

Solution

Ionic to the rescue! Even though Flutter is currently on the rise in cross-platform development, Ionic is the winner in this case. Unlike Flutter, Ionic relies on established web frameworks and makes them executable natively. You can therefore adopt a large part of the previous code and do not have to start all over again. In the following example, I would like to show you how Ionic enables the transition from a pure PWA to a hybrid app.

Example

I assume that the CLIs npm and ng, as well as the IDEs Android Studio and XCode are already installed on your computer.
# A new Angular app is created, but you take yours, of course:
ng new ionic-app --routing
cd ionic-app

# Adding Ionic dependencies to the app:
ng add @ionic/angular

# Generating an Ionic-specific setup:
npm install -g @ionic/cli
ionic init ionic-app --type=angular
After the commands have run successfully, two attributes need to be adjusted.In angular.json set outputPath to "www" and in index.html set href of the base tag to "./". Now the app can almost be executed:
# Building the source project: 
ng build

# Opening the app in target IDEs:
ionic capacitor run android --project=ionic-app
ionic capacitor run ios --project=ionic-app
Visual TP 146

Further Aspects

---

Author: Daniel Schröpfer / Software Engineer / New Business

Cookie Settings

This website uses cookies to personalize content and ads, provide social media features, and analyze website traffic. In addition, information about your use of the website is shared with social media, advertising, and analytics partners. These partners may merge the information with other data that you have provided to them or that they have collected from you using the services.

For more information, please refer to our privacy policy. There you can also change your cookie settings later on.

contact icon

Contact us now