Как мне использовать сервисных работников в посылке?

Question

У меня есть работник службы, который приходит из моего js/index.js:

import '../scss/app.scss';
// Detect if service workers enabled
if ('serviceWorker' in navigator) {
  try {
    navigator.serviceWorker.register('../sw.js');
    console.log('Service Worker Registered');
  } catch (error) {
    console.log('Service Worker Register Failed');
  }
}

и мой sw.js в моем корневом каталоге:

const staticAssets = ['./', 'scss/app.scss', 'js/index.js'];
self.addEventListener('install', async (event) => {
  const cache = await caches.open('min-static');
  cache.addAll(staticAssets);
});
self.addEventListener('fetch', (event) => {
  console.log('fetch');
});

Бабелизируется и помещается в папку dist посылкой. Когда он собран и я перехожу на localhost, я открываю инструменты Chrome и перехожу на вкладку приложения. Я захожу во вкладку кеша и: В чем дело? Почему мой веб-сайт не кэшируется так, как в PWA Tutorial ? Разве это не должно выглядеть так: ? Конечно, я запускаю все через babel, но почему это не работает?

Заранее спасибо!

Answer 1

Ошибка regeneratorRuntime is not defined возникает из-за того, что Babel (используемый Parcel для передачи кода) генерирует полифилл для генераторов ES6 в вашей сборке.Чтобы отключить это (и исправить вашу проблему), вам нужно указать, что генераторы не нужно переносить.

Простое исправление

Простой способ исправить это - добавить следующеестрок в ваш package.json:

"browserslist": [
  "since 2017-06"
],

Это делает так, что ваша сборка будет пытаться поддерживать только версии браузера, выпущенные с 2017-06, которые поддерживают генераторы ES6 и, следовательно, не нуждаются в полизаполнениях для этой функции.

Альтернативы

Возможно, вы захотите поэкспериментировать с этими значениями в зависимости от целевой аудитории вашего приложения, например, это также должно работать:

"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

Дополнительная информация

Если вы хотите проверить, какие функции поддерживаются каждым браузером, вы можете проверить здесь .

И если вы хотите проверить, какие опции действительны для browserslint, проверьте здесь .

Существует также больше дискуссий, касающихся вашей конкретной проблемы здесь .

Answer 2

Я довольно новичок в Parcel и столкнулся с той же проблемой.

После нескольких часов поиска в Интернете, и я думаю, что это может быть как-то связано с этой проблемой parcel-bundler /посылка № 301: support Поддержка PWA

Хотя есть 2 плагинов и 1 обсуждение , которые обещают решить эту проблему.В настоящее время я не вижу идеального решения.

Если вы обнаружили какое-то новое открытие, пожалуйста, сообщите нам.