Creating a web app that can work offline, store data and then sync it to remote MySQL when online?

Question

I am looking to create a web app written in PHP / MySQL. It will be used to collect data on houses by staff walking around a neighbourhood. There may be places where they have little to no cell signal, so I need a way to allow them to still view the web app when offline, as well as store the data they are submitting, to be inserted to the MySQL database once their phone has a signal / wi fi.

Is something like this even possible?

Answer 1

Yes it is possible. Although there are many different alternatives, "Progressive Web Apps" (PWA) is one of the trending topic of today. They provide mobile app experience with responsive and mobile site. They also provide standalone mode.

You can use Cache API, IndexedDB API, Web Storage API... to store data.

You need Service Worker API to sync your application with database or to manage your application when the user is offline.

Google's documentation about PWAs may be a good point to start. Also you can dive into offline storage for pwa docs of Google.

This is a good blog to describe the features of PWAs.

UPDATE AT 2018 APRIL:

With IOS 11.3, Safari 11.1 was released with service worker support. Reference: the docs

Thanks @ChrisLove for the comment