Suggestions from Community on Ionic Capabilities and Offline Storage

I’ve built a Laravel 9 app with Vue 3 and MySQL for a client and need to build a companion app. I’ve already exposed API endpoints and connecting to it from a mobile app is straight forward. My question is more related to offline storage and updating. Our application is agriculturally based that allows our clients in the US to manage and communicate with farms in South America. Due to lack of cell service in most of the remote fields, I need to build an app that allows the farmers to create updates in the app for any particular crop and have that data saved in the phone/tablet local storage and then automatically or by way of manually pressing a button, push the data back up to the web based application via api call when back in cell range. Not sure if it matters, but the data is your basic one-to-one and one-to-many. The app is simple with the only native function needed is to take photos that will be part of the update.

My question is if Ionic out the box can accomplish this–client doesn’t want to subscribe to Ionic’s community/enterprise service subscription. If there are any specific Ionic modules/plugins I should look into, please feel free to suggest them as well.

Thank you for your feedback.

Charles

Welcome and great to see another Laravel and Vue developer here!

Is the app going to initially load its data via the API when it has a network connection? It kinda sounds like you are going towards a offline-first approach. One option is Ionic Storage. Here is a link to how I implemented it in Vue and Vuex - How to use Ionic-Storage in Vue 3.0? - #9 by twestrick.

In regards to saving updates offline and syncing them once there is a network connection, I think there are at least two ways to approach it. The simplest option in my mind would be to check if there is a network connection and if there isn’t, save the request in local storage. Once internet is back, replay the requests.

A more complicated/robust approach is to build out a similar data structure locally in SQLite and then do a full sync between the local data and backend data.

Things to think about are handling conflicts between the backend data and app data when the backend gets updated before the app syncs.

Here is another discussion that might be helpful. I think I’ve seen several others too on these forums - Offline-first app development (local storage + server sync)

You can do all of this without any subscription to Ionic services

How do you plan to deploy the app - via play store or app store, pwa or even manual installs?

Thank you for the helpful feedback. And, Laravel and Vue are a perfect marriage :slight_smile:

The initial data will be loaded via API while within cell range–once out on the remote fields, there is no signal, so the data would be held locally and sync’d when back in range. Since these are inspection updates from the field, the backend won’t be updating any data from any source than the inspectors in the field, this will ensure a single source of data.

This one I am still researching. Since the only data that will be updated from the app is input data and photo uploads, I could probably get away with a PWA and by skipping the app stores, the app would have less technical debt and be easier to maintain. If I do PWA, I’ll probably go with a NuxtJS+PWA solution. I just want to make sure I go down the right path IONIC+ App Stores or NuxtJS+PWA. So many cool options to consider these days :slight_smile:

True!

Which devices are you targetting? Pwa + iOS + local stored data = not necessarily great combination