Можете ли вы хранить файлы JavaScript и CSS в localStorage для повышения производительности онлайн-веб-приложения?

Question

Я работаю над веб-приложением, которое во многом похоже на нативное приложение для iOS и Android. Однако файлы Javascript (jQuery + мой) и файл css вместе довольно большие для мобильного использования, что замедляет загрузку приложения, если у пользователя не включен 3G.

Поэтому я начал думать о хранении этих файлов в автономном режиме. Однако, кроме cache.manifest (который, насколько мне известно, срабатывает только при отсутствии подключения к Интернету для использования в автономном режиме), я не нашел пути к этому. В идеале я хотел бы проверить, кэшированы ли файлы / сохранены ли они, а если нет, использовать их, а затем сохранить их в следующий раз.

Возможно ли это? Это значительно уменьшит время загрузки моего приложения, так как сам файл индекса очень мал. Я все еще работаю над уменьшением файлов за счет оптимизации, но в то же время это очень поможет.

EDIT:

Просто, чтобы предоставить немного больше деталей, извините, если я до сих пор не ясно.

Я начал создавать это веб-приложение с использованием шаблона HTML5, и мой файл .htaccess содержит все заголовки файлов JS и CSS с датой истечения срока действия 1 год.

Но, похоже, что при открытии приложения с домашнего экрана iOS файлы .js и .css загружаются каждый раз, как это было в случае, когда они не кэшируются. Открытие веб-сайта на рабочем столе или даже в веб-браузере iOS Safari, похоже, правильно кэширует файлы, поскольку изменения в Javascript и CSS отображаются только после обновления страницы вручную.

Похоже, что открытие, закрытие и открытие веб-приложения на домашнем экране выполняет функцию обновления, поэтому загрузка файлов происходит каждый раз, даже если они хранятся в файле cache.manifest для автономного использования, и файлы ' сроки годности установлены далеко в будущее.

РЕДАКТИРОВАТЬ 2:

Думаю, я бы включил заголовки кеша для файлов. Кажется, все в порядке.

Cache-Control max-age = 31536000, общедоступный
Истекает Пт, 18 мая 2012 17:34:20 GMT
Vary Accept-Encoding, пользователь-агент
Content-Encoding gzip Тайм-аут Keep-Alive = 2, max = 98

Answer 1

Вам следует изучить эту опцию: https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Answer 2

Должна быть возможность заставить браузер кэшировать ресурсы, такие как javascript (хотя в конечном итоге эти директивы могут быть переопределены пользователем, вероятно, не о чем беспокоиться). Смотрите здесь для ускоренного курса по кешированию. В частности см. Заголовок HTTP:

Cache-Control: public

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

Также убедитесь, что ваши javascript-сообщения сведены к минимуму, и см. здесь для общих советов по ускорению.

Answer 3

Я также пытался сделать это без всякой удачи. Кажется, единственный способ сделать это заключается в следующем:

• Используйте AppCache только для изображений
• Поместите все ваши CSS и JS на первой странице
• После того, как все загружено, запустите JS-скрипт, чтобы перетащить каждый из них в localStorage
• Вы можете создавать версии через куки, чтобы убедиться, что у пользователя самые свежие копии

Посмотрите на http://sunpig.com/martin/archives/2011/05/21/considerations-for-caching-resources-in-localstorage.html для идей по реализации!

Я только на полпути, но он уже работает намного лучше, чем в зависимости от appCache.

Редактировать: имейте в виду, что это полезно только для многостраничных приложений. Если вы создаете одностраничное приложение JS, я не думаю, что оно стоит усилий для сохранения в localStorage. С тем же успехом вы можете просто встроить все и сохранить его там для лучшей производительности.

Answer 4

iOS не будет кэшировать ресурсы за пределами 25 КБ.localStorage должен работать.