Блог

Мой сервисный работник не кэширует мои статические ресурсы.

При подключении к сети, использовании Chrome DevTools, похоже, что ServiceWorker работает. Я вижу строки для styles.xxx.css, runtime.xxx.js, polyfills.xxx.js и main.xxx.js с размером, указанным как «от Service Worker». Затем в последующих строках эти же файлы перечислены с размером «из дискового кэша».

На вкладке приложения Chrome DevTools в разделе «Хранилище кэша» у меня есть следующие строки:

ngsw:db:control — http://127.0.0.1:8080

ngsw:xxx:активы: приложение: кэш — http://127.0.0.1:8080

ngsw:xxx:ресурсы: приложение: мета-http://127.0.0.1:8080

Нажатие на последние две строки ни к чему не приводит в разделе «Путь» DevTools.

В ngws-worker.js имеет статус «активирован и запущен». Сообщение было «Получено 31.12.1969», что странно.

Затем, когда я перехожу в автономный режим, работники службы не отображаются. И хранилище кэша пусто.В последней сетевой строке указано, что ngsw.json?ngsw-cache-bust= состояние xxx (сбой) Введите инициатор выборки ngsw-worker.js:2662.

Мои скрипты package.json (которые я скопировал из AngularFirebasePro) являются

 "webpack:prerender": "webpack --config webpack.prerender.config.js",
"build:prerender": "node dist/abogado/prerender.js",
"serve:prerender": "http-server dist/abogado -o",
"build:all": "ng build --prod amp;amp; ng run abogado:server amp;amp; npm run 
webpack:prerender amp;amp; npm run build:prerender"
  

В angular.json у меня есть

 "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/abogado-server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }
      }
    }
  

мой файл ngsw-config.json

 {
 "index": "/index.html",
 "assetGroups": [{
   "name": "app",
   "installMode": "prefetch",
   "resources": {
     "files": [
       "/index.html"
     ],
     "versionedFiles": [
       "/*.bundle.css",
       "/*.bundle.js",
       "/*.chunk.js"
     ]
  }
 }, {
   "name": "assets",
   "installMode": "lazy",
   "updateMode": "prefetch",
   "resources": {
     "files": [
       "/assets/**"
     ]
   }
 }]
  

}

Как только я создаю свое приложение, моя папка dist действительно содержит ngsw.json и ngws-worker.js.

Я не знаю NodeJS. Во-первых, я хотел бы знать, возможно ли кэширование статических ресурсов в Angular Universal. Во-вторых, как вы думаете, что не так с моим кодом? Спасибо : )

РЕДАКТИРОВАТЬ: добавление содержимого файла main.ts.

 if (environment.production) {
  enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(() => {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/ngsw-worker.js') ;
      }
    })
  .catch(err => console.error(err));
});
  

В зависимости от используемой версии Angular, это, скорее всего, связано с этой ошибкой:

https://github.com/angular/angular/issues/20360

На этой странице проблемы опубликовано множество обходных путей. Если вы не можете заставить их работать, следующая (очень хорошая) альтернатива — перенести ваше приложение в Angular Universal PWA Starter project.

Последняя альтернатива — использовать Workbox CLI напрямую. Это то, что используется в проекте PWA Starter.

Надеюсь, это полезно.