Сервисный работник: кэширование междоменного ответа со всеми активами stati c

Question

В настоящее время я работаю над доказательством концепции проекта, но я просто не могу разобраться

1. документация
2. и реализация:)

Дело выглядит следующим образом:

У меня есть основное приложение (React), в котором есть список ссылок. Все они ссылаются на конкретную страницу c. Эти ссылки открываются в iframe. Вот и все.

Итак, мое приложение работает на «app.domain.com», а URL-адреса форм похожи на «pages.domain.com/pages/pageA.html» et c. Что мне нужно сделать в этом po c, так это сделать эти страницы доступными офлайн, включая (!) Ресурсы для этих страниц (css / js / img)

Я уже создал простого сервис-воркера.

const CACHE_NAME = "poc-forms";

self.addEventListener("install", (event) => {
  console.log("sw installing…");
});

self.addEventListener("activate", (event) => {
  console.log("sw now ready to handle fetches");
  event.waitUntil(caches.open(CACHE_NAME).then(() => self.clients.claim()));
});

self.addEventListener("fetch", (event) => {
  const url = new URL(event.request.url);

  if (url.pathname.includes("forms")) {
    event.respondWith(
      (async function () {
        var cache = await caches.open(CACHE_NAME);
        var cachedFiles = await cache.match(event.request);
        if (cachedFiles) {
          return cachedFiles;
        } else {
          try {
            var response = await fetch(event.request);
            await cache.put(event.request, response.clone());
            return response;
          } catch (e) {
            console.log(" something when wrong!");
          }
        }
      })()
    );
  }
});

Он получает запрос и проверяет, есть он уже в кеше или нет. Если это не так, кешируйте его. Это работает.

Но где я застрял:

1. как я могу также сохранить css и js, которые также необходимы для страниц? Мне нужно найти способ получить все ссылки и l oop поверх них, получить их и сохранить?
2. Я слышал о Google Workbox, также просмотрел документацию, но мне это просто непонятно, например как преобразовать мой текущий SW во что-то, что работает с рабочим ящиком, со всем файлом registerRoute при извлечении ...
3. рабочий сервис будет захватывать выборки только при обновлении страницы. Клиенты.claim () должны исправить это, но на самом деле это не так ...

Если кто-то может мне с этим помочь, очень признателен!

спасибо,

Марио

Answer 1

Хорошо, в итоге мы использовали другой подход, потому что приложение, которое мы загружаем внутри iframe, очевидно, предоставило api, к которому мы можем подключиться.

Чтобы кешировать всю страницу со всеми активами, это был код, который сработал для меня:

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
);

const { skipWaiting, clientsClaim } = workbox.core;
const { registerRoute } = workbox.routing;
const { StaleWhileRevalidate } = workbox.strategies;

skipWaiting();
clientsClaim();


registerRoute(
  ({ request }) => {
    console.log(" request ", request.destination);
    return (
request.destination === "iframe" ||
      request.destination === "document" ||
      request.destination === "image" ||
      request.destination === "script" ||
      request.destination === "style" ||
      request.destination === "font"
    );
  },
  new StaleWhileRevalidate()
);

Answer 2

Кроме того, это может помочь другим, небольшой вариант того, что я хочу выполнить sh:

Почему моя автономная страница кэшированного поддомена не загружается при вызове из другого поддомена?

Answer 3

API-интерфейсы Service Worker не позволяют сервис-воркеру, зарегистрированному на app.domain.com, управлять запросами навигации или запросами субресурсов, связанными с <iframe>, который размещен на pages.domain.com. Это не то, с чем может помочь Workbox - это просто невозможно.

С точки зрения сервис-воркера, <iframe> с источником, отличным от исходной страницы, эквивалентен новому окну или вкладке с разное происхождение. Сервисный работник не может "видеть" или контролировать это.