使用angularJs应用程序的sw-precache不缓存

时间:2017-06-02 12:43:56

标签: angularjs service-worker

我是服务工作者概念的新手,所以请原谅我,如果我忽略了文档中的内容。我有一个已经在生产中运行的角度应用程序,我正在尝试使用sw-precache引入服务工作者。 首先,我试图预先清除所有图像/字体和几个js文件,看看它是否有效,所以我的预先配置就像这样 -

{
  "cacheId": "static-cache",
  "importScripts": [
    "sw-toolbox.js"
  ],
  "stripPrefix": "dist/",
  "verbose": true,
  "staticFileGlobs": [
    "dist/img/**.*",
    "dist/javascripts/require.js",
    "dist/stylesheets/**.*",
    "dist/webfonts/**.{ttf, eot, woff}",
    "sw-toolbox.js",
    "service-worker.js"
  ]
}

现在我可以看到服务工作者已正确注册和安装,缓存存储显示所有带有_sw-precache哈希的网址。 storage cache

但是当我加载应用程序并在网络选项卡中看到所有静态内容仍然从内存/磁盘提供,而不是从服务工作者提供,我无法调试为什么会这样。我在这里错过了什么 -

network tab

更新: 更多信息:我有错误的配置,因为我有动态URL和服务器端呈现的HTML。服务器端它是test.jsp,它给了我初始shell。 现在我已经从缓存中删除了所有其他静态文件,只保留了show.css

所以现在更新配置是 -

{
  "importScripts": [
    "sw-toolbox.js"
  ],
  "stripPrefix": "dist/",
  "verbose": true,
  "staticFileGlobs": [
    "dist/stylesheets/show.css"
  ],

  "dynamicUrlToDependencies": {
    "/developers": ["dist/stylesheets/show.css"]
  },

  "navigateFallback": "/developers"
}

Web根文件夹的名称不同,它是 - - dashboard -- img -- javascripts -- service-worker.js -- sw-toolbox.js - test.jsp 我认为/开发人员url是存储缓存中的一个条目,但是仍然没有服务工作者为下次刷新提供服务。我已尽力解决这个问题,但我在这里急需一些线索,这里缺少什么。 TIA。 如果需要更多信息,请告诉我。

1 个答案:

答案 0 :(得分:1)

似乎不允许在文件扩展名列表中添加空格。您对webfonts的定义应该是:

"dist/webfonts/**.{ttf,eot,woff}",

我克隆了sw-precache repo并添加了一个单元测试,我将两个生成的文件与两个不同的staticFileGlobs进行了比较,一个用空格,一个没用。

it('should handle multiple file extensions', function(done) {
var config = {
  logger: NOOP,
  staticFileGlobs: [
    'test/data/one/*.{txt,rmd}'
  ],
  stripPrefix: 'test'
};

var configPrime = {
  logger: NOOP,
  staticFileGlobs: [
    'test/data/one/*.{txt, rmd}'
  ],
};

generate(config, function(error, responseString) {
  assert.ifError(error);
  generate(configPrime, function(error, responseStringPrime) {
    assert.ifError(error);
    console.log('responseStringPrime',responseString);
    assert.strictEqual(responseString, responseStringPrime);
    done();
  });
});

});

它失败了。第二个配置不包含.rmd文件:

  -var precacheConfig = [["/data/one/a.rmd","0cc175b9c0f1b6a831c399e269772661"],["/data/one/a.txt","933222b19ff3e7ea5f65517ea1f7d57e"],["/data/one/c.txt","fa1f726044eed39debea9998ab700388"]];

  +var precacheConfig = [["test/data/one/a.txt","933222b19ff3e7ea5f65517ea1f7d57e"],["test/data/one/c.txt","fa1f726044eed39debea9998ab700388"]];