Question

我试图通过尽可能多地组合和缩小来优化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中 - 但很明显，我的服务工作者中的filesToCache现在有一个在构建中不存在的条目

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

是否有任何选项，使用gulp任务或其他（可能是某种配置，可以在构建时更新）来解决此问题？

Answer 1

我最后通过进行以下更改来解决这个问题。

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

希望这有助于将来的某个人！

使用gulp更新serviceworker配置

1 个答案: