Open liuxinqiong opened 6 years ago
主要分为如下几步
本身热更新的使用在浏览器端就可以看到效果,使用只有chrome支持的HTML5特性fileSystem实现,但是要在手机端使用,必须安装如下插件:
<access origin="cdvfile://*" /> <allow-intent href="cdvfile://*" />
下载cordova-app-loader-complete.js 位于lib,是cordova-app-loader、cordova-promise-fs、bluebird三者的合体,支持不同运行环境不同策略。
cordova-app-loader-complete.js是完整的CordovaAppLoader的库和依赖。如果不引入这个会导致autoupdate.js文件报错!
功能:你的app打开和恢复的时候自动更新
缺点:a.下载文件减缓页面渲染 b.自动更新可能会打断用户
配置基本步骤
//这里的文件会被下载 "files": { "app": { "version": "698221a70985560b9a1b038b89db33c73375e0de", "filename": "js/app.js" }, "controller": { "version": "698221a70985560b9a1b038b89db33c73375e0de", "filename": "js/controller.js" } }, //这里的文件在index.html中加载 "load": [ "js/controller.js", "js/app.js" ], "version": "ae8199a17c3c921650b60506645b1eb24229d380"
load加载的顺序就是index加载的顺序,在ionic应用中,我们需要将入口文件加载在最后,否则会报错!
在ionic应用中,我们需要将入口文件加载在最后,否则会报错
用来标识文件的版本,如果本地版本和服务器版本一致,则check过程中会返回false,则不会下载和更新,保持使用本地的文件。
版本号可以使用cordova-app-loader库的命令进行生成,这样生成是按照文件内容的Hash值进行生成的,在实际开发环境中,不建议使用,因为版本号没有规律,无法实现版本回滚功能!版本号可以自己进行编写!
node node_modules/cordova-app-loader/bin/update-manifest www www/manifest.json node node_modules/cordova-app-loader/bin/update-manifest [root-directory] [manifest.json]
他将会更新被修改过文件的版本号,使用内容的hash编码。
App新发布过程,服务器的manifest.json文件应该和本地的manifest.json文件保持一致,这样check过程中检查版本号为一致时便会使用本地的资源!
这里有一点需要理解的是,此时index.html中不能引入可能会被更新的资源,因为如果文件有更新时,在index.html中就会被引入新旧版本两份资源,新资源不会生效,可能还会报错!那么index.html应该引入哪些资源呢,新资源中只能引入确定不会被更新的文件!
那么index.html应该引入哪些资源呢,新资源中只能引入确定不会被更新的文件
<script type="text/javascript" server="http://localhost:3000/cordova-app-loader/" manifest="manifest.json" src="bootstrap.js"></script>
此时程序已运行,manifest.json文件会被保存在localStorage中,以便下次进行比较。
在App成功启动时加入:
window.BOOTSTRAP_OK = true;
如果不设置window.BOOTSTRAP_OK为true,在timeout时间过后,localStorage中的manifest.json会被清空,页面会重新加载,导致app回退到最初时的manifest.json状态!
开发中应该总是绑定manifest.json和files,确保你的app有默认的工厂用来还原,同时保证你的app可以离线运行。
// download manifest from: serverRoot+'manifest.json' loader.check().then(function(updateAvailable) { ... }) // download from custom url loader.check('http://yourserver.com/manifest.json').then( ... ) // or just check an actual Manifest object. loader.check({ files: { ... } }).then( ... )
loader.download(onprogress) .then(function(manifest){ ... },function(failedDownloadUrlArray){ ... });
* update ```js // write manifest to localStorage and reload page: loader.update() // returns `true` when update can be applied // write manifest to localStorage, but DO NOT reload page: loader.update(false)
在下载的过程中,如果出现奔溃,应用将会使用最初的清单进行重启。
对于引用了静态文件,比如图片,字体文件等,常见于CSS使用url引入,此时由于CSS中会出现net::ERR_FILE_NOT_FOUND错误,从而导致热更新出错,从而自动使用最初的清单进行重启!
目前问题依旧没有完美解决,热更新会导致 CSS 引入的静态资源找不到,目前的解决办法是,使用 asset.css 管理静态资源且不纳入热更新,如果存在静态资源更新,热更新就不那么好使了!
每次发布的时候要记录版本,用于回滚。具体设计:
规则没有明确规定,上述是目前我司热更新版本管理规则。
后台会报404错误,会读取本地manifest文件载入localstorage,保证下次可以直接从localstorage中读取!
无网络的情况下,后台会报NETWORK的错误,会读取本地manifest文件载入localstorage,保证下次可以直接从localstorage中读取!
你真棒
原理
主要分为如下几步
配置
插件安装
本身热更新的使用在浏览器端就可以看到效果,使用只有chrome支持的HTML5特性fileSystem实现,但是要在手机端使用,必须安装如下插件:
config配置
依赖库
bootstrap.js
cordova-app-loader-complete.js
下载cordova-app-loader-complete.js 位于lib,是cordova-app-loader、cordova-promise-fs、bluebird三者的合体,支持不同运行环境不同策略。
cordova-app-loader-complete.js是完整的CordovaAppLoader的库和依赖。如果不引入这个会导致autoupdate.js文件报错!
autoupdate.js
功能:你的app打开和恢复的时候自动更新
缺点:a.下载文件减缓页面渲染 b.自动更新可能会打断用户
使用
manifest.json
配置基本步骤
配置demo
load注意事项
load加载的顺序就是index加载的顺序,
在ionic应用中,我们需要将入口文件加载在最后,否则会报错
!version
用来标识文件的版本,如果本地版本和服务器版本一致,则check过程中会返回false,则不会下载和更新,保持使用本地的文件。
版本号可以使用cordova-app-loader库的命令进行生成,这样生成是按照文件内容的Hash值进行生成的,在实际开发环境中,不建议使用,因为版本号没有规律,无法实现版本回滚功能!版本号可以自己进行编写!
他将会更新被修改过文件的版本号,使用内容的hash编码。
本地版本和服务器版本
App新发布过程,服务器的manifest.json文件应该和本地的manifest.json文件保持一致,这样check过程中检查版本号为一致时便会使用本地的资源!
这里有一点需要理解的是,此时index.html中不能引入可能会被更新的资源,因为如果文件有更新时,在index.html中就会被引入新旧版本两份资源,新资源不会生效,可能还会报错!
那么index.html应该引入哪些资源呢,新资源中只能引入确定不会被更新的文件
!index.html配置
此时程序已运行,manifest.json文件会被保存在localStorage中,以便下次进行比较。
window.BOOTSTRAP_OK
在App成功启动时加入:
如果不设置window.BOOTSTRAP_OK为true,在timeout时间过后,localStorage中的manifest.json会被清空,页面会重新加载,导致app回退到最初时的manifest.json状态!
CordovaAppLoader核心函数
奔溃处理
在下载的过程中,如果出现奔溃,应用将会使用最初的清单进行重启。
对于引用了静态文件,比如图片,字体文件等,常见于CSS使用url引入,此时由于CSS中会出现net::ERR_FILE_NOT_FOUND错误,从而导致热更新出错,从而自动使用最初的清单进行重启!
版本回滚
每次发布的时候要记录版本,用于回滚。具体设计:
Q&A
后台会报404错误,会读取本地manifest文件载入localstorage,保证下次可以直接从localstorage中读取!
无网络的情况下,后台会报NETWORK的错误,会读取本地manifest文件载入localstorage,保证下次可以直接从localstorage中读取!