Storing and Managing offline data in Web apps - javascript

I am creating a web app that allows user to upload some data to the web server. But I want this app to work offline as well , so if network is not availabe it should store the data in local storage and it should push the data to the server when network is available.
Is there a JS library that could simplify this?

The feature you're looking for is the Background Sync API.
You could use workbox-background-sync to make usage easier, including a built-in polyfill for the behavior on browsers that don't support the Background Sync API.

JsStore is a client-side javascript library for performing database operations inside the browser using indexeddb. You can check that.

Related

Can I use web worker for ui components?

I am getting my head around to understand serviceWorkers, web workers and indexedDB. I understand their usage in a web application. I have 2 questions.
I am developing jquery widgets like color picker, date picker, token field, etc... Is it a good idea to use indexedDB to cache data retrieved from server for libraries like tokenfield, combobox that has data fetch from the server?
I am planning to use web workers for these libraries but am not sure whether this is feasible. Have any other uicomponent providers like Bootstrap tried using web workers? and what could be the issues I will be facing?
Usually, workers are used for a big calculating task (for example for parse file in the background without blocking main thread and hence UI), working with a network (into service workers it is possible to catch network requests and return something without going to server - it is useful for PWA). I think that using workers for storing data from UI components like color picker throw worker to indexedDB is redundant. Usually, this kind of data is not very important and sensitive, hence the best choice to store it - local storage.

Sails.JS or Loopback for Electron App

I am developing a image capture/storage software for school photographers that uses an angular front-end using electron to make it a native cross-platform desktop app. The app will need to have online and offline access. I will run a database on the client machine while offline and when online access is obtained it will sync to a cloud based database. In the future I want to be able to have the option for enterprise customers to run the application on premise and link to their own databases as well.
I was looking into using either Sails.js or Loopback to do this. Do you think one of the frameworks would be better for my particular use case? I would assume that both frameworks would be able to sync the offline data from multiple clients to the master cloud database using transactions easily? Any input you have would be appreciated! Thanks
(Also would react and redux be a better option for the font-end with electron opposed to using angular?)
Deciding which one suits you best is your call, but technically speaking Loopback can do what you need.
The offline/online sync is referred as isomorphic Loopback. Basically, you can run loopback client-side in offline mode, and when you get a connection it will sync with the remote server (that, ultimately, decides if the local data is accepted or not, depending on access control, validation, etc). There is an example repository. Be aware that this functionnality is still considered experimental.
Transactions are supported by some database connectors but not all of them. You can find the documentation here.

Web vs. Mobil Development: data storage

Curious is it possible to store data / records in web development permanently in browser?
I am developing native apps for iOS, and want to understand how web / javascript works.
Usually when app in native development is downloaded first from App Store and first it is launched, client fetches a lot of data from server, and afterwards at next launches when app is running only record changes moves back and forth. Is it possible these kind of data transfers in web development?
In iOS development Core Data is kind a of a ORM local database, on which JOIN operations can be performed. Is it any local database on web development that provide JOIN like operation?
Yes, there are several mechanism for storing data in browser. Check this out : https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
There are of course simpler solutions as well, such as localStorage. Websql is interesting too, although it is deprecated.
Of course, there are ORMs for client side storages as well, such as http://couchdb.apache.org
Web SQL provides a local database that can be queried using SQL. But not all web browsers may support this feature.
You can check the support here: http://caniuse.com/#feat=sql-storage
You can also store data locally using local storage, but this method does not use SQL.

How to access database in an HTML5/JS app online and offline with one code base?

I'm working on an HTML/JavaScript GUI application that will run on mobile devices (using Cordova) and also as a hosted web page that's accessible from a desktop web browser. I want to give the option to read and store data in a local offline database (SQL database most likely), as well as the option to connect to a web server and read/update data from the server as well.
If anyone has done something similar without having to write the data access routines twice (once for the server side, and once for the client offline storage side), I'd like to get some suggestions.
One solution I am thinking about (which has some unresolved issues still):
I could write the server in any platform (PHP, Java, Js, etc.), but don't want to replicate the data access code for the offline version, so am thinking to do the data access portion in JavaScript--maybe write a node.js server, and use sqlite for local/offline databases (which Cordova supports). I can't figure out how to provide similar local data functionality on a web browser.
The simplest option would be to run a server on the local machine, but I don't think that is easy in Cordova or on a desktop browser.
Check out PouchDB. PouchDB is compatible with CouchDB and is 100% Javascript. You can do some cool offline syncing to online syncing with CouchDB.
Check out https://cloudant.com/blog/pouchdb/ and http://pouchdb.com/faq.html.

Windows Azure Storage javascript (nodejs) library for browser application

I have a case where I would like to list all blobs in windows azure blob storage in a browser application where I dont want the user to submit their storage account credentials to the webserver. Wonder if its possible to use nodejs libraries for windows azure in the browser or I need to implement my own little javascript lib for doing the stuff I need in the browser.
I think you can take a look at Node.js SDK. It's for Node.js but I think could be used for browser with some code changes.
http://www.windowsazure.com/en-us/develop/nodejs/
If I understand correctly, one simple solution could be to create a Shared Access Signature on the blob container with List permission and then doing a List Blobs REST API call through AJAX. This will return you the list of blobs in XML format which you can parse and present it in the browser.

Categories

Resources