How to make website work in offline mode and save data - javascript

Creating a project with JS and .net. which needs to work even in offline mode.
As I can see service worker can be used to cache static assets and can work offline, but we
can't save data to Database. Please let me know if the service worker can save data also.
Is there any better approach to making the website work in offline mode and save data somewhere and pass it to the database when online? The saved data should not be cleared when the user closes the browser

In theory you can use a localstorage to permanently save data. I suggest that you do not save sensitive information within it or that could, in the wrong hands allow unwanted access to your services and create problems for you.
You can find information about how it works here. You will find simple examples for its full use.
https://it.javascript.info/localstorage
However, making an app work fully without an Internet connection can be complex and should be analyzed in each precise circumstance. Any change operations to the database could be parked in the localstorage and provide for a worker to make the calls when the network returns. It is not simple what you asked and I cannot help you further.
You also need to understand how to handle getting information from a Database if you have no connection. Some functionality will have to be suppressed while for "static" obtainments you might think about caching (as also said by you).

You can use localStorage to save data to the browser even when in offline mode.
See MDN reference

Related

Using Firestore with offline persistence - Desktop (web)

Offline persistence in Firestore enables the browser to store records that were not uploaded to the server (offline) even after the session was closed (Browser exit)
Please see: https://firebase.google.com/docs/firestore/manage-data/enable-offline
However, firestore does not offer any officially supported way to clear the Chace when a user logs out from his session. Please refer to: https://youtu.be/qGAIimfrBB4?t=257
Recently they released the function clearPersistence, but they clearly state that is not meant for security reasons and recommend to disable Persistence if security is an important factor for you. Please see: https://firebase.google.com/docs/reference/android/com/google/firebase/firestore/FirebaseFirestore#clearPersistence()
Note: clearPersistence() is primarily intended to help write reliable
tests that use Cloud Firestore. It uses an efficient mechanism for
dropping existing data but does not attempt to securely overwrite or
otherwise make cached data unrecoverable. For applications that are
sensitive to the disclosure of cached data in between user sessions,
we strongly recommend not enabling persistence at all.
I want to understand better what's the security hole with using "ClearPersistence" on logout of the user.
Anyone experienced with that? Any other working solution that enables you to remove all the Firestore cache after a logout?
There is no guarantee that your code will run in the browser (or any other client). For example: a malicious user can take the configuration data from your application, and call the API to get access to the same data in your project, but then store it wherever they want.
Another malicious user might prevent the app from clearing the local cache, or quickly copy the local cache file to another location to have a copy before it is cleared.
And these are just two if the simplest examples. The simple fact is that you should assume that any data that exists/persists on the client can be seen by any user who has access to that client.

How to prevent users from downloading whole Firebase database and just all the small parts

My Firebase database is fully readable for anyone, because the content is of course going to be used for a websit. As you know, Firebase has a download limit (10GB/month), and if someone wanted to they could write some code to download the whole thing over and over 'til the limit was reached. Now, can i prevent a full download but still have everything accessible in parts, as intended?
There is no way in Firebase's server-side security rules to limit based on the size of the data users can read at once.
You'll typically control access by making the data not globally readable. Instead you'll want to make it readable by following a certain structure, which matches with how you access the data in your web site.
If you suspect your web site is seeing abuse, reach out to Firebase support for personalized help in troubleshooting

Is it possible to generate a text or xml file from local storage data and save it in a folder?

I'm working on a website that is going to be offline. All the html files will be in a folder stored on the hard-disc. I've managed to do 90% of the work and the last part I have no idea of. Here is what it is:
I have stored a list of products in the localStorage as various strings under the keys - like buying objects and it goes to the cart, the cart objects are in localStorage. I created a page that showed the list of all the products in the localStorage. It can be cleared if the user clears them. Now I need to create a page where all the objects that was selected before, regardless of the localStorage being cleared, show as list in this page. You can take it as the page that lists products that have been ordered in the past, i.e even after the cart is cleared the products will show in the past-orders page.
I do not know any server side codes, I did everything using JavaScript as it was supposed to be a simple project, but I'm stuck at this part. So I cannot use PHP or anything to generate files or use a database to store stuff.
Here's what I thought but I don't think it works but wanted to confirm if it does or not:
Generate an XML file or a .txt file and store it in the drive and then clear the localStorage. But I don't think it is possible. If its possible just using JavaScript please point me in the right direction and I'll research and come up with something.
P.S. the website will be entirely offline what I mean is the users will never connect to the internet for this to work. Also there won't be a server or localhost.
Thank you!
The site is completely offline, but functionality is similar to an eCommerce site. You click a button and some content from the website stores in the localStorage and I have to call it in multiple pages, when a user clicks another button, localStorage clears but whatever was selected before must be available without localStorage. Hmmmm.. Consider a quiz site where you answer everything and when you take a new quiz, old scores will be stored somewhere else and it won't change when you take a new test.
Is it possible to attain this functionality without a server side script? It seems the final-targeted-users won't know how to install any softwares that can provide a localhost or a server or something like that.
Client-side, browser's JavaScript runtimes don't have local file system access excepting a very limited one when uploading files to a remote server, and anyway, browers won't give you direct access to the file.
You'll need some kind of server-side logic behind the scenes if you want full I/O in the local file system.
Perhaps you can take a look at NodeJS, a server-side JavaScript runtime that can work as lighty Web server on either small and large projects, and it has built-in server-side JavaScript I/O functions.
Otherwise, you're absolutely stuck in the client-side Web browser's sandbox limitations.
U can refer documents of knockoutjs and NodeJS.. That would probablky help... A far as my knowledger is concerned NodeJS does contain a way to handle your problem.

Secure user authentication in offline web apps

This question has cropped up a few times in various guises, but I've not seen an answer that satisfies my requirement or fills me with much confidence. Let me set the scene.
We currently have a web application, which allows users to submit responses to pre-set questions where the data ends up in an SQL Server database, we also have a Windows application that does the same thing but works in an offline capacity; i.e. it connects to the SQL Server, downloads the questions, allows the user to complete them offline and when they next have a network connection they can synchronise the data, uploading it to the SQL Server. Great!
As part of our development strategy, given HTML 5's offline capabilities and local storage,it seems perfectly sensible to attempt to consolidate these products into a single web application. This would mean we're able to work on a single code base, and this would also enable the application to run in a browser on most devices; platform independent.
Looking into this I see a couple of potential problems, I'd really appreciate a steer on these:
Users need the ability to login, in offline and on-line modes. This could mean we download the hash's of the all users usernames and passwords, or just those that have logged in whilst in on-line mode. However, even doing this there needs to be a way to check these and given that the Javascript is readable someone could easily reverse engineer their credentials. Yes you can obfuscate the code but this isn't infallible.
The data that needs to be stored locally could be highly sensitive; contain personal information etc. Therefore this also needs encrypting, at minimum AES 256.
Am I hoping for utopia? Is this something that's just not possible at this time? Do I need to be looking at another solution and dismissing this for the time being?
Any help from you lovely people would be much appreciated.
First the easier question 2: that is perfectly possible. You can generate the key on the device and on sync send it via https to your server which can decrypt the data then.
As for question 1 I'd say an offline login is not really feasible BUT do you actually need one? Once the questionaire is downloaded (which requires online mode, so requiring login is fine) you only need to transmit it on sync, where online is again required and you can ask the user for his login there, too. I'd not recommend to download any sensible user data (e.g. hashes) to the device.
What you can do is to cache the current user only after logging in online. This would mitigate the risk of enumerating the users in your local DB.
You then need to encrypt the user's data on the front-end, I'd go with a library that does the job for you (for example, RxDB). RxDB accepts a password (which you can generate on the fly) and based on it, encrypts your DB data. The user then fills in the form (does whatever he wants) and if all of the sudden the internet is gone, the user is still able to continue his work and that work must be added as pending requests in order to do the sync. (which you already have)
When the internet is restored, you're going to check whether the session has expired for the user and if so, prompt the user to log in again and do the sync if it was the same user. If it's still there, perform the sync.
My advice based on my personal experience for the offline part.
You can create a local variable that allows the user to login once using internet for the first time then he will be able to auto login for several times as much as you decided in the local variable and when the value is 0 he will need an internet again to get another offline access for the same value you decided before.
so, in a small words. offline counter that will need an internet Only after many offline logins (when the counter decrease to 0)
Flowcharts

how can i track users without cookies

ok... im looking to have a good round of brainstorming here...
say i was google... the adword/adsense/analytics division. i would be getting a little worried about the future, when users start to disable cookies (or at least delete them on a regular basis), use private browsing, roam on multiple devices. how could google alternatively track users without the benefits of cookies?
some ideas to get started (please elaborate on these and any others):
-track users using some other persistent local/client side storage
-use user-agent string fingerprinting
-test cache response - if user 304's an image, they were here
-track mac address
-any random/out of the box ideas?
Take a look at http://samy.pl/evercookie/, it's a JS API for ultra-persistent cookies, but you can take idea(s) from it's mechanism to find storage for your data.
I think you could do it using custom urls. You would basically ecrypt a cookie and attach it as part of the URL you send to the browser. When it returns, your web server would be smart enough to decode it and track whoever sent it.
I believe the Spring framework can do this in fact.
If your site requires user tracking, then I would have it fail to work if cookies are disabled. Then focus your time and effort on making it a fantastic site for the vast majority of your visitors, and don't worry about the ones who, for whatever reason, have made the explicit decision to disable cookies.
(Made this a CW answer because this is a subjective question that's likely to be closed.)
Information about browser/system/display through js and IP of cause;
Java Applet provide a lot of info about user;
Flash also (e.g. installed fonts);
Modern browsers also provide a lot of information about users (e.g. installed extensions) and provide new ways to save information on client-side (e.g. html5 storage).
altogether: http://panopticlick.eff.org/
you can always resort back to good ol way, the HIT COUNTER.
on page, use tag and link to external image on your server
on your server, when image is fetched, redirect it to php script through .htaccess and record header info about device id etc. {similar code as disabling the hotlinking of image}
Now you have all info, use php_session() to keep a track of it
you can always use js for the same purpose, but using tag will ensure that js is not required and the script will run on all browsers

Categories