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

问题描述

我试图用 app-indexeddb-mirror 元素来集成 Firebase 来缓存用户数据并将其传递当他离线的时候。

我已经在我的firebase数据库中列出了一个列出所有用户名字的元素，即使在离线时也是如此。

 < link rel =importhref =../ bower_components / polymer / polymer.html> 
< link rel =importhref =../ bower_components / polymerfire / polymerfire.html> 
< link rel =importhref =../ 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-repeatitems ={{data}}> 
< h1> {{item.name}}< / h1> 
< / template> 
 
< / template><！ - }}}  - > 
 
< script> // {{{
 Polymer（{
是：'firebase-test'，
}）; 
< / script><！ - }}}  - > 
< / dom-module> 
  

当我离线运行应用程序时，获取 App IndexedDB Client连接。 在控制台中，是什么让我怀疑当我离线时， app-network-status-behavior 无法发现。

解决方案

改变 app-network-status-behavior 我使用firebase系统来验证连接状态。

 <！ -  
 @license 
版权所有（c）2016聚合物项目作者。版权所有。 
此代码只能在http://polymer.github.io/LICENSE.txt找到的BSD样式许可证下使用
完整的作者集可以在http：//polymer.github上找到.io / AUTHORS.txt 
可以在http://polymer.github.io/CONTRIBUTORS.txt找到完整的贡献者集合
作为聚合物项目的一部分，由Google发布的代码也是
受限于http://polymer.github.io/PATENTS.txt中的额外知识产权授权
  - > 
< link rel =importhref =../ polymer / polymer.html> 
< script> 
（function（）{
'use strict'; 
 
 var networkStatusSubscribers = []; 
 
 firebase.database（）。ref（'。 （$ i = 0; i< networkStatusSubscribers.length; ++ i）{
 networkStatusSubscribers ['$' i] .refreshNetworkStatus（snap.val（））
} 
}）
 
 / ** 
 *`Polymer.appNetworkStatusBehavior`跟踪浏览器
 *在线或离线，如果浏览器在线，则为true;如果浏览器为
 *，则离线匹配HTML浏览器状态规范，否则为false 
 * 
 * @polymerBehavior 
 * / 
 Polymer.AppNetworkStatusBehavior = {
属性：{
 / ** 
 *如果浏览器处于联机状态，则为true;如果浏览器处于脱机状态，则为false 
 *匹配HTML浏览器状态规范
 * 
 * @type {Boolean} 
 * / 
 online：{
 type：Boolean，
 readOnly：true，
 notify：true，
 value：function（）{
 firebase.database（）。ref（'。info / connected '）
 .once（'value'，function（snap）{
 return snap.val（）
}）
} 
} 
}， 
 
附加：function（）{
 networkStatusSubscribers.push（this）; 
 this.refreshNetworkStatus（）; 
}，
 
 detached：function（）{
 var index = networkStatusSubscribers.indexOf（this）; 
 if（index  return; 
} 
 networkStatusSubscribers.splice（index，1）; 
}，
 
 / ** 
 *更新`online`属性以反映浏览器连接状态。 
 * / 
 refreshNetworkStatus：function（netStatus）{
 this._setOnline（netStatus）; 
} 
}; 
}）（）; 
< / script> 
  

I'm trying to integrate Firebase with app-indexeddb-mirror element to cache user data and deliver it when he's offline.

I ceated an element that should list the name of all users in my firebase database even when I'm offline.

<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>

When I run the app offline I get the App IndexedDB Client connecting.. in the console, what makes me suspect that the app-network-status-behavior is failing to discover when I'm offline.

解决方案

Changing the app-network-status-behaviorworked. I'm using the firebase system to verify the connection status.

<!--
@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>

这篇关于Firebase和app-indexeddb-mirror集成不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！