У меня есть базовый c CRUD REST API и базовый c Vue внешний интерфейс. Допустим, у меня есть конечная точка API /users, возвращающая всех пользователей, и URL страницы внешнего интерфейса /users, показывающий список этих выбранных пользователей.
Я хочу предоставить автономную функциональность и добавил поддержку PWA для моего Vue приложение через настройку CLI.
Насколько я понял, PWA их сервисный работник является экземпляром между клиентом и сервером. Клиент отправляет запрос сервисному работнику, и он решает, сделать ли новый вызов API или вернуть ранее кэшированные данные.
Таким образом, моя страница пользователей может получить список пользователей в хуке mounted. Без поддержки PWA я также мог бы хранить пользователей в хранилище Vuex по всему миру, чтобы получать к ним доступ и с других страниц.
Мне приходит в голову несколько вопросов:
- Когда загружать кэшированные данные и когда сделать новый запрос API? Является ли inte rnet подключение единственным критерием? (Как указано здесь https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures#caching_strategies_supported_by_sw -toolbox )
- Как работать с кэшированными данными, если данные в реальном времени изменились и запросы в очереди ответили бы с несколькими ошибками.
- Кэш-память ограничена браузерами и ОС устройства. Допустим, iOS ограничивает объем памяти до 50 МБ, как с этим справиться? Некоторые документы с некоторыми изображениями могут легко пройти ограничение. Так что мне нужно решить, что кэшировать, а что нет?
Я видел пример кэширования во время выполнения
{urlpattern: 'api url', обработчик: 'eg networkfirst' , параметры}
но нужно ли жестко кодировать такие кэширования в конфигурации сервисного работника? Многие конечные точки API могут стать довольно беспорядочными.
Было бы замечательно, если бы кто-то мог объяснить, как работают PWA и как с ними бороться. Что нужно сделать для приложения Vue, как хранить большие объемы данных и как справляться с ошибками.