I have a native mobile app I have built (not built with ionic). I now want to build a Progressive Web App version of that native app, and I am looking for the easiest and fastest way to do this. Is Ionic the right choice?
More Detail:
I am very familiar with Angular2+ and I want to use that. But, I am out of practice setting up the key differences between mobile and web.
Here are some of my main concerns–issues that I didn’t need to focus on in native development but that are important for web development:
Making sure the app looks good at different browser sizes.
Setting up a server to host the website. On a phone this is not necessary–the phone is like the “server”. But it is required for the web, and I want to be sure the website will load very fast
Addressing any of the key security pitfalls that can be there for the web, more so than the phone. Issues like cross site scripting, injection, and any other key security issues that don’t come up as much for basic native apps.
Having access to plugins that can build up functionality fast. I know there are cordova plugins, but its confusing as to whether these plugins are the right choice for a PWA. Most tutorials on ionic out there are assuming you are building for mobile first–so the documentation for ionic/cordova plugins is good when it comes to how to put them into your app. But what do you do when you are building for the web?
BTW, responses don’t need to address every one of these. These just give a sense of where I am coming from.
Most discussion online I have seen is from the perspective of people who have Ionic-based mobile apps, and now want to build a PWA in addition. In my case, I am just looking at the best way of building a straight PWA.
Ionic would be a great choice but you would need to audit you project. Like what plugins are needed for app features. Cordova plugins do not work for PWAs. But there are Capacitor Plugins but those are limited as well.
Thanks. To be clear I will be building the PWA from scratch.
–Ionic works well in mobile apps, but the webview layer means its performance is generally not as strong as native mobile apps. What about performance for a PWA? (including when viewed on a phone)
–And if you don’t use cordova plugins and capacitor plugins are limited, what do you use, and is there documentation to do it easily?
–Does Ionic take care of a lot of the basic security concerns for you? For example, I know Ruby on Rails has a lot of built in features that protect the developer from basic security holes. Does Ionic help too?
Ionic UI framework only offers UI components as webcomponents. Not the webview, nor further security stuff.
The PWA runs in a webview, but then catered for by the OS (not capacitor or cordova native container). So if it runs nice in a browser, it runs as smooth in PWA. Offline experience may vary depending what you are caching.
Most of the questions to help you getting a smooth developer experience as such are more related to the support Angular provides you for PWA and the hosting platform you seek to use. Including oauth2 services. Ionic UI framework is well documented and has many examples. So that should not be an issue. If you don’t like to looks of the UI, then maybe check other libraries.
As to alternatives to plugins, its good to look at web APIs. https://whatwebcando.today/ gives a nice view and shows the capabilities of the mobile browser.
Capacitor gives a nice suite of out of the box wrappers for web apis
Ionic AppFlow is Ionic teams’ cloud services for app delivery (except for hosting) to native containers like cordova and capacitor. I have yet to see its relevance for pwa
Thanks for the details, guys. My main reason for using Ionic to do the PWA is to handle the view layer. Seems to me that coding up the view layer from scratch to make it look good as a PWA will be time intensive and require a lot of design skills. My hope is that Ionic can take care of a lot of that for me.
I also hoped that Ionic would easily address things like service workers and caching.
–Do both of these sound correct?
–And to confirm on performance–are you saying that the concerns for performance that happen in an iOS/Android app built with Ionic should not apply in the case of a PWA?
–Capacitor looks good, but seems like there are just not too many plugins. As an example, I expect to be adding the ability to play audio and video as an important part of the app. I don’t think there are capacitor plugins for that. It’s too bad to hear about the lack of ionic plugins in the PWA–there is a nice library there.
I am not sure about what u mean with performance concerns? Can u specify? As I said, if it runs good on the mobile browser it will run similarly in pwa.
Maybe try a simple demo app and see for yourself how the developer workflow looks like? Make it a pwa with ng add and publish on firbase.
Developing a UI with ionic should definitely be much easier then native if u want to build sonething related to productivity apps etc. for games i am not sure
Whatever u cannot find in capacitor u need to check on webapi. Simple google search is essiest “how to play audio javascript” to figure out if you like it.
Your issue with audio files will be more related to storage and bandwidth. U cannot expect a pwa to contain big files. Cache and storage is more limited then native
In terms of performance, what I mean is that I have found some issues with Ionic performance on iOS/Android before. Navigation could sometimes be laggy, buttons might be no so responsive, etc… I don’t mean to start a conversation about mobile Ionic performance v native performance. I’m not looking to knock Ionic–maybe its improved since when I last tested it out.
But the webview layer of Ionic means that it has more performance concerns than if, say, you built an app with Apple’s tools like Obj-C, xcode, etc.
My question on that is therefore: Does adding the Ionic framework to a PWA also mean that it might lose some performance versus, say, just coding it all with Angular without a framework layer?
So the general issues I have seen related to Ionic 4 and Ionic 4 only (angular style) which actually is not related to pwa are the resulting bundle size conpared to not using it and some feel the webcomponent technology kills performance if you want to display zillion items at once. So to me those are edge use cases.
Ionic is great fun and good stuff to work with also for users
And the webcomponent and pwa stuff gives general compatibility issues with older phones not supporting these apis. Also not ionic related but relevant
In the end frameworks are there to help the developer, not the user. If u want full control of everything in a web app, go vanilla JS, and maybe ionic as cdn bundle? Blazing small and fast,but bit more coding work.
Thanks. @Tommertom, I hear you on the bundle size of the app. In the case of trying to build an iOS or Android app, I think the biggest concern with Ionic performance is the webview layer. That is adding a lot to the app processing versus a purely native mobile app. Is it fair to say that performance concerns are LESS for PWA than they would be with native mobile, because the webview layer is not an issue for the web?
Again, native apps can potentially perform much faster because of absence of using a webcontainer as extra layer. But for manu cases the performance of webapps including pwa is great and sometimes even better if the native app is poorly designed in ui
The general idea or webapps is to ease developer work in many app use cases
Pwa does differ from native as it allows you to create a smoother transition from a website to a more engaging app as the user does not to break away to an app store or worse: use cable or rootkit the phone
Thanks but to be clear: I am just looking to compare (1) Building a PWA with Ionic to (2) Building a PWA without Ionic. My question is whether building a PWA with Ionic adds performance concerns versus building PWA without.
The app involves mostly the user playing audio and video files that are stored in a separate API.
I am not looking to compare building a PWA versus native mobile. I already have a native mobile app–the reason I started talking about native mobile apps is bc Ionic can have some performance issues with iOS and Android mobile apps, and I wanted to see if those performance issues are still there when talking about PWAs.
Then your biggest worry imho is not ionic but the user experience stresming the audio (online and offline) and your review of installing the pwa as desiresblenexperience. The ios install for pwa imho is not as nice as android - to say it kindly
Both can be essily tested without much ui snd coding
Got it. Thanks. To summarize the thread so far, I think:
Ionic provides a view layer that can help a lot with coding up the view for a PWA.
Ionic’s earlier plugins don’t work for PWAs. Instead, you would have to use Capacitor and normal web plugins when capacitor does not have what you want.
Ionic does not add extra help for security issues. You will have to tackle those the same way you would for any web application with or without Ionic.
Ionic’s bundle is going to be bigger than coding a straight Angular PWA without Ionic. That could slow things up, but hopefully not too much. Otherwise, Ionic’s performance in a PWA should not be too much worse than just doing Angular without Ionic in a PWA.
PWA performance can still be an issue, with or without Ionic, especially with something like streaming media, and especially when the user views the website on iOS.
