sw-precache with angularJs application not caching

Question

I am newbie to service worker concept so forgive me if I am overlooking something from documentation. I have an angular application already running in production and I am trying to introduce service worker using sw-precache. To start with I am trying to precache all images/fonts and couple of js files and see if it works, so my precache config is like this -

{
  "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"
  ]
}

Now I can see service worker registered and installed properly and cache storage shows all the urls with _sw-precache hashes.

But when I load the application and see in network tab all static content are still served from memory/disk, not from service worker and I am unable to debug why is it so. Am I missing something here -

UPDATE: More information: I had wrong configurations since I have dynamic url and server side rendered html. Server side it's test.jsp which is giving me initial shell. For now I have removed all other static files from cache and kept only show.css

So update config now is -

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

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

  "navigateFallback": "/developers"
}

Web root folder is named differently and it is - - dashboard -- img -- javascripts -- service-worker.js -- sw-toolbox.js - test.jsp And I see /developers url as an entry in storage cache, but still it's not served from service worker for next refresh. I have tried all my energy to fix this, but I desperately need some clue here, what's missing in here. TIA. Let me know if need more info.

Stef Chäser · Accepted Answer · 2017-06-05 11:45:21Z

It seems that whitespaces in your file extension list are not allowed. Your definition for webfonts should be:

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

I cloned the sw-precache repo and added a unit test where I compared two generated files with two diffrent staticFileGlobs, one with whitespace and one without.

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();
  });
});

});

and it failed. The second config didn't include the .rmd file:

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

versus

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

thanks @stef-chäser, this is one of the mistakes. I have updated my question by removing all static but keeping only show.css for now, I just want to make my app-shell cache working first and further improve the app. I am unable to cache my appshell though I see url entry in storage cache.

Collectives™ on Stack Overflow

sw-precache with angularJs application not caching

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related