Progressive Web Apps in Apex Designer

Photo by Rob Hampson / Unsplash

What if you could build a new business application, and get a mobile app for free? Now you (almost) can, with a Progressive Web App (PWA).

Apex Designer builds an Angular application with a NodeJs backend that runs on browsers on any kind of device. With a little magic we can package the application as a PWA to be more mobile device friendly.

This video shows a prototype PWA, that allows you to "install" the web app to your phone and then view and add/edit data while completely offline. Data is synchronized when you reconnect.

Check it out.

Transcript

This is a little video showing the Progressive web app, that I've mentioned before. You start by just going to the site like you usually would.

This is a simple app here, not much to it. You can look at a list of suppliers and view individual suppliers. If you click the share button at the bottom, scroll down a little bit, you can see the 'Add to Home Screen' button.

What that does is install it on your homepage as if it was an app. Now, notice that when it opens up, there's no browser URL bar or anything, but it otherwise works exactly the same.

That's fun and interesting, but the coolest part is that if we go back here to settings and we turn off the network, basically go offline, you will see that we can still go to that app and any data that we had previously loaded ... Just say, "Okay," here to continue on.

We can go see the list of suppliers and we can even see the individual suppliers without having the network turned on.

David Knapp

David Knapp