This is not a Trongate specific question but I am hoping you pros can help me.
My brother-in-law has a small restaurant in the Philippines and asked if I could make him a simple app to log and track his sales.
The main part of the app for him as the end user is a "menu board" page with cards of each menu item that have a picture of the meal and it's name.
You tap on a menu card and "+1" appears, after 2 seconds delay the "1" is saved to localStorage. The delay is so you can tap it more than once, as long as you keep tapping cards the delay starts back at 2 seconds, if you tap a card more than once it keeps counting up with the numbers so you can easily see what you are recording.
Then there is a "Sales" link that just opens a modal listing all of the localStorage with a link to remove any of the items, and a button to send the records to the server which then empties the localStorage.
Power and internet outages are frequent and even for days, it's common.
I used the localStorage in the manner I described so that he would be able to use the app at his business even without internet, he can upload the sales later.
I realize though that he may run into a problem where his browser may try to reload the page and be unable to, meaning he has no app to use until he can get online.
My idea was to write an html file that he could keep on his phone and use it when he cannot load the app from the website but I did a quick test on my computer and the browser is not letting me make the POST request to send the data to the website because it's not from the same domain.
I also assume that the browser would not let me transfer the localStorage for a local file to the localStorage for the website.
Any ideas how I could make this work would be greatly appreciated.
Thank you in advance.
How can I use a web app offline?
3 years ago
3 years ago
#1
3 years ago
#2
I figured out the "no-cors" part, now I just need to make some way that the endpoint will allow the request if I have a special token maybe?
I don't want to leave it wide open.
I don't want to leave it wide open.
3 years ago
#3
As I was pondering solutions for your restaurant app, particularly regarding the intermittent internet connectivity issue, a few viable options came to mind:
A Progressive Web App (PWA) might be a solid choice. PWAs have the capability to work offline, load instantly, and send push notifications, among other useful features. With service workers, you can cache the necessary resources such as HTML, CSS, JavaScript, and images, allowing your app to load even without an internet connection. Once online, the app could sync the locally stored sales data with your server.
Another possibility is the Web Storage API (IndexedDB). This is a more robust version of LocalStorage designed to store significant amounts of structured data, including files/blobs. The stored data is persistent until explicitly deleted, making it an excellent choice for offline data storage, with sync capabilities once back online.
You could also consider using Cordova or PhoneGap. These are tools that transform web apps into native apps. This approach would allow your native app to use native storage mechanisms (like SQLite) for offline data storage. Once internet connectivity is restored, the stored data can be synced to your server.
Regarding the issue of making POST requests from a local file due to Cross-Origin Resource Sharing (CORS) policies, unfortunately, there's no client-side fix. However, you have the option to adjust your server to accept requests from different origins.
Lastly, your assumption is correct that you wouldn't be able to transfer the LocalStorage from the local file to the website. Web storage APIs (LocalStorage and SessionStorage) are origin-specific, meaning they can't access the storage objects of other origins.
Although the quickest and best solution would to be using Trongate with Xampp to create a Local Server Environment on the local network.
Local Server Environment: An alternative approach could be to establish a local server environment at your brother-in-law's restaurant. This setup would allow the app to communicate and sync data even without internet access, as long as the local network is functioning. You could use a lightweight server like Apache, Nginx, or even a Node.js server running on a small, inexpensive device like a Raspberry Pi. The device could store the sales data temporarily and then sync it with the main server when an internet connection is available. This approach would require some initial setup and maintenance but could provide a reliable offline solution.
A Progressive Web App (PWA) might be a solid choice. PWAs have the capability to work offline, load instantly, and send push notifications, among other useful features. With service workers, you can cache the necessary resources such as HTML, CSS, JavaScript, and images, allowing your app to load even without an internet connection. Once online, the app could sync the locally stored sales data with your server.
Another possibility is the Web Storage API (IndexedDB). This is a more robust version of LocalStorage designed to store significant amounts of structured data, including files/blobs. The stored data is persistent until explicitly deleted, making it an excellent choice for offline data storage, with sync capabilities once back online.
You could also consider using Cordova or PhoneGap. These are tools that transform web apps into native apps. This approach would allow your native app to use native storage mechanisms (like SQLite) for offline data storage. Once internet connectivity is restored, the stored data can be synced to your server.
Regarding the issue of making POST requests from a local file due to Cross-Origin Resource Sharing (CORS) policies, unfortunately, there's no client-side fix. However, you have the option to adjust your server to accept requests from different origins.
Lastly, your assumption is correct that you wouldn't be able to transfer the LocalStorage from the local file to the website. Web storage APIs (LocalStorage and SessionStorage) are origin-specific, meaning they can't access the storage objects of other origins.
Although the quickest and best solution would to be using Trongate with Xampp to create a Local Server Environment on the local network.
Local Server Environment: An alternative approach could be to establish a local server environment at your brother-in-law's restaurant. This setup would allow the app to communicate and sync data even without internet access, as long as the local network is functioning. You could use a lightweight server like Apache, Nginx, or even a Node.js server running on a small, inexpensive device like a Raspberry Pi. The device could store the sales data temporarily and then sync it with the main server when an internet connection is available. This approach would require some initial setup and maintenance but could provide a reliable offline solution.
3 years ago
#4
You just changed my life!
PWA is exactly what I need for this and some future projects!!!!
Thank you, thank you, thank you!
PWA is exactly what I need for this and some future projects!!!!
Thank you, thank you, thank you!
3 years ago
#5
Update: PERFECT!
The PWA solution turned out as good as I thought it sounded.
I used to develop on my home server but since using the Trongate app I have been using WAMP which provided a challenge with PWA because my app root was not the server root at localhost, and PWA wants at least the service worker file to be at the root so I ended up just editing a couple of conf files and changed apache to use my app folder as localhost root, even though my files at "root" are really in the public directory, I did have to add some custom routes so when index.html or index.php was specifically requested, it would give my default welcome index.
One other issue I had to solve was that I made the "homepage" the same as the page with the menu card register page, if you are not logged in you see the public version of the homepage, if you are logged in you get the menu register.
When the service worker caches the "index.html" it caches the public version then when you log in I had it redirect to the homepage instead of the user account view which was served from the cache and you would still see the public home page, also if I was able to get it to pull a new home page from the server while logged in and get the menu register, when I log out I had it redirect to homepage instead of login page and you would see the menu register because it was serving the cached page, so I changed login to redirect to the user account page, and logout redirect to login page, on each page I have javascript that sends a message to the service worker to request a new homepage "index.html" and cache it, this works perfectly.
So far it seems even if offline long enough that the token expires and then you are back online and try to go to a page that is not cached, or try to upload local data to the server, it will kick you to login where you just need to log back in and then send the local data.
I am beyond thrilled with Trongate and this PWA solution, awesome awesome awesome!!!!
The PWA solution turned out as good as I thought it sounded.
I used to develop on my home server but since using the Trongate app I have been using WAMP which provided a challenge with PWA because my app root was not the server root at localhost, and PWA wants at least the service worker file to be at the root so I ended up just editing a couple of conf files and changed apache to use my app folder as localhost root, even though my files at "root" are really in the public directory, I did have to add some custom routes so when index.html or index.php was specifically requested, it would give my default welcome index.
One other issue I had to solve was that I made the "homepage" the same as the page with the menu card register page, if you are not logged in you see the public version of the homepage, if you are logged in you get the menu register.
When the service worker caches the "index.html" it caches the public version then when you log in I had it redirect to the homepage instead of the user account view which was served from the cache and you would still see the public home page, also if I was able to get it to pull a new home page from the server while logged in and get the menu register, when I log out I had it redirect to homepage instead of login page and you would see the menu register because it was serving the cached page, so I changed login to redirect to the user account page, and logout redirect to login page, on each page I have javascript that sends a message to the service worker to request a new homepage "index.html" and cache it, this works perfectly.
So far it seems even if offline long enough that the token expires and then you are back online and try to go to a page that is not cached, or try to upload local data to the server, it will kick you to login where you just need to log back in and then send the local data.
I am beyond thrilled with Trongate and this PWA solution, awesome awesome awesome!!!!
3 years ago
#6
Hi Brian. Glad to hear you found a PWA solution. I've been running one with CI3 for about three years without a hitch. Well worth the effort and users can install it on anything from an iPhone to a clock radio!
For the current Trongate project I have been looking into PouchDB et al for offline storage (for when the users are on a plane etc) but the big challenge seems to be preventing the users from deliberately clearing their cache and losing everything until they land and resync with the server's database. Dumping objects to a file is possible but security can get tricky. I might just have to wait for the browsers to catch up.
Perhaps some bright spark will develop a Trongate module to handle local storage and syncing. I'm sure DC would relish keeping it in the family :)
Good luck and happy Trongating.
John
For the current Trongate project I have been looking into PouchDB et al for offline storage (for when the users are on a plane etc) but the big challenge seems to be preventing the users from deliberately clearing their cache and losing everything until they land and resync with the server's database. Dumping objects to a file is possible but security can get tricky. I might just have to wait for the browsers to catch up.
Perhaps some bright spark will develop a Trongate module to handle local storage and syncing. I'm sure DC would relish keeping it in the family :)
Good luck and happy Trongating.
John