Angular сервисный работник предварительно загружает видеофайл - PullRequest
Новая
       49

Angular сервисный работник предварительно загружает видеофайл

0 голосов
/ 09 июля 2020

Когда на страницу встроено видео, сервис-воркер предварительно выбирает всего видео, что вызывает проблемы с производительностью. В моем ngsw-config. json есть только конфигурации для локальных файлов, но видео находится на другом субдомене в / sites / default / files / video / структура папок .

Как я могу исключить все запросы файлов из предварительной выборки? Я хочу предварительно получить только файлы / URL-адреса, описанные в моем ngsw-config. json. 

<video width="320" height="240" controls>
  <source src="https://some.external.url.com/sites/default/files/video/video.mp4" type="video/mp4">
</video>

ngsw-config. json 

  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/icon?family=Material+Icons",
          "https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Ответы [ 2 ]

1 голос
/ 27 июля 2020

Я мог бы решить эту проблему, расширив стандартный файл ngsw-worker. js.

  1. Я скопировал ngws-worker.js из сборки в проект src папку
  2. Переименовал его в custom-ngsw-worker.js
  3. Добавил соответствие регулярному выражению .mp4 в onFetch(event) метод
  4. Добавил этот. js файл в angular.json активы
  5. Зарегистрировал в app.module.ts вместо исходного ngsw-worker.js

app.module.ts 

imports: [
...
ServiceWorkerModule.register('custom-ngsw-worker.js', { enabled: true, registrationStrategy: 'registerImmediately' }),
...
]

custom-ngsw-worker. js

onFetch(event) {

...

// Skip video files
if (req.url.match('^.*(\.mp4).*$')
) {
  return;
}

...

Таким образом он игнорирует все файлы .mp4 и не кэширует их. Если есть лучшее решение, дайте мне знать.

0 голосов
/ 26 июля 2020

Вы можете установить "ленивый" режим установки для этого внешнего URL.

...