Is Ionic3 PWA the best choice?

Hi guys,
I have to do a desktop application ora a Pwa that:

  • Opens some Excel files in the local pc.
  • Converts them to csv.
  • Checks the content of these files (using regular expressions).
  • Uploads these files on a remote server using a rest api.
  • Receives push notifications.

I’m undecided about which framework to use: Ionic3 PWA or Electron?
What do you suggest?
Is it possible to implement all those features with Ionic3?

thank you very much

cld

If desktop, do know if you have to support Mac OS, Linux, and Windows - or just one of them?

All of them. Both Ionic and Electron support all of them, I suppose.
Probably if I use Ionic the App won’t work on Windows whereas if I use Electron the program won’t work on mobile devices.
There isn’t a technology that works both on PCs (Windows, Linux, iOS) and mobile devices (Android, iOS).

How r u going to host the app?

And why need pwa?

Ionic is optimised for mobile but u can do desktop

Dont know electron but from the looks of it seems more geared towards desktop

I thought PWA also worked on PCs, but apparently I was wrong.
So, first, I have to choose bettween a desktop program (Electron) or a mobile app (Ionic).
The alternative is to implent the program twice with both Electron and Ionic.
I don’t think that exists a framework for both the enviroments.

Pwa work on pcs
Question is why need them? R the pcs going to be offline? Performance?

Since you already mentioned having a server with a rest API, why not lean on the server to parse the XLS files to CSV and just do most of the processing server side while the UI is in a PWA running in the browser?

Sorry if I missed something, this one may be getting above my pay grade.

There is evidence on this forum that people build stuff in ionic and embedded this in electron

And from the specs of electron I guess this indeed should be possible using a simple electron shell opening a browser window and loading ionic into it

Here you go: two platforms in one

And skip the pwa. No need for pwa in ionic desktop app

2 Likes

Yes I think that using a desktop app I can check the files (using regular expressions) also when the pc is offline.
When it is online the user can use the webservices to upload the files and get other data.

Yes, Ionic with Electron is a great idea, thank you.
Perhaps I’ve already read something about that.
In this way I would implement the code only once.
I think I’ll try this way.
Thank you very much.

Sounds nice, tell us if it worked

First thing i wpuld test if it is easy to access the local filesystem using the node.js api exposed via electron

And in angular probably build a provider that handles the file operations either on pc filesystem or the mobile (likely with cordova)

U cant rely on ionic storage in browser for lots of data

You got me curious about this…

so I played around.

Using this url and tweaking it a bit, got electron to work with Ionic

https://robferguson.org/blog/2017/11/09/build-a-desktop-application-with-ionic-3-and-electron/

Just created a new ionic project using ionic start
added electron globally
created electron folder in in src folder and put main.js in it

the main.js needed a bit different approach for loading the url

mainWindow.loadURL('file://' + __dirname + '/../../www/index.html');

In package.json:

"main":"src/electron/main.js",

and run npm run ionic:build to populate the www folder.

And for the follow-up blogpost from Rob (packaging), just change build-files to point to src/electron/main.js

As to fs usage (write filesystem), I saw you need to do some workarounds in Angular 6. Maybe you post your solution here?

Tom

1 Like

I just want to chime in and say that if you have any choice over the matter, pretty much any format is better than CSV for:

  • avoidance of gnarly edge cases that cause obscure breakage
  • expandability
  • human readability
  • robust implementations

If you can use JSON instead, I would strongly advise doing so.

1 Like

I agree with you, but on the server I already have an application that uses csv files for its purposes.

So I will simply implement a REST web service (with authentication) that receives these small files into a field encoded using base64 and saves them into a folder.
Passing all the data using the web services is possible. I should read the Excel, check the fields, create a json, pass it to the server, convert to a csv file and copy it to the directory.
I’m evaluating the pros and the cons of this solution.
Thank you.

cld

You’re very kind and yes this is right the artcle I read some months ago, and I don’t know why I didn’t think to it, perhaps I thought that this solution was a bit messy.
But now I’m trying again, perhaps it is not too bad.
Perhaps I will be able to use the same code for a desktop program and a mobile app.
Or at least a large part of it.
Thank you very much.

Yes if I surely will share my solution, not the full application because I can’t, but the most important snippets of code with pleasure.

cld

1 Like

Uses electron for desktop. See prepare/make_desktop script.

I manually packaged. There is also an electron packager that I discovered after I had a working process so never bothered to change.

And it eill get even better with Electron support in Capacitor

https://capacitor.ionicframework.com/docs/electron/

This one is still a Ionic App, isn’t it?
I mean to add features to it I have to use the Ionic Api not the Electron one?

cld

Hi

yes. full ionic app from a web perspective.

Only for native features you need to resort to Electron documentation. So no Ionic Native or Cordova stuff in Electron.

Your common code base is html/js/css

Edit: with capacitor it should be easier as there will be a unified api to native features, but that is still work in progress I guess. Sonething u need to figure out

Regards

Tom

I’m a few days late to this party, and it looks as though you’re getting great advice. Implement as much of the app in Ionic as much as possible. Try to use Electron primarily as the delivery mechanism. That way, providing a mobile version should be mostly a matter of reimplementing just that wrapper layer. Ionic will make that part easy, too, particularly with Capacitor.

If I may add a shameless plug here… My Pluralsight course might be just what you need (https://goo.gl/aJ4Y8e), especially if you can get your employer to pay for it. The course covers integration between Ionic and Electron, including menus, icons, web service calls, local data storage, the system tray, installers, and even live updates. I also built a 90-second “sneak peek” on YouTube. https://youtu.be/EUf5TT6EIB8

Good luck with your project.

2 Likes