Я понимаю, что этот вопрос может быть в некоторой степени «основанным на мнении», однако я думаю, что обобщенный ответ может очень помочь другим в будущем, которые заинтересованы в получении дополнительных сведений о PWA и Service Workers.
Фон
Я поискал в Интернете и с удивлением не нашел четкого описания того, что лучше всего подходит для выбора файлов, которые должны быть предварительно кэшированы Service Worker для PWA.
Существуют различные статьи / документация, в которых описывается, что делает предварительное кэширование и как оно работает (см. здесь для получения дополнительной информации), но ни в одном из них нет примеров «общепринятой практики».
Вопрос
Какие файлы обычно предварительно кэшируются в стандартном прогрессивном веб-приложении?
Чем я сейчас занимаюсь ...
Чтобы мое приложение работало как можно лучше в автономном режиме, я предварительно кэширую все следующие файлы:
- Шаблон
index.html(мое приложение - Vue SPA) - Все файлы JS (включая JS из динамического импорта)
- Все файлы CSS (есть только один)
- Веб-манифест
- Любые пользовательские шрифты, которые использует приложение.
- Любые требуемые языковые файлы (это динамический, т.е. будет предварительно кэшировать язык только текущего посетителя)
- Все значки приложений (см. Список ниже)
- Все заставки (см. Список ниже)
В моем случае это примерно 2 МБ (вероятно, увеличится после завершения приложения).
Разбивка значков приложений
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon-120x120-precomposed.png
- apple-touch-icon-120x120.png
- apple-touch-icon-180x180-precomposed.png
- apple-touch-icon-180x180.png
- apple-touch-icon-72x72-precomposed.png
- apple-touch-icon-72x72.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
- icon_128x128.png
- icon_144x144.png
- icon_152x152.png
- icon_192x192.png
- icon_384x384.png
- icon_512x512.png
- icon_72x72.png
- icon_96x96.png
- favicon-16x16.png
- favicon-194x194.png
- favicon-32x32.png
- favicon.ico
- mstile-144x144.png
- safari-pinned-tab.svg
Разбивка заставок
- splash-1125x2436.png
- splash-1242x2148.png
- splash-1536x2048.png
- splash-1668x2224.png
- splash-2048x2732.png
- splash-640x1136.png
- splash-750x1294.png
