Deploy ionic 3 app as a PWA and android/ios app

Ionic Framework ionic-v3
1

Hello, all!
We already have an app in ionic 3 and would like to scale it to also become a descent webpage. So right now we’re researching the possibilities and all the tricky parts. It would sure require a lot of changes, but we’re ready to almost completely rebuild our app in terms of looks and navigation.
Just wanted to know if anyone already had experience using one codebase for all 3 platforms (android, ios and browser)? How would cordova plugins behave in this situation? Are there nice open-source examples?

Our list of plugins:

"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen"
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-app-event",
"phonegap-plugin-barcodescanner",
"cordova-plugin-compat",
"cordova-plugin-google-analytics",
"cordova-plugin-wkwebview-engine"
"ionic-plugin-deploy",
"cordova-plugin-facebook4",
"cordova-plugin-googleplus"
1 Like
2

No experience with PWAs myself, but as far as I know Cordova and so the plugins just won’t be available. But looking at you list, everything but the barcodescanner shouldn’t be too hard to replace.

1 Like
3

i`m using this plugins:

cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-geolocation 2.4.2 "Geolocation"
cordova-plugin-inappbrowser 1.7.0 "InAppBrowser"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 "Keyboard"

and everything works fine, you just need to add the browser platform:
ionic platform add browser

and then:
ionic build browser

3 Likes
4

Okay, so my knowldge is/was wrong.

Is ionic build browser what you define as PWA?

5

I can share some of my findings here. If we build ionic app with ionic cli it will automatically add the PWA functionality to our app. All we have to do is edit manifest.json and uncomment some of the code in index.htm to enable Service Worker which is also already set up for “first network then cache” strategy. I spent a lot of time on googling and this link is the best starting point for understanding Service Workers (lots of links inside, seriously - it’s an endless rabbit hole):
https://aarontgrogg.com/blog/2015/07/20/the-difference-between-service-workers-web-workers-and-websockets/

In ionic service workers are implemented via sw-toolbox, so here’s lots of handy information:

We haven’t decided how to handle cordova plugins still, so I guess it’s gonna take more time for research. One of the ideas was to move all of them into services and to use alternative services for browser.

Any additional information or questions are very welcome

2 Likes
6

Hope now you have a solution for how to handling Cordova plugins with PWA no? Would you like to share with us?

1 Like
7

No, just writing separately a web page on Angular - Ionic cannot do what we need for now.

8

Hope Ionic 4 will do it soon :slight_smile:

1 Like