服务工作者：不会缓存远程文件

Question

I am trying to cache static as well as remote files in my progressive web app.

The static files do get cached, but the remote file's aren't.

browser caching of static & remote files

Here's the code:

self.addEventListener( 'install', e => {
    e.waitUntil(
        caches.open( 'offline' )
        .then( cache => cache.addAll([
            '/',
            'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
            'https://code.jquery.com/jquery-3.2.1.js',
            'scripts/firebase.js',
            'scripts/localForage.js',
            'old-index.html',
            'scripts/main.js',
        ]))
    );
});

Thanks in advance

Here's the updated code

var filesToCache = [
    '.',
    "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css",
    'https://code.jquery.com/jquery-3.2.1.js',
    'scripts/firebase.js',
    'scripts/localForage.js',
    'cce.html',
    'scripts/main.js',
    'scripts/secondary.js',
    'https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css'
];

var staticCacheName = 'pages-cache-v1';

self.addEventListener('install', function(event) {
  console.log('Attempting to install service worker and cache static assets');
  event.waitUntil(
    caches.open(staticCacheName)
    .then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

Answer 1

I guess you are not using the same format as in this documentation . Here's a sample code from this thread :

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('airhorner').then(function(cache) {
      return cache.addAll([
        'https://paul.kinlan.me/'
      ]);
    })
  );
});