Как использовать Service Worker с генератором веб-приложений Yeoman? - PullRequest
Новая
       21

Как использовать Service Worker с генератором веб-приложений Yeoman?

0 голосов
/ 27 июня 2018

Структура моего проекта выглядит примерно так: 

.tmp
    scripts
        bundle.js
        bundle.map.js
app
    scripts
        main.js
    styles
        buttons.scss
        grid.scss
        ....
        main.scss
    index.html
    sw.js

Регистрация моего сервисного работника: 

// Register Service Worker
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
    .then(reg => console.log("Registration successful"))
    .catch(() => console.log("Registration failed"));
  }

Я хочу использовать Service Worker для создания автономного веб-приложения, я кэшировал ресурсы и реализовал код для обслуживания их на fetch событиях, но, хотя они не обслуживаются, и я продолжаю получать эту ошибку The FetchEvent for "http://localhost:9000/" resulted in a network error response: the promise was rejected. и failed to fetch. Я использую localhost с gulp serve для dev. Я думаю, что работник службы должен быть размещен где-то еще, например .tmp может быть ?? что ты думаешь?

Мой файл sw.js: 

const staticCache = "staticCache-v1";
const staticAssets = [
  //js
  "browser-sync/browser-sync-client.js?v=2.24.5",
  "index.html",
  "scripts/bundle.js",
  //css
  "styles/main.scss",
  //html
  "index.html",
  //fonts
  "https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2",
  "https://free.currencyconverterapi.com/api/v5/currencies"
];

self.addEventListener("install", event => {
  // Cache static resources
  event.waitUntil(
    caches.open(staticCache).then(cache => cache.addAll(staticAssets))
  );
});

self.addEventListener("activate", event => {
  // clean old SW
});

self.addEventListener("fetch", event => {
  // try placing the sw in .tmp
  console.log("fetch request :", event.request);
  event.respondWith(
    caches.match(event.request).then(cacheResponse => {
      return cacheResponse || fetch(event.request);
    })
  );
});
...