Is Ionic3 PWA the best choice?

Ionic Framework ionic-v3
21

You could use ionic within Electron for Desktop apps (Windows, macOS),
this would only use webcomponents and no native software, probably you wouldn’t need it.

And with the same ionic components/code you could deploy and deliver to mobile devices.

Ionic project could work as its Angular 4, independently and then copy it within Electron, which supports many JS frameworks. Settings Angular 4 inside electron is really easy: https://github.com/thorstenhans/ngx-electron

If you would host anything you should better have a website with the PWA, and then Android/iOS supports both PWAs creations and then just a website for Desktop

1 Like
22

Yes, I’m watching your course that is very interesting. It deals about the things that interest me.
Thanks for the tip.
The possibility to run Ionic Apps inside Electron is a great plus for both the technlogies.

cld

23

Hi,
at the end I prefer the Electron/Ionic approach to the Pwa approach so the file processing is done locally and only the correct data is sent to the server.

cld

24

Hi WalkingRiver what do you mean for “delivery mechanism”?
I suppose that I have to use Electron only to create different packages to distribute the software on the various operating systems.

While I have to upload the file, process the file and call the web service using Ionic with the Capacitor library so that these features are portable on all devices.
Is this correct?
I’m asking this because the relation among Ionic, Capacitor, Cordova and Electron is a bit confusing and because Ionic uses Typescript but Electron uses javascript.

cld

25

You are correct. You would write your Ionic app as a web app, but use Electron to install and run it on the desktop. For now, to avoid overwhelming yourself, you might not use Capacitor yet. Use what Electron gives you in terms of desktop integration.

You can use TypeScript with Electron, and it only requires an extra step. I kinda wish I’d done that with my course. However, you will see how I dealt with the differences in the course, so maybe it’s better that I used ES6 with the Electron side.

You may be forced to write a few of your functions twice: once for mobile and once for desktop. It isn’t the end of the world if you do. I tried to keep everything in the Ionic app as much as possible, only delegating to the Electron code what I had to. You’ll probably be happiest if you do likewise.

If it helps, here is how I think of those technologies in question.

  • Ionic: Build amazing web apps using mostly HTML and TypeScript.
  • Electron: Host your web app on Windows, Linux, MacOS as a “desktop” app. Provides compatibility layer to access underlying OS features, such as sound, file system, menus, etc. Can build installers and auto-updates.
  • Cordova: Mature technology to host your web app on a mobile device. Provides compatibility layer to access underlying hardware features, such as sound, file system, storage, camera, GPS, etc. Can put these apps into the mobile app stores.
  • Capacitor: Modern framework that makes using Ionic with or without Cordova or Electron easier, providing a higher level abstraction.

Hope that helps.

2 Likes
26

As promised I’m doing a little spike here:
https://bitbucket.org/ilclaudio/elionic-demo,
using the suggestions of the tutorials found on the Web including that of @WalkingRiver.
It’s the first time that I share a project so I don’t know if it is the right way to do it.
I have to try other things before considering the spike closed.

I’ve found a nice library called js-xlsx that converts an Excel sheet into a Json structure.

cld

1 Like