Firebase 和 app-indexeddb-mirror 集成不起作用

Question

我正在尝试将Firebase 与app-indexeddb-mirror 元素集成以缓存用户数据并在他离线时交付。

我创建了一个元素，即使我处于离线状态，它也应该列出我的 firebase 数据库中所有用户的名称。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/app-storage/app-indexeddb-mirror/app-indexeddb-mirror.html">

<dom-module id="firebase-test">
  <template><!--{{{-->
        <style>/*{{{*/
    </style><!--}}}-->

        <firebase-app  
            name="app"
            auth-domain="my-app.firebaseapp.com"
            database-url="https://my-app.firebaseio.com"
            api-key="my-key">
        </firebase-app>

        <app-indexeddb-mirror 
            key="teste"
            data="{{firebaseData}}"
            persisted-data="{{data}}"
        ></app-indexeddb-mirror>

        <firebase-query
            id="query"
            app-name="app"
            path="/user"
            data="{{firebaseData}}">
        </firebase-query>

        <template is="dom-repeat" items="{{data}}">
            <h1>{{item.name}}</h1>
        </template >

  </template><!--}}}-->

  <script>//{{{
    Polymer({
      is: 'firebase-test',
    });
  </script><!--}}}-->
</dom-module>

当我离线运行应用程序时，我在控制台中看到了App IndexedDB Client connecting..，这让我怀疑app-network-status-behavior 无法发现我何时离线。

Answer 1

更改app-network-status-behaviorworked。我正在使用 firebase 系统来验证连接状态。

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<script>
  (function() {
    'use strict';

    var networkStatusSubscribers = [];

    firebase.database().ref('.info/connected')
    .on('value',function(snap){
      for (var i = 0; i < networkStatusSubscribers.length; ++i) {
        networkStatusSubscribers[i].refreshNetworkStatus(snap.val())
      }
    })

    /**
     * `Polymer.appNetworkStatusBehavior` tracks the status of whether the browser
     * is online or offline. True if the browser is online, and false if the browser is
     * offline matching the HTML browser state spec.
     *
     * @polymerBehavior
     */
    Polymer.AppNetworkStatusBehavior = {
      properties: {
        /**
         * True if the browser is online, and false if the browser is offline
         * matching the HTML browser state spec.
         *
         * @type {Boolean}
         */
        online: {
          type: Boolean,
          readOnly: true,
          notify: true,
          value: function() {
            firebase.database().ref('.info/connected')
            .once('value',function(snap){
              return snap.val()
            })
          }
        }
      },

      attached: function() {
        networkStatusSubscribers.push(this);
        this.refreshNetworkStatus();
      },

      detached: function() {
        var index = networkStatusSubscribers.indexOf(this);
        if (index < 0) {
          return;
        }
        networkStatusSubscribers.splice(index, 1);
      },

      /**
       * Updates the `online` property to reflect the browser connection status.
       */
      refreshNetworkStatus: function(netStatus) {
        this._setOnline(netStatus);
      }
    };
  })();
</script>