如何解决Meteor在移动设备上不可靠

时间:2015-11-09 06:45:44

标签: ios mobile meteor

我甚至不确定从哪里开始。我有一个相对简单的流星应用程序(http://www.vertexshaderart.com)。它使用铁路由器进行路由。主要路线/似乎是一个非常正常的情况。显示最新的8条信息。显示8条最受欢迎的帖子sort: {likes: -1}

当我尝试在手机上观看时,它只能工作约1次,可能更少。该站点显示,主模板清晰呈现,至少有一个子项呈现,但等待数据的模板永远不会显示。他们有{{#if Template.subscriptionsReady}}封套。或者更确切地说,包装器内的部件永远不会出现。我猜测由于某些原因订阅从未在移动设备上完成。事实上,我一直在键入和编辑此响应的整个10多分钟,我的手机坐在我的电脑旁边试图加载页面。它一直坐在那里装载> 10分钟,iOS状态栏中的数据微调器不断旋转。

但是,当我尝试调试它时,它始终有效(或至少到目前为止)。它在iPhone模拟器中工作正常。如果我通过WiFi直接连接到我的开发机器,它工作正常。就像我说它在移动设备上工作1或5次左右。我已经尝试连接到调试器USB然后远程调试Safari,但是当我这样做时它似乎总能工作。

您可能认为这是一个糟糕的移动连接,但我查看的其他所有网站似乎都运行良好。 Slashdot,Ars,Hackernews,GMail(网站),Facebook的网站(不是app),Reddit。等

知道如何调试这个吗?或者这是一个已知的问题?

这是我的代码

Router.route('/', {
  template: 'front',
});

-

<template name="front">
  <header>
    <div>
        <div class="buttons">
            {{> userinfosignin}}
        </div>
        {{> logo}}
    </div>
  </header>
  <div class="container">
     <div class="gallery">
         {{> artselection sort="newest" limit="8"}}
         {{> artselection sort="popular" limit="8"}}
     </div>
  </div>

<template name="artselection">
   <div class="sortcriteria">
       <div class="title">
           <div>{{sort}}:</div><div class="right"> <a href="/gallery/1/?sort={{sort}}">see all</a></div>
       </div>
       <div class="artgrid">
           {{#if Template.subscriptionsReady}}
             {{#each art}}
               {{> artpiece}}
             {{/each}}
           {{/if}}
       </div>
   </div>
</template>

<template name="artpiece">

<div class="artpiece">
    <a href="/art/{{_id}}">
      <img class="thumbnail" src="{{screenshotLink.url}}" />
    </a>
    <div class="galleryinfo">
        <div class="galleryname">
            <a href="/art/{{_id}}">&ldquo;{{name}}&rdquo;</a>
            <a href="/user/{{username}}">by: {{username}}</a>
        </div>
        <div>
            <a href="/art/{{_id}}">
              <span class="views">{{views}}</span><span class="likes">{{likes}}</span>
            </a>
        </div>
    </div>
</div>
</template>

除了{{if Template.subscriptionsReady}}

中的部分之外,我可以看到所有这些都被渲染

以下是该模板的代码

  // in a client section
  Template.artselection.onCreated(function() {
    var instance = this;
    instance.autorun(function() {
      var sort = getSortingType(instance.data.sort);
      instance.subscribe('artSelection', sort, parseInt(instance.data.limit));
    });
  });

  Template.artselection.helpers({
    art: function() {
      var instance = Template.instance();
      var sortField = getSortingType(instance.data.sort);
      var sort = {};
      sort[sortField] = -1;
      var options = {
        sort: sort,
        limit: parseInt(instance.data.limit),
      };
      return Art.find({}, options);
    },
  });

  // in a sever section
  Meteor.publish("artSelection", function(sortField, limit) {
    var find = {
      private: {$ne: true},
    };
    var sort = {};
    sort[sortField] = -1;
    var options = {
      fields: {settings: false},
      sort: sort,
      limit: limit,
    };
    return Art.find(find, options);
  });

  function getSortingType(sort) {
    switch (sort) {
      case "mostviewed":
        return "views";
      case "newest":
        return "modifiedAt";
      case "popular":
      default:
        return "likes";
    }
  }

注意:Art是一个与任何教程中Posts几乎相同的集合。数据很小。仅_idusernameownertitlecreatedAtmodifiedAtlikesviews,{ {1}}。这是关于它和一个字段hasSound这是一个字符串,最多2-3k但我在发布方法中排除该字段。实际上,在桌面上查看时检查Chrome调试器中的帧,看起来在首页完全呈现之前,只有大约12k的数据通过websocket向下发送。换句话说,这不是发送大量数据的问题。

我正在使用Meteor 1.2.1。

更新

我发现问题实际上是Chrome's Data Saver feature。我做了一个错误的假设,因为两者都是WebKit,因此在Safari上进行远程调试可以帮助我找到问题,但Chrome正在它的嵌入式WebKit视图的幕后进行奇特的网络。关闭数据保护功能,它开始工作。

根据Google的说法,您可以通过添加标题

来禁用服务器端的数据保护功能
settings

所以现在我会尝试将该标题添加到我的网站。否则我很确定谷歌希望它能够正常工作,所以我filed a bug

1 个答案:

答案 0 :(得分:0)

我绝对不确定它会解决你的问题,但是你试试&#34; waitOn&#34;铁路由器的功能(只是为了帮助您找到问题)?

显然,您希望确保使用此块完全建立您对数据的订阅:

      {{#if Template.subscriptionsReady}}
         {{#each art}}
           {{> artpiece}}
         {{/each}}
       {{/if}}

您是否可以尝试创建指向具有问题的模板的路线,并检查数据是否在此路线上加载?

类似下面的代码并查看问题是否仍然存在?

Router.route('/art_selection', {
  name: 'artselection',
  waitOn: function () { return Meteor.subscribe('artSelection'); },
  data: function () {
    return {
      art: Art.find(),
    }
  }
});

如果它在路由上运行良好而不在主页上运行,那么我猜你的模板不会在第一次渲染时等待你的订阅准备就绪,并且在订阅完成后不再重新渲染。