简体   繁体   English

与本地存储Firestore Web应用程序进行脱机数据同步

[英]offline data sync with local storage firestore web application

I've already created a simple web page which saves and displays data in firebase database. 我已经创建了一个简单的网页,该网页保存并显示了Firebase数据库中的数据。 I tried different times to make the offline cache data to be synced with the fire base data. 我尝试了不同的时间,以使脱机缓存数据与Fire Base数据同步。 But it doesn't work. 但这是行不通的。 I've attached .html and .js files. 我已经附加了.html和.js文件。 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? 有人可以帮我吗,在应用程序断开连接后建立连接后,本地存储缓存如何与Fire Base数据同步?

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>

Your code is using the Firebase Realtime Database , which doesn't support disk persistence in its web client at the moment. 您的代码使用的是Firebase Realtime数据库 ,该数据库目前不支持其Web客户端中的磁盘持久性。 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. 如果您想为Web应用程序提供离线缓存支持,建议您使用内置有此类支持的Cloud Firestore for Firebase

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM