PWA Toolkit and Ionic 4, two codebases?

I have a question regarding the new Stencil based Ionic PWA Tool Kit and Ionic4.

From what I have seen, are these going to be two individual entities?

The main thing I absolutely love about Ionic is the one code base, currently I have numerous projects running Ionic2 and I use:

ionic cordova build android
ionic cordova build ios
ionic cordova build browser (or npm run build if not using any cordova plugins)

This setup works fantastic as any slight deviation between devices I handle the logic within the one code base (even this is normally very minor).

With the Ionic PWA toolkit and upcoming Ionic 4 does this mean I will need to create two projects? One for ios/android then a completely separate project for the PWA?

I don’t think Ionic 4 and Ionic PWA Tool kit are different entities. In fact if you look closely at the blog post on the subject Ionic PWA is using Ionic 4. I think this is just a starter for Ionic 4 with all the tools needed to build a PWA, I don’t see why you wouldn’t use the same code base to create a native build (using the same commands). Might want to ask your question again to Justin @jgw9617 (@Justinwillis96 on tweeter) to be sure.

2 Likes

No, you wouldn’t have to write two separate codes for building hybrid/ native and PWA version of a single project. As@QGangler said, and if you checkout the newly released blog post by Ionic on PWA Toolikit, the underlying framework is all Ionic.

But yes, when building PWA from the same Ionic code, they do recommend using Stencil which is a compiler essentially for components. The difference in Ionic 3 and Ionic 4 is that in former all UI components were built with native ( fundamentally mobile) technologies. Whereas in latter, all those components will be purely web in nature. Plus, in newer version you get to choose various other front-end technologies other than angular which has long been the root technology used by Ionic in all previous versions.

In short, again, no, you’ll not be needing two code versions but when building with respect to optimizing the performance of PWA, you may need a compiler like stencil.

Build cross platform mobile apps with JavaScript and the Web
Native Progressive Web Apps with HTML, CSS, and JavaScript (iOS, Android, Electron y PWA)

https://capacitor.ionicframework.com/

A bit late to the party, but let me jump in here:

Ionic PWA toolkit uses Ionic 4 components, but is “only” meant to be used to create pure PWAs. You might still wrap those in Cordova or (when it is ready) Capacitor, but for now this is not the idea. Think of it more of a preview of what Ionic 4 will enable you to do.

When Ionic 4 is actually released, there will also be a new @ionic/angular package that will work just like the previous versions of Ionic and also be able to build native apps via Cordova/Capacitor - BUT it will also really support PWAs out of the box (right now you have to do some manual things to get it to work).

If you now use the PWA toolkit to build an app, you probably will have to do some work to get it back in an @ionic/angular form. If you don’t even like or want Angular, that might be ok though.

Capacitor is a good option to manage PWA and Hybrid apps using same code base.

I guess same thing could be accomplished using a service, verifying the current platform and using cordova plugin or web API.
Unfortunately Capacitor has a very limited number of plugins right now.

Besides that my concern is regarding the build process using the same code base.

Let’s take as example OneSignal used to handle push notifications.
There is a cordova plugin but for web push you are required to add a js file in your index.html.
For building the PWA it is fine however if you have want to build for Android/iOS using the same code base you should comment that file because it is not necessary because you are using the cordova plugin.

So how to manage the code base and build process when you have to add external libraries in index.html only for PWA version?

Comment manually? Anyway to automate that?

Best regards,
Pablo