【问题标题】:Visual Studio cordova, simple way to "live reload" on Android devices?Visual Studio cordova,在 Android 设备上“实时重新加载”的简单方法?
【发布时间】:2025-12-25 23:50:07
【问题描述】:

刚开始检查使用 Visual Studio 2015 开发 Cordova 应用程序的工作流程。

我的问题是,在实际的 android 设备上调试时(假设 ver > 4.4)有没有办法实现“实时重新加载”(在 JS/CSS/HTML 中进行更改,并且这些更改在不重新启动构建过程的情况下变为活动状态)。我可以理解,从项目中添加/删除插件对于实时重新加载(由于需要构建本机代码)来说将是一个更大的问题,但是对于我们的 javascript 代码,那不只是更新目标上的文件吗?我并不真正关心在没有用户交互的情况下自动更新目标,我只需要避免耗时的重建过程,当需要频繁的小改动时。我读过 Ionic 框架已经这样做了,但是需要 ionic 来做到这一点吗?我也用 phonegap 看到/测试过,但我不喜欢这样。

我在这方面是绿色的,但我认为实时重新加载只涉及指向我们的源的静态 http 服务器(管理“虚拟”cordova.js 等)加上诸如更改项目的起始 html 指向到我们的服务器而不是文件(甚至是我们应用程序上的“重新加载”按钮)。不就是这样吗?我想我在某个地方错了,否则我希望将其视为 V/S 标准问题。只是说。如果不是 V/S 的东西,有没有可以安装的工具/插件?

抱歉,问题/帖子太长了。非常感谢评论/方向

【问题讨论】:

    标签: javascript cordova hybrid-mobile-app visual-studio-cordova


    【解决方案1】:

    环顾四周后,我决定创建一个简单的解决方案来解决这个问题,我将把它发布给所有愿意这样做的人。我们只需要一个指向 android 构建目录的静态 http 文件服务器:

    <project_folder>/platforms/android/assets/www
    

    碰巧在成功构建后,该文件夹包含所有要提供的文件,包括 cordova.jscordova_plugins.js 和整个 plugins 文件夹及其 javascript 文件。

    由于 node 存在,使用 node/express 很容易创建一个“快速”的 http 服务器。这是我起草的脚本(根据您的需要随意修改)。

    livesrv.js:

    var express     = require('express');
    var server      = express();
    var http        = require('http').Server(server);
    var port        = 80;
    var static_root = process.argv[2] || '<YOUR_PROJECT_FOLDER>/platforms/android/assets/www';
    
    server.all('/*', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
       next();
    });
    
    server.use(function(req, res, next) 
    {
      console.log('--> '+req.url);
      if(req.url.match(/(.png|.jpg|.jpeg|.svg|.woff|.woff2|.ttf|.otf|.eot)/)) {
        res.header('Cache-Control', 'max-age=691200');
      } else {
        res.header('Cache-Control', 'max-age=0, no-cache, no-store, must-revalidate');
        res.header('Pragma', 'no-cache');
        res.header('Expires', 'Thu, 01 Jan 1970 00:00:01 GMT');
      }
      next();
    });
    
    server.use(express.static(static_root));
    
    http.listen(port, function() {
      console.log("startup: server started @ port " + port + ", root:"+static_root);
    });
    

    当您启动此节点应用程序时,您的项目文件 (js/css/html) 对您设备上的实时更新是可见的(警告:这会暴露您的源代码,因此在使用此脚本之前您必须了解自己在做什么)。对于那些需要更详细说明的人:

    • 将上述 sn-p 保存到空文件夹中的“livesrv.js”文件中
    • 打开该文件夹的命令提示符
    • 运行一次“npm install express”(如果未全局安装)
    • 使用命令运行服务器

    node livesrv &lt;your_project_folder&gt;/platforms/android/assets/www

    下一步:将项目的起始 HTML 更改为 config.xml 以指向另一个 HTML 文件(在本例中,我选择了“main.html”)

    创建“main.html”,它只不过是服务器的“引导程序”。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Security-Policy" content="">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    </head>
    <body>
        <script>
            console.log("Starting..");
            setTimeout(function () {
                console.log("Booting app..");
                window.location.href = "http://<YOUR_SERVER_IP>/index.html";
            }, 200);
        </script>
    </body>
    </html>
    

    所有这些都是从服务器加载`index.html'。不要忘记用您自己的(运行节点服务器的主机的 IP 地址)更新 YOUR_SERVER_IP。

    最后一步:我在我的 web 应用程序中放置了一个按钮(您可以使用应用程序的“静态”部分,例如永久徽标,如果有的话),它允许您触发重新加载。

    $('#mylogo').on('click', function () {
       console.log("Reloading..");
       window.location.reload();
    });
    

    这对我有用。初始构建/安装后,每次我按下徽标时,应用程序都会从​​服务器重新加载(更新的)内容,因此无需重建。试试这个,让我知道它是否适合你。不要忘记允许设备与服务器连接(即:启用wifi!)

    要发布应用,请将起点改回index.html 并移除重新加载按钮。

    缺点/限制:

    • 重新加载时,Visual Studio 的 DOM 与目标应用的连接会丢失(至少在我的测试中)
    • 总体上应该是一个更简单/自动化的解决方案。
    • 如果您在上次实际构建后添加了插件,是否需要重新构建。

    好处:

    • 设备上的即时应用更新,在 js/css/html 内容发生更改时消除构建时间

    我可能忽略了一些事情,特别是如果有现成的服务可以用来实现这一点,所以如果你知道任何可以简化这一点的事情,请告诉我。因此,请随意批评以上所有内容,因为我非常有兴趣阅读您的想法。顺便说一句,如果有人愿意将此作为 V/S 的插件,我真的很想使用它。

    干杯!

    【讨论】:

    • 我忘了说,我在我的测试项目中使用了人行横道,没有它我没有测试过。
    【解决方案2】:

    我对此的解决方案是让应用程序通过标准 Cordova 下载方法动态下载额外的 Javascript 文件,然后在代码中添加指向它们的链接。它们会在您将 HTML Script 标记添加到索引页面时执行。

    答案不多,但它可能会引导你走向正确的方向。

    编辑:

    尝试像这样下载脚本:

    var ft = new FileTransfer();
    ft.download([VARIOUS PARAMS YOU CAN FIND ONLINE]);
    

    这要包含在项目中:

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = [PATH YOU GOT FROM THE DOWNLOAD ABOVE];
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
    

    抱歉,代码无法正常工作,但这就是我工作的全部时间!呵呵

    【讨论】:

    • 感谢您的回答。我可以问你关于这些提示的更多细节吗?例如:您所说的“标准科尔多瓦下载方法”是什么意思?如果您能详细说明一下,我将不胜感激。提前致谢
    • @mtso 哦,是的,抱歉回复晚了。 ;-)
    • 感谢您的解释。我目前正在使用我在下面发布的解决方案(我在您的帖子之前就这样做了),它似乎对我来说工作正常。它有一些小缺点,例如重新加载后失去与 Visual Studio 的 DOM 连接,但我无论如何都使用 Chrome 进行任何 js/html 调试,所以这对我来说不是一个坏缺点)。及时我可能会监视更改以自动重新加载过程,但至少对我来说这不是重要的部分。我一直在寻找的是避免重建/下载过程延迟,这已经完成。再次感谢先生!