0

I've already created a simple web page which saves and displays data in firebase database. I tried different times to make the offline cache data to be synced with the fire base data. But it doesn't work. I've attached .html and .js files. Could anybody help me, how the local storage cache be synced with fire base data once the connection established after the disconnect of the app?

var output = document.getElementById("data");
var dataText = document.getElementById("data-text");


var firebaseReference = firebase.database().ref('users/');

(function() {

    firebaseReference.on("value", function(snapshot) {
        output.innerHTML = JSON.stringify(snapshot.val(), null, 2);
    });
})();

$(document).ready(function(){
    $("form").submit(function(){
        firebaseReference.push().set({Name: dataText.value});
    });
});

var connectedRef = firebase.database().ref(".info/connected");

connectedRef.on("value", function(snap) {
    if (snap.val() === true) {
        alert("connected");
    } else {
        alert("not connected");
    }
});

<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>Firebase</title>
  </head>
  <body>
    <h1>Firebase  Example</h1>
    <h2>Add New</h2>
    <form action="" class="form-group">
      <input type="text" required id="data-text">
      <input type="submit" id="data-submit" class="btn btn-primary">
    </form>
    <h2>Existing Data</h2>
    <pre id='data'></pre>
    <script>
        var config = {
            apiKey: "AIzaSyBGKWHQlLok3q70Y6Q5CAzWyLbN4GyKnAQ",
            authDomain: "my-firebase-project-536a4.firebaseapp.com",
            databaseURL: "https://my-firebase-project-536a4.firebaseio.com",
            projectId: "my-firebase-project-536a4",
            storageBucket: "my-firebase-project-536a4.appspot.com",
            messagingSenderId: "711083146609"
        };

        firebase.initializeApp(config);

    </script>
    <script src="script.js"></script>
  </body>
</html>
KENdi
  • 7,576
  • 2
  • 16
  • 31
Darshana Sandaruwan
  • 31
  • 6
  • 2
    You provided us some of your credentials, that's bad. We can access your database. – Cătălin Florescu Nov 13 '17 at 10:28
  • @FlorescuGeorgeCătălin If he publishes that code anywhere, everyone will have that access. So it is even worse. – lilezek Nov 13 '17 at 12:21
  • 1
    @FlorescuGeorgeCătălin and lilezek: those are not credentials, but project identifiers: values that identify the Firebase project on the Google servers. They're no different than publishing the URL of your cloud hosted database. While it's true that somebody who doesn't know such values can't abuse your database, just knowing them should not be enough to abuse the database. See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Frank van Puffelen Nov 13 '17 at 15:13
  • Thanks for the update on the security of my data. Since this is a testing database, i didn't concern about it. Any answer for the question? – Darshana Sandaruwan Nov 14 '17 at 04:00

1 Answers1

0

Your code is using the Firebase Realtime Database, which doesn't support disk persistence in its web client at the moment. While the feature has been worked on in the open-source repo, it hasn't been released yet.

If you want offline caching support for a web application, I recommend using Cloud Firestore for Firebase where such support is built in.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807