微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

添加cache.manifest时,AngularJS/PouchDB应用程序停止与CouchDB同步

分类：Angularjs作者：编程之家
我有一个使用AngularJS编写的单页Web应用程序.它使用PouchDB复制到CouchDB服务器并且工作正常.

当我尝试通过添加cache.manifest将网页转换为可脱机时,问题就来了.突然间,所有复制任务都会抛出错误并停止工作,无论是脱机还是在线工作.

在Chrome中它只是说“GET … myCouchIP / myDB /？_ nonce = cxvFIwnEJeGFcyoJ net :: ERR_Failed”

在Firefox中它也会抛出错误,但提到请求被阻止 – 尝试启用CORS.

根据PouchDB设置页面的说明,在远程CouchDB上启用CORS.另外,它没有使用cache.manifest工作正常(即它非常满意我的桌面,服务器和VM之间的所有不同的IP地址 – 它是一个原型,所以目前没有域名).

顺便说一句,此时我没有使用任何类型的身份验证.管理员方生效.

那么添加cache.manifest会有什么变化？线索感激不尽.
提前致谢.

app.js

var app = angular.module('Assets',['assets.controllers','ngRoute']);

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
    when('/',{
        controller: 'OverviewCtrl',templateUrl: 'views/overview.html'
    }).
    when('/new',{
        controller: 'NewMachineCtrl',templateUrl: 'views/machineForm.html'
    }).
    otherwise({redirectTo: '/'});
}]);

controller.js

var _control = angular.module('assets.controllers',['assets.services']);

_control.controller('OverviewCtrl',['$scope','Machine',function($scope,Machine) {
    var promise = Machine.getAll();

    promise.then(function(machineList) {
        $scope.machines = machineList;
    },function(reason) {
        alert('Machine list is empty: ' + reason);
    });
}]);

_control.controller('UpdateMachineCtrl','$routeParams',$routeParams,Machine) {
    $scope.title = "Update Installation Details";
    var promise = Machine.getSingle($routeParams.docId);

    promise.then(function(machine) {
        $scope.machine = machine;
    },function(reason) {
        alert('Record Could not be retrieved');
    });

    $scope.save = function() {
        Machine.update($scope.machine);
    };
}]);

_control.controller('SyncCtrl',Machine) {
    $scope.syncDb = function() {
        Machine.sync();
        Machine.checkConflicts();
    };

    $scope.checkCors = function() {
        // Check CORS is supported
        var corsCheck = function(method,url) {
          var xhr = new XMLHttpRequest();

          if ("withCredentials" in xhr) {
            // XHR for Chrome/Firefox/Opera/Safari.
            xhr.open(method,url,true);
          } else if (typeof XDomainRequest != "undefined") {
            // XDomainRequest for IE.
            xhr = new XDomainRequest();
            xhr.open(method,url);
          } else {
            // CORS not supported.
            console.log('CORS not supported by browser');
          }

          xhr.onload = function() {
              console.log('Response from CORS ' + method + ' request to ' + url + ': ' + xhr.responseText);
          };
          xhr.onerror = function() {
              console.log('Error response from CORS ' + method + ' request to ' + url + ': ' + xhr.responseText);
          };

          xhr.send();
        };

        var server = 'http://10.100.3.21:5984/ass_support';

        corsCheck('GET',server);
        corsCheck('PUT',server);
        corsCheck('POST',server);
        corsCheck('HEAD',server);
//      corsCheck('DELETE',server);
    };
}]);

service.js

var _service = angular.module('assets.services',[]);

_service.constant('dbConfig',{
    dbname: 'assets',dbServer: 'http://myCouchServerIp:5984/'
});

/**
 * Make PouchDB available in AngularJS.
 */
_service.factory('$db',['dbConfig',function(dbConfig) {
    PouchDB.enableAllDbs = true;
    var localDb = new PouchDB(dbConfig.dbname);
    var remoteDb = dbConfig.dbServer + dbConfig.dbname;
    var options = {live: true};
    var syncError = function() {
        console.log('Problem encountered during database synchronisation');
    };

    console.log('Replicating from local to server');
    localDb.replicate.to(remoteDb,options,syncError);

    console.log('Replicating from server back to local');
    localDb.replicate.from(remoteDb,syncError);   

    return localDb; 
}]);

_service.factory('Machine',['$q','$db','$rootScope','dbConfig',function($q,$db,$rootScope,dbConfig) {
    return {
        update: function(machine)  {
            var delay = $q.defer();

            var doc = {
               _id: machine._id,_rev: machine._rev,type: machine.type,customer: machine.customer,factory: machine.factory,lineId: machine.lineId,plcVersion: machine.plcVersion,dateCreated: machine.dateCreated,lastUpdated: new Date().toUTCString()
            };

            $db.put(doc,function(error,response) {
                $rootScope.$apply(function() {
                    if (error) {
                        console.log('Update Failed: ');
                        console.log(error);
                        delay.reject(error);
                    } else {
                        console.log('Update succeeded: ');
                        console.log(response);
                        delay.resolve(response);
                    }
                });
            });

            return delay.promise;
        },getAll: function() {
            var delay = $q.defer();

            var map = function(doc) {
                if (doc.type === 'machine') {
                    emit([doc.customer,doc.factory],{
                                _id: doc._id,customer: doc.customer,factory: doc.factory,lineId: doc.lineId,plcVersion: doc.plcVersion,}
                    );
                }
            };

            $db.query({map: map},response) {
                $rootScope.$apply(function() {
                    if (error) {
                        delay.reject(error);
                    } else {
                        console.log('Query retrieved ' + response.rows.length + ' rows');
                        var queryResults = [];

                        // Create an array from the response 
                        response.rows.forEach(function(row) {
                            queryResults.push(row.value);
                        });

                        delay.resolve(queryResults);
                    }
                });
            });

            return delay.promise;
        },sync: function() {
            var remoteDb = dbConfig.dbServer + dbConfig.dbname;
            var options = {live: true};
            var syncError = function(error,changes) {
                console.log('Problem encountered during database synchronisation');
                console.log(error);
                console.log(changes);
            };
            var syncSuccess = function(error,changes) {
                console.log('Sync success');
                console.log(error);
                console.log(changes);
            };

            console.log('Replicating from local to server');
            $db.replicate.to(remoteDb,syncError).
                on('error',syncError).
                on('complete',syncSuccess);

            console.log('Replicating from server back to local');
            $db.replicate.from(remoteDb,syncError);       
        }
    };
}]);

_service.factory('dbListener',['$rootScope',function($rootScope,$db) {
    console.log('Registering a onChange listener');
    $db.info(function(error,response) {
        $db.changes({
            since: response.update_seq,live: true,}).on('change',function() {
            console.log('Change detected by the dbListener');
            // Todo work out why this never happens
        });
    });
}]);

cache.manifest

CACHE MANIFEST

# views
views/machineForm.html
views/overview.html

# scripts
scripts/vendor/pouchdb-2.2.0.min.js
scripts/vendor/angular-1.2.16.min.js
scripts/vendor/angular-route-1.2.16.min.js

scripts/app.js
scripts/controllers/controller.js
scripts/services/service.js

的index.html

<!DOCTYPE html>
<html lang="en" manifest="cache.manifest" data-ng-app="Assets">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Asset Management</title>

<script src="scripts/vendor/angular-1.2.16.min.js" type="text/javascript"></script>
<script src="scripts/vendor/angular-route-1.2.16.min.js" type="text/javascript></script>
<script src="scripts/vendor/pouchdb-2.2.0.min.js" type="text/javascript"></script>

<script src="scripts/app.js" type="text/javascript"></script>
<script src="scripts/services/service.js" type="text/javascript"></script>
<script src="scripts/controllers/controller.js" type="text/javascript"></script>
</head>
<body>
    <div id="content">
    <nav class="sidebar">
    <h3>Options</h3>
    <div>
        <a class="active" data-ng-href="#/">Overview</a>
        <a data-ng-href="#" data-ng-controller="SyncCtrl" data-ng-click="syncDb()">Synchronise</a>
        <a data-ng-href="" data-ng-controller="SyncCtrl" data-ng-click="checkCors()">Check CORS</a>
    </div>
    </nav>

    <section class="main">
        <div data-ng-view></div>
    </section>
    </div>  
</body>
</html>

overview.html

<h3>Installation Overview</h3>
<table>
    <tr>
        <th>Customer</th>
        <th>Factory</th>
        <th>Line Id</th>
        <th>PLC Version</th>
    </tr>
    <tr data-ng-repeat="machine in machines">
        <td>{{machine.customer}}</td>
        <td>{{machine.factory}}</td>
        <td><a data-ng-href="#/view/{{machine._id}}">{{machine.lineId}}</a></td>
        <td>{{machine.plcVersion}}</td>
    </tr>
</table>

machineForm.html

<h3>{{title}}</h3>
<form name="machineForm" data-ng-submit="save()">
    <div>
    <label for="customer">Customer:</label>
<div><input data-ng-model="machine.customer" id="customer" required></div>
    </div>

    <div>
    <label for="factory">Factory:</label>
    <div><input data-ng-model="machine.factory" id="factory" required></div>
    </div>

    <div>
<label for="lineId">Line ID:</label>
    <div><input data-ng-model="machine.lineId" id="lineId" required></div>
    </div>

    <div>
<label for="plcVersion">PLC Version:</label>
    <div><input data-ng-model="machine.plcVersion" id="plcVersion"></div>
    </div>

    <div><button data-ng-disabled="machineForm.$invalid">Save</button></div>
</form>
尝试将cache.manifest文件更改为： 
CACHE MANIFEST

CACHE:
# views
views/machineForm.html
views/overview.html

# scripts
scripts/vendor/pouchdb-2.2.0.min.js
scripts/vendor/angular-1.2.16.min.js
scripts/vendor/angular-route-1.2.16.min.js

scripts/app.js
scripts/controllers/controller.js
scripts/services/service.js

NETWORK:
*

使用清单文件时,即使您处于联机状态,所有非缓存资源也会在缓存页面上失败. NETWORK部分告诉浏览器允许对非缓存资源的请求(当然,它们在离线时仍然会失败).

原文地址：https://www.jb51.cc/angularjs/143760.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。   其中用到的软件：   Chart.js框架，版本1.0.2，一
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示： 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope
AngularJS进阶(三)HTML:让表单、文本框只读，不可编辑的方法
HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru
AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。 首先，熟悉一下微信授权部分的源代码，如下所示:
AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据，第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o
AngularJS进阶(十五)Cookie ‘data‘ possibly not set or overflowed because it was too large
Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题，刚开始以为只是个警告，没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位，显示以下代码存在错误:
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot