#jquery #ios #local-storage #offline #web-applications
#jquery #iOS #локальное хранилище #Не в сети #веб-приложения
Вопрос:
Я работаю над веб-приложением, которое действует почти как нативное приложение как для iOS, так и для Android. Однако файлы Javascript (jQuery мой собственный) и файл css вместе взятые довольно велики для мобильного использования, что замедляет загрузку приложения, если у пользователя не включен 3G.
Поэтому я начал подумывать о хранении этих файлов в автономном режиме. Однако, помимо cache.manifest (который, насколько мне известно, запускается только при отсутствии подключения к Интернету для включения автономного использования) Я не нашел никакого способа для этого. Что я в идеале хотел бы иметь, так это проверить, кэшированы ли файлы уже / сохранены, и если нет, использовать их, а затем сохранить в следующий раз.
Возможно ли это? Это значительно сократило бы время загрузки моего приложения, так как сам индексный файл очень мал. Я все еще работаю над уменьшением размера файлов путем оптимизации, но пока это очень помогло бы.
Редактировать:
Просто чтобы предоставить немного больше деталей, извините, если я был неясен раньше.
Я начал создавать это веб-приложение, используя шаблон HTML5, и мой файл .htaccess содержит все заголовки файлов JS и CSS со сроком действия 1 год.
Но, похоже, при открытии приложения с главного экрана iOS файлы .js и .css загружаются каждый раз, как это было в случае, когда они не кэшировались. Похоже, что при открытии веб-сайта на рабочем столе или даже в веб-браузере Safari iOS файлы кэшируются правильным образом, поскольку изменения в Javascript и CSS отображаются только после ручного обновления страницы.
Кажется, что открытие и закрытие веб-приложения с главного экрана действует как обновление, поэтому файлы загружаются каждый раз, даже если они хранятся в cache.manifest для автономного использования, а даты истечения срока действия файлов установлены в далеком будущем.
ПРАВКА 2:
Подумал, что стоит включить заголовки кэша для файлов. Кажется, с ними все в порядке.
Максимальный возраст элемента управления кэшем = 31536000, общедоступный
Истекает Пт, 18 мая 2012 г. 17:34:20 GMT
Изменить кодировку Accept-,User-Agent
Content-Encoding gzip Keep-Alive тайм-аут = 2, макс = 98
Комментарии:
1. Вам все равно нужно перенести файлы один раз. Разве это не помогает установить правильные заголовки кэша на далекое будущее и заставить сервер правильно реагировать на запросы?
2. Кажется плохой дизайнерской идеей избыточно хранить копии файлов, которые могут быть кэшированы браузером, также в хранилище — не очень СУХО.
3. Если это возможно с помощью javascript, я мог бы настроить его так, чтобы это работало только при открытии приложения с главного экрана. Кэширование в этом случае, похоже, не работает, поэтому мне нужно решение с моей стороны, поскольку я хочу ускорить начальную загрузку для моих пользователей.
4. @kennebec: конечно, но из того, что говорит Маркус, похоже, что браузер не кэширует эти файлы. В идеале, конечно, это было бы так, но, за исключением получения работы в Apple / Google, Маркус мало что может с этим поделать.
Ответ №1:
Тогда вам следует изучить этот вариант: https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html
Ответ №2:
Должна быть возможность заставить браузер кэшировать ресурсы, такие как javascript includes (хотя в конечном итоге эти директивы могут быть переопределены пользователем, вероятно, не о чем беспокоиться). Смотрите здесь ускоренный курс по кэшированию. В частности, смотрите заголовок HTTP:
Cache-Control: public
что должно заставить браузер кэшировать ресурс. Не уверен, работает ли это в разных сеансах, например, если браузер закрывается и снова открывается, но по крайней мере только один запрос будет сделан при первом посещении пользователем вашего сайта и не будет повторно запрошен при последующих просмотрах страницы.
Также убедитесь, что ваши javascript-включения сведены к минимуму, и смотрите здесь общие советы по ускорению работы.
Комментарии:
1. Мобильные браузеры могут быть немного скупы на кэширование по сравнению с настольными браузерами. Я думаю, что оригинальное мобильное Safari для iPhone не кэшировало бы, например, файлы размером более 20 КБ в несжатом виде.
2. Я собираюсь это прочитать, спасибо. Однако я создал веб-приложение таким образом, что загружается только страница индекса, все остальное выполняется с помощью вызовов jQuery и AJAX без каких-либо последующих страниц. т.Е. Вызов AJAX, который загружает данные профиля пользователя и отображает их. Проблема заключается в первой начальной загрузке. Через 3G и Wi-Fi страница загружается относительно быстро (все еще хочется, чтобы это было быстрее, но в основном это нужно сделать путем оптимизации), но без этого происходит медленно. Я также предлагаю сохранить приложение на рабочем столе, поэтому это кэширование должно работать так же, как localstorage работает для хранения логинов пользователей.
3. @MarcusJoe: Я не понимаю. Не имеет значения, как запрашиваются статические ресурсы, если это один и тот же ресурс, его можно кэшировать. С другой стороны, динамические данные должны загружаться с сервера. Никакая стратегия кэширования здесь вам не поможет.
4. Извините, я нажал enter, чтобы ускорить. Извините, если это звучит запутанно. Я хочу кэшировать только статические файлы js и css. Все последующие вызовы AJAX, конечно, динамические и не могут / не будут кэшироваться. Речь идет о начальной загрузке файлов js и css, когда они загружаются как в веб-браузер, так и на главный экран.
5. @MarcusJoe: ну, хорошо. Ваши ресурсы должны быть загружены хотя бы один раз, какой бы ни была стратегия кэширования. Управление кэшем должно помочь.
Ответ №3:
iOS не будет кэшировать ресурсы, превышающие 25 кб. localStorage должен работать.
Ответ №4:
Я также пытался сделать это, но безуспешно. Кажется, единственный способ сделать это заключается в следующем:
- Используйте AppCache только для изображений
- Разместите все ваши CSS и JS на первой странице
- Как только все загружено, запустите JS-скрипт для переноса каждого из сценариев в localStorage
- Вы можете изменять их с помощью файлов cookie, чтобы убедиться, что у пользователя есть самые современные копии
Взгляните на http://sunpig.com/martin/archives/2011/05/21/considerations-for-caching-resources-in-localstorage.html за идеи по реализации!
Я только на полпути, но это уже работает намного лучше, чем зависеть от AppCache.
Редактировать: Имейте в виду, что это полезно только для многостраничных приложений. Если вы создаете одностраничное JS-приложение, я не думаю, что его стоит хранить обратно в localStorage. С таким же успехом вы могли бы просто встроить все и сохранить там для достижения наилучшей производительности.