2017-06-02 15 views
0

我是新手服务工作者的概念,所以原谅我,如果我从文档俯瞰的东西。我有一个角色应用程序已经在生产中运行,我正在尝试使用sw-precache引入服务工作人员。 首先我想预先缓存所有图像/字体和几个js文件,看它是否正常工作,所以我预缓存的配置是这样的 -sw-precache与angularJs应用程序不缓存

{ 
    "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哈希显示所有URL。 storage cache

但是当我加载应用程序并查看网络选项卡的所有静态内容仍然从内存/磁盘提供服务,而不是服务人员,我无法调试为什么会这样。我失去了一些东西在这里 -

network tab

UPDATE: 更多信息:我有错误配置,因为我有动态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 我请将/ developers url作为存储缓存中的条目,但仍未从服务工作人员处进行下次刷新。我尝试了所有的精力来解决这个问题,但是我非常需要一些线索,这里缺少什么。 TIA。 让我知道是否需要更多信息。

回答

1

看来您的文件扩展名列表中的空格是不允许的。您的网络字体的定义应该是:

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

我克隆了SW-预缓存回购,并增加了单元测试,我比较两个不同势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"]]; 
+0

感谢@ STEF-驱逐舰,这是错误之一。我更新了我的问题,通过删除所有静态但现在只保留show.css,我只想让我的应用程序外壳缓存先工作,并进一步改进应用程序。尽管我在存储缓存中看到了url条目,但我无法缓存我的appshell。 – pankajmi