Workbox перенаправляет страницу клиентов, когда ресурс не кэшируется и находится в автономном режиме - PullRequest
Новая
       43

Workbox перенаправляет страницу клиентов, когда ресурс не кэшируется и находится в автономном режиме

0 голосов
/ 07 октября 2019

Обычно всякий раз, когда я читаю сообщение в блоге о PWA, учебное пособие, кажется, просто предварительно кеширует каждый отдельный ресурс. Но это, кажется, идет вразрез с шаблоном оболочки приложения, который, как я понимаю, заключается в следующем: кешируйте все необходимое (только оболочка приложения) и кеш-память во время работы. (Пожалуйста, исправьте меня, если я понял это неправильно)

Представьте, что у меня есть это одностраничное приложение, это простой index.html с веб-компонентом: <my-app>. Этот компонент <my-app> устанавливает некоторые маршруты, которые выглядят примерно так: я использую маршрутизатор Vaadin и веб-компоненты, но я думаю, что проблема будет та же, если использовать React с React Router или что-то подобное. 

router.setRoutes([
    {
        path: '/',
        component: 'app-main', // statically loaded
    },
    {
    path: '/posts',
        component: 'app-posts',
        action: () => { import('./app-posts.js');} // dynamically loaded
    },
    /* many, many, many more routes */
    {
        path: '/offline', // redirect here when a resource is not cached and failed to get from network
        component: 'app-offline', // also statically loaded
    }
]);

Мое приложение может иметь множество маршрутов и может стать очень большим. Я не хочу сразу кешировать все эти ресурсы, а только кеширую то, что мне абсолютно необходимо, поэтому в этом случае: мои index.html, my-app.js, app-main.js и app-offline.js. Я хочу кэшировать app-posts.js во время выполнения, когда это требуется.

Настройка кэширования во время выполнения достаточно проста, но моя проблема возникает, когда мой пользователь посещает один из потенциально многих маршрутов, которые еще не кэшированы (потому чтовозможно, пользователь ранее не посещал этот маршрут, поэтому файл js, возможно, еще не загружен / не кэширован), и у пользователя нет подключения к Интернету.

Что я хочу, чтобы произошло в этом случае (когда маршрут еще не кэширован и сети нет), пользователь перенаправляется на маршрут /offline, который обрабатывается моим клиентским маршрутизатором. Я мог бы легко сделать что-то вроде: import('./app-posts.js').catch(() => /* redirect user to /offline */), но мне интересно, есть ли способ добиться этого с самого рабочего ящика.

Итак, в двух словах: когда файл js не был кэшированпока, и у пользователя нет сети, и поэтому запрос файла не выполняется: пусть рабочий ящик перенаправляет страницу на маршрут /offline.

1 Ответ

1 голос
/ 09 октября 2019

Вариант 1 (не всегда полезен): Насколько я вижу и согласно этому ответу , вы не можете открыть новое окно или изменить URL-адрес браузера изнутриработник службы. Однако вы можете открыть новое окно только , если функция clients.openWindow() вызывается из события notificationclick.

Вариант 2 (самое сложное): Вы можете использовать метод WindowClient.navigate в событии activate работника службы, однако это немного сложнее, поскольку вам все еще нужно проверить, существует ли запрошенный файл в кэше или нет.

Вариант 3 (самый простой и хакерский): В противном случае вы можете ответить новым Request объектом на автономную страницу: 

const cacheOnly = new workbox.strategies.CacheOnly();
const networkFirst = new workbox.strategies.NetworkFirst();

workbox.routing.registerRoute(
  /\/posts.|\/articles/, 
  async args => {
    const offlineRequest = new Request('/offline.html');

    try {
      const response = await networkFirst.handle(args);
      return response || await cacheOnly.handle({request: offlineRequest});

    } catch (error) {
      return await cacheOnly.handle({request: offlineRequest})

    }
  }
);

, а затем переписатьURL браузера в вашем offline.html файле: 

 <head>
    <script>
        window.history.replaceState({}, 'You are offline', '/offline');
    </script>
 </head>

Приведенная выше логика в Option 3 будет сначала отвечать на запрошенный URL, используя сеть в первую очередь. Если сеть недоступна, произойдет откат к кешу, и даже если запрос не найден в кеше, вместо этого будет извлечен файл offline.html. После анализа файла offline.html URL-адрес браузера будет заменен на /offline.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...