【问题标题】:ExtJs Application Cache warningExtJs 应用程序缓存警告
【发布时间】:2020-07-13 02:54:48
【问题描述】:

我有一个用 ExtJs 编写的单页应用程序。我没有使用应用程序缓存,但是当应用程序启动时,我在 Chrome 中看到以下警告:

[弃用] 应用程序缓存 API 的使用已弃用,并将于 2020 年 4 月左右在 M82 中移除。有关详细信息,请参阅 https://www.chromestatus.com/features/6192449487634432

这个问题已经在 Sencha 论坛(herehere)上多次发布,这可以追溯到几年前。唯一的回应是来自非煎茶海报的人说“应该没问题”。不完全是您希望的答案。

有谁知道如何摆脱这个警告?考虑到我没有明确使用应用程序缓存,这听起来好像 ExtJs 可能在后台使用它做某事。这就是我所关心的。

【问题讨论】:

    标签: extjs html5-appcache


    【解决方案1】:

    我决定调查这个问题,因为我发现这个问题很有趣。

    简短的回答是,除非您明确使用applicationCache,否则它实际上不会以任何方式影响您的应用程序。

    详情:

    即使您只是尝试调用window.applicationCache 属性也会出现警告

    applicationCache 是做什么用的?它缓存静态文件(js 和 css)以使您的应用程序脱机工作。这项技术已被 ServiceWorker 所取代。使用 applicationCache 进行缓存的工作原理如下(简短描述,full on MDN):

    1. 您创建了一个特别组合的清单 ...
    2. 并在您页面上html 标记的manifest 属性中设置它的路径
    3. 之后,该清单中的文件将保存在 applicationCache 中

    在 Sencha 应用程序中,这显示为脚本 https://docs.sencha.com/extjs/6.2.0/classic/src/Microloader.js.html 的结果,该脚本 注入您的页面。

    在这个文件中,applicationCache 的内置包装器和创建侦听器分配给applicationCache。这些侦听器的处理程序更改包装器内部的状态并调用notifyUpdateReady 方法,该方法又调用全局appupdate 事件。 同时这些代码都是抽象的,对applicationCache的整体运行几乎没有影响。

    如果有疑问,您可以模拟禁用 applicationCache。在if (_cache){... 之前在checkAllUpdates 方法中设置调试器并覆盖_cache (_cache = undefined;)。然后将控制权返回给浏览器。什么都不会发生。

    我使用 SenchaFiddle 示例测试了所有这些。 那里根本不使用缓存。它没有清单

    我重复结论 - 如果您没有明确使用 applicationCache - 您无需担心。您可以通过查看页面代码并查找清单连接来检查它是否被您使用。也可以在控制台执行如下代码

     window.applicationCache.status
    

    如果结果为 0,说明缓存未在您的应用程序中初始化

    【讨论】:

    • 非常感谢您的详细解答。我现在可以睡得更好了。当然,我现在的问题是为什么 Sencha 从来没有提供过这样的答案?
    • 唉,我不知道这个问题的答案。我可以肯定地说,在论坛上提问不再有意义——他搬到了这里。我在这里没有看到官方煎茶的代表。但是煎茶还是要接受bug
    【解决方案2】:

    您可以在app.json 中关闭appCache

    /**
      * Settings specific to production builds.
      */
    "production": {
        "output": {
            "appCache": {
                "enable": true, // <- change this to false and rebuild
                "path": "cache.appcache"
            }
        },
    

    【讨论】:

    • 当我将我的设置为 false 并重新构建生产应用程序时,没有生成文件并且警告消失了。