Учитывая всю эту работу, которую мы проделываем за пределами window , вы можете подумать, что доступ к экземплярам Cache возможен только в области Service Worker. Дело в том, что вы можете получить доступ к экземплярам Cache как в области Service Worker , так и в традиционном коде вашего веб-приложения, работающем в window . Это упрощает пользователю непосредственное взаимодействие с кэшем сервисного работника или обновление пользовательского интерфейса на основе состояния кэша.
Одним из потенциальных вариантов использования является предложение функции «сохранить для оффлайн» для страниц, которые пользователь может захотеть прочитать позже, но знайте, что в это время они могут быть офлайн. Ниже показано, как это сделать с помощью Workbox.
В приведенном выше внедрении вы можете видеть, что скрипт app.js записывает в автономный кеш из контекста window при нажатии кнопки «Сохранить для автономного режима». В сервис-воркере статические ресурсы страницы предварительно кэшируются для автономного доступа. Стратегия NetworkOnly используется со специальным обработчиком, который управляет автономным доступом к кэшированным страницам, и передается в NavigationRoute .
Чтобы проверить функциональность вставки Glitch, выполните следующие действия:
- Откройте новое окно браузера и перейдите по адресу https://save-for-offline-test.glitch.me/.
- Нажмите кнопку с надписью «Добавить в список для автономного чтения ».
- Откройте инструменты разработчика вашего браузера в Firefox или Chrome. Если вы используете Chrome, перейдите на панель приложений. В Firefox перейдите на панель хранилища.
- В инструментах разработчика любого браузера вы увидите элемент «Хранилище кэша» на левой панели. Нажмите, чтобы развернуть его. В записи автономного кэша вы должны увидеть URL-адрес страницы, которую вы только что добавили, на правой панели.
- Нажмите на любую другую ссылку на страницу внизу страницы.
- Переключите автономный режим в любом браузере, чтобы имитировать автономное соединение.
- Нажмите на ссылку страницы, которую вы добавили в автономный кэш. Оно должно появиться, даже если вы не в сети.
- Нажмите ссылку на страницу, которую вы не добавили в автономный кэш. Запрос не будет выполнен.
Это не единственный вариант использования экземпляров Cache в window . Например, вы можете прогнозировать предварительную выборку и кэшировать ресурсы, которые, как вы знаете, понадобятся пользователю для выполнения определенного действия. Это позволит уменьшить или избежать задержки при загрузке этих ресурсов по требованию.
Существуют и другие потенциально полезные варианты использования, и, поскольку вы можете взаимодействовать с экземплярами Cache в отсутствие сервис-воркера, не для всех из них может потребоваться его установка.
Учитывая всю эту работу, которую мы проделываем за пределами window , вы можете подумать, что доступ к экземплярам Cache возможен только в области Service Worker. Дело в том, что вы можете получить доступ к экземплярам Cache как в области Service Worker , так и в традиционном коде вашего веб-приложения, работающем в window . Это упрощает пользователю непосредственное взаимодействие с кэшем сервисного работника или обновление пользовательского интерфейса на основе состояния кэша.
Одним из потенциальных вариантов использования является предложение функции «сохранить для оффлайн» для страниц, которые пользователь может захотеть прочитать позже, но знайте, что в это время они могут быть офлайн. Ниже показано, как это сделать с помощью Workbox.
В приведенном выше внедрении вы можете видеть, что скрипт app.js записывает в автономный кеш из контекста window при нажатии кнопки «Сохранить для автономного режима». В сервис-воркере статические ресурсы страницы предварительно кэшируются для автономного доступа. Стратегия NetworkOnly используется со специальным обработчиком, который управляет автономным доступом к кэшированным страницам, и передается в NavigationRoute .
Чтобы проверить функциональность вставки Glitch, выполните следующие действия:
- Откройте новое окно браузера и перейдите по адресу https://save-for-offline-test.glitch.me/.
- Нажмите кнопку с надписью «Добавить в список для автономного чтения ».
- Откройте инструменты разработчика вашего браузера в Firefox или Chrome. Если вы используете Chrome, перейдите на панель приложений. В Firefox перейдите на панель хранилища.
- В инструментах разработчика любого браузера вы увидите элемент «Хранилище кэша» на левой панели. Нажмите, чтобы развернуть его. В записи автономного кэша вы должны увидеть URL-адрес страницы, которую вы только что добавили, на правой панели.
- Нажмите на любую другую ссылку на страницу внизу страницы.
- Переключите автономный режим в любом браузере, чтобы имитировать автономное соединение.
- Нажмите на ссылку страницы, которую вы добавили в автономный кэш. Оно должно появиться, даже если вы не в сети.
- Нажмите ссылку на страницу, которую вы не добавили в автономный кэш. Запрос не будет выполнен.
Это не единственный вариант использования экземпляров Cache в window . Например, вы можете прогнозировать предварительную выборку и кэшировать ресурсы, которые, как вы знаете, понадобятся пользователю для выполнения определенного действия. Это позволит уменьшить или избежать задержки при загрузке этих ресурсов по требованию.
Существуют и другие потенциально полезные варианты использования, и, поскольку вы можете взаимодействовать с экземплярами Cache в отсутствие сервис-воркера, не для всех из них может потребоваться его установка.