I’ve started reading about PWA’s and I think it’s the way the web is moving. However I have few questions regarding PWA’s. (stenciljs / Ionic PWA toolkit) and hope someone can help me to clarify them.
1 - From my understanding stenciljs / Ionic PWA toolkit is platform independent. That allows anyone to use any framework they use. Assuming I want to used Angular, where / how can I add it.
For an example, Ionic2 versions are based on Angular and I can use standard angular code to communicate with the backend servers / apis. In PWA, do we need to explicitly add Angular to do these actions ?
2 - If I use PWA toolkit to build an app, will the mobile UI be different from IOS to Android ? (depending on the devise end user is using) ?
3 - If I start an app as PWA , can I then convert it to Ionic / mobile app ? From my understanding , If I start and Ionic app, I can convert it to a PWA
4 - PWA toolkit says, it has a built in functionality to add the app to home screen. However I tested this via an iPhone (with chrome / Safari) and I dont get any prompt asking me to add the app to the home screen ? https://pwaapp-bf6a9.firebaseapp.com/
From the readings I did, Apple is not yet fully supporting PWA. Does this issue only happens in IOS ? If so , is there a workaround for that ?
I try to explain how I understand PWAs, Stencil.js, Ionic 4, Capacitor and Ionic PWA toolkit.
PWA: Starting with PWA, it is a trend word describing all kind of aspects how a web app should behave. Google says it should be fast, engaging and reliable. A PWA can have a manifest file that allows the android (and soon maybe ios) user to add the web app to the home screen. It can contain a service worker, that allows offline usage, background syncs, push notifications and other stuff. It can contain an app shell for faster loading and earlier user interactions. And thats by far not all. There are plenty of blog posts and articles about PWAs out there if you want to know more about it.
Stencil.js: Stencil.js is a compiler for creating web components. These web components are framework independent. You can use them in any framework you like (React, Angular, Ionic, …) or even without any framework. It supports some nice features like TypeScript, VirtualDOM, JSX or reactive data binding. Using it feels a little bit like a mix between React and Angular, but it is not using these frameworks by default.
Ionic 4: Currently Ionic 4 is in development. In the fourth version of the framework they will remove the angular dependent components and recreate them with Stencil.js. That way they remove the dependency to Angular. Ionic 4 combines pre-build components with a well designed cli with many features.
Capacitor: Currently Ionic uses Cordova as a bridge between JavaScript and native code on mobile devices. Cordova plugins allow access of many native device features in JavaScript. Currently the Ionic team is working on Capacitor, because they have not enough control over the development of Cordova. Capacitor will perform similar tasks as Cordova does, but it will fit Ionic teams requirements better. Capacitor does not depend on Ionic, so you can use it with any other framework or even without any framework.
Ionic PWA Toolkit: Last there is Ionic PWA Toolkit. It is some way similar to a starter repository. It is a repository that uses Ionic 4 with Stencil.js and some preconfigured settings for building PWAs. Because it uses Ionic 4, there is no Angular integrated, but you can add it if you like.
hey @Nexi, sorry for the late reply and thanks a lot for the detailed answer. After checking the PWA talk from goole, I think I have a better idea on PWA’s.
RE: adding the app to the home scree, I think I’ll have to come up with a workaround for IOS (for now at least).
My only an answered question is , If I start an app with PWA toolkit, can I convert that to an APP later. From the reading I’ve done, It seems like it would easier to start an Ionic project (mobile) and initially host only the PWA part. Coz then later if I want to, I have the mobile code too. E.g cordova
It really depends on what kind of application you want to build. If you want to use Ionic 4 with Angular, which is not even in alpha yet, you can use the Ionic PWA Toolkit and either add cordova by CLI or create a new project and copy paste the code. It should be not that much effort. If you want to build a more stable product, use Ionic 3 as follows:
install node.js from its website (stable version recommended)
install cordova and ionic with npm i -g cordova ionic
Thanks @Nexi, yeah the product I’m hoping to build will have some GPS functionality later (if the initial stages goes well :)) . So I’ll start with Ionic3 / PWA and go from there. Coz then I actually have the mobile app too.
What is currently known as “Ionic Framework” or ionic-angular will be split in two blocks:
@ionic/core will contain web components (built with Stencil) that are similar to the components you are used from Ionic. They will just be much smaller and faster - and can be used in any web app, no matter what framework it is built with.
@ionic/angular will then connect those back to Angular so you can use them in the same way you did in Ionic 2/3 before. Slight code changes might be necessary, but the overall picture stays the same.
That way Ionic 4 is both pretty similar to Ionic 2/3, but also very different
Let me “advertise” a bit what I just published about Capacitor: https://ionic.zone/capacitor/overview
It should cover all this and more in pretty good details.
