javascript - 使用gulp更新serviceworker配置

我正在尝试通过尽可能地组合和缩小来最大限度地优化PWA。我的应用程序主要基于服务人员的google tutorial，因此我在服务人员中具有如下代码：

var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

我有一个gulpfile.js，除其他外，在构建过程中还使用gulp-smoosher内联css：

<!-- smoosh -->
<link rel="stylesheet" type="text/css" href="styles/inline.css">
<!-- endsmoosh -->

哪个效果很好-它直接将css内联到HTML中-但是显然我的serviceworker中的filesToCache现在具有一个条目，该条目将不存在于构建中

var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css' // <!--- this shouldn't be here in the build
];

有没有其他选择，可以使用gulp任务或其他方式（也许可以在构建时对其进行某种形式的配置更新）来解决此问题？

最佳答案

最后，通过进行以下更改来解决此问题。


将filesToCache变量移至其自己的json文件-filesToCache.json
更新我的服务人员以在install期间加载该文件
使用gulp-json-editor操纵构建文件。




gulpfile中的代码

const jsonEditor = require('gulp-json-editor');

// snip

gulp.task("filesToCache", function(){
  var out = folder.build;
  return gulp.src(folder.src + "filesToCache.json")
              .pipe(jsonEditor(function(json){
                json.splice(json.indexOf("/styles/inline.css"),1);
                return json;
              }))
              .pipe(gulp.dest(out));
});

服务人员中的代码

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return fetch("/filesToCache.json").then(function(response){
        if(response && response.ok){
          return response.json()
        }
        throw new Error("Failed to load files to cache for app shell")
      })
      .then(function(filesToCache){
        console.log('[ServiceWorker] Caching app shell', filesToCache);
        return cache.addAll(filesToCache);
      })
      .catch(function(error){
        console.error(error)
      })
    })
  );
});

希望这对以后的人有所帮助！

关于javascript - 使用gulp更新serviceworker配置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45978907/