cordova-app-loader

日期:2016-3-9 10:50 | 标签: | 阅读:568

之所以要在这里做记录是因为看作者文档看得稀里糊涂,又找不到其它更好的 Repo,只能硬啃了!

使用场景

动态更新 JS/CSS/HTML 代码,APP 版本更新可是个麻烦事,特别是 IOS 一审核得好几天,此外,就算是不审核,每次都要下载一个这么大的包,用户也会很反感,于是乎,想用个法子解决这个问题,

安装使用步骤

  1. 下载autoupdate.js 此文件主要用于在加载时自动检测更新文件
  2. 下载bootstrap.js 加载manifest.json,初始化加载js
  3. 下载cordova-app-loader-complete.js 位于lib,是cordova-app-loader、cordova-promise-fs、bluebird三者的合体,支持不同运行环境不同策略
  4. 编写manifest.json文件

     // 生成环境时得去掉注释,否则会报错!
     {
       // 这些文件是会被下载的,version对应版本
       "files": {
         "dash": {
           "version": "8c99369a825644e68e21433d78ed8b396351cc7d",
           "filename": "./dash/js/dash.js"
         },
         "dashhtml": {
           "version": "3e70f2873de3d9c91e31271c1a59b32e8002ac23",
           "filename": "./dash/tpl/tab-dash.html"
         },
         "style": {
           "version": "6e76f36f27bf29402a70c8adfee0f84b8a595973",
           "filename": "./dash/css/dash.css"
         }
       },
       // 这些文件会在 index.html 中加载
       "load": [
         "dash/js/dash.js",
         "dash/tpl/tab-dash.html"
         "dash/css/dash.css"
       ]
     }
    
  5. 在index.html文件中引用

     <script type="text/javascript"
           timeout="5100"
           server="http://yourdomain/yourappfolder/"
           manifest="manifest.json"
           src="bootstrap.js">
     </script>
    
  6. 测试
    修改 style 下 dash.css 的版本号,虽然能够下载下来( downlaod ),但是没有进入到 update 方法,一步一步排查, 最后排查到了cordova-app-loader-complete.js中498行,发现少了如下一个判断,直接报错中止了运行。 issue。但是新版本貌似修复了这个问题。

     if(onSingleDownloadProgress){
         onSingleDownloadProgress(new ProgressEvent());
     }
    

    好的,现在可以成功下载并更新,但是临时存储空间提示某些文件不存在!

     filesystem:http://localhost:8100/temporary/www/lib/cordova-app-loader-complete.js?1474635373222
     Failed to load resource: net::ERR_FILE_NOT_FOUND
    

    后知后觉发现,只要配置在manifest.json中 files/load 中的文件才会有更新并放置到temporary,不管怎样,最终运行通过了, 也算是告了一小段,接下来需要把其封装成服务了。

  7. 封装成服务

         .factory('HotUpdateService', function ($log, $q, HOT_UPDATE_URL) {
             var fs = new CordovaPromiseFS({
                 Promise: Promise
             });
    
             var loader = new CordovaAppLoader({
                 fs: fs,
                 serverRoot: HOT_UPDATE_URL,
                 localRoot: 'www',
                 cacheBuster: true, // make sure we're not downloading cached files.
                 checkTimeout: 10000, // timeout for the "check" function - when you loose internet connection
                 mode: 'mirror',
                 manifest: 'manifest.json' + "?" + Date.now()
             });
    
             return {
                 // Check for new updates on js and css files
                 check: function () {
                     var defer = $q.defer();
                     loader.check().then(function (updateAvailable) {
                         if (updateAvailable) {
                             defer.resolve(updateAvailable);
                         }
                         else {
                             defer.reject(updateAvailable);
                         }
                     });
                     return defer.promise;
                 },
                 // Download new js/css files
                 download: function (onprogress) {
                     var defer = $q.defer();
                     loader.download(onprogress).then(function (manifest) {
                         defer.resolve(manifest);
                     }, function (error) {
                         defer.reject(error);
                     });
                     return defer.promise;
                 },
                 // Update the local files with a new version just downloaded
                 update: function (reload) {
                     // alert('ok');
                     return loader.update(reload);
                 },
                 // Check wether the HTML file is cached
                 isFileCached: function (file) {
                     if (angular.isDefined(loader.cache)) {
                         return loader.cache.isCached(file);
                     }
                     return false;
                 },
                 // returns the cached HTML file as a url for HTTP interceptor
                 getCachedUrl: function (url) {
                     if (angular.isDefined(loader.cache)) {
                         return loader.cache.get(url);
                     }
                     return url;
                 }
             };
         })
    

问题

  1. 和懒加载一起使用会发生问题! 在谷歌浏览器中懒加载(oclazyload)本身会在 head 中添加js引用,该引用并不是使用临时目录,但是不排除在手机环境中可行,因为其 可能会替换文件本身(这个暂时没有深究)
  2. window.BOOTSTRAP_OK = true; 必须放在不会更新的文件中,否则每次切换到页面都会自动加载
  3. 谷歌第一次更新会刷新两次[有文件更新需要重新获取],此外文件全都替换为内存中的临时文件(改动一个文件那么就下载一个文件)
  4. 在手机设备上的体验待测试
    • 还是老问题,图片加载不对,我们的解决方案是讲设计到引用图片的 CSS 文件单独提取出来,不做热更新处理
    • APP 发布后,第一次打开时使用的 JS/CSS/HTML 代码还会是老版本的代码,所以,当 APP发布涉及到 Cordova 插件的更新时,如果 JS 调用 Cordova Plugin 方法,则会直接阻断代码的运行。事实上,服务端接口发生变化也会发生这样的情况,这个时候,最好的方案是配置为下载完毕时立即更新,而不是第二次进入再更新

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式