- Вступление
- Файл манифеста кэша
- Ссылка на файл манифеста
- Структура файла манифеста
- Обновление кеша
- Статус кэша
- События AppCache
Вступление
Для веб-приложений становится все более важным быть доступным в автономном режиме. Да, все браузеры могут кэшировать страницы и ресурсы в течение длительных периодов времени, если это предписано, но браузер может в любой момент выгружать отдельные элементы из кэша, чтобы освободить место для других вещей. HTML5 устраняет некоторые неудобства, связанные с отсутствием ApplicationCache интерфейс.
Использование интерфейса кеша дает вашему приложению три преимущества:
- Автономный просмотр - пользователи могут перемещаться по всему сайту в автономном режиме
- Скорость - ресурсы поступают прямо с диска, без подключения к сети.
- Отказоустойчивость - если ваш сайт отключен для «обслуживания» (например, кто-то случайно все сломает), ваши пользователи получат возможность работы в автономном режиме
Кэш приложений (или AppCache) позволяет разработчику указать, какие файлы браузер должен кэшировать и сделать доступными для автономных пользователей. Ваше приложение будет загружаться и работать правильно, даже если пользователь нажимает кнопку обновления, пока он не в сети.
Файл манифеста кэша
Файл манифеста кэша - это простой текстовый файл, в котором перечислены ресурсы, которые браузер должен кэшировать для автономного доступа.
Ссылка на файл манифеста
Чтобы включить кэш приложения для приложения, включите атрибут manifest в тег html документа:
<html manifest = "example.appcache"> ... </ html>
Атрибут manifest должен быть включен на каждую страницу вашего веб-приложения, которую вы хотите кэшировать. Браузер не кэширует страницу, если он не содержит атрибут манифеста (если только он явно не указан в самом файле манифеста. Это означает, что любая страница, на которую пользователь переходит, содержит манифест, будет неявно добавлена в кэш приложения. Таким образом, нет необходимости перечислять каждую страницу в манифесте. Если страница указывает на манифест, нет способа предотвратить кэширование этой страницы.
Примечание: "/ page-url /", "/ page-url /? Что-то", "/ page-url /? Что-то еще" считаются отдельными страницами. Если они ссылаются на манифест, все они будут неявно кэшироваться отдельно. Из-за этого и другие ошибки AppCache лучше всего использовать в приложениях с одним URL.
Вы можете увидеть URL, которые контролируются кешем приложения, посетив chrome: // appcache-internals / в Chrome. Отсюда вы можете очистить кеши и просмотреть записи. Есть аналогичные инструменты разработчика в Firefox.
Атрибут манифеста может указывать на абсолютный URL или относительный путь, но абсолютный URL должен находиться в том же источнике, что и веб-приложение. Файл манифеста может иметь любое расширение файла, но должен быть указан с правильным типом mime (см. Ниже).
<html manifest = "http://www.example.com/example.mf"> ... </ html>
Файл манифеста должен быть представлен с помощью mime-типа text / cache-manifest. Возможно, вам потребуется добавить пользовательский тип файла на ваш веб-сервер или в конфигурацию .htaccess.
Например, чтобы использовать этот mime-тип в Apache, добавьте эту строку в файл конфигурации:
AddType text / cache-manifest .appcache
Или в вашем файле app.yaml в Google App Engine:
- url: /mystaticdir/(.*\.appcache) static_files: mystaticdir / \ 1 mime_type: text / cache-manifest загрузка: mystaticdir / (. * \. appcache)
Это требование было удалено из спецификации некоторое время назад и больше не требуется в последних версиях Chrome, Safari и Firefox, но вам потребуется mime-тип для работы в старых браузерах и IE11.
Структура файла манифеста
Манифест - это отдельный файл, на который вы ссылаетесь через атрибут manifest элемента html. Простой манифест выглядит примерно так:
CACHE MANIFEST index.html stylesheet.css images / logo.png scripts / main.js http://cdn.example.com/scripts/main.js
В этом примере будет кэшировано четыре файла на странице, которая указывает этот файл манифеста.
Есть несколько вещей, на которые стоит обратить внимание:
- Строка CACHE MANIFEST является первой строкой и является обязательной.
- Файлы могут быть из другого домена
- Некоторые браузеры накладывают ограничения на объем квоты хранилища, доступный для вашего приложения. В Chrome, например, AppCache использует общий бассейн ВРЕМЕННОГО хранилища, которое могут совместно использовать другие автономные API. Если вы пишете приложение для Интернет-магазин Chrome Использование unlimitedStorage снимает это ограничение.
- Если сам манифест возвращает 404 или 410, кэш удаляется.
- Если манифест или указанный в нем ресурс не загружаются, происходит сбой всего процесса обновления кэша. Браузер будет продолжать использовать старый кэш приложения в случае сбоя.
Давайте посмотрим на более сложный пример:
CACHE MANIFEST # 2010-06-18: v2 # Явно кэшированные «основные записи». CACHE: /favicon.ico index.html stylesheet.css images / logo.png scripts / main.js # Ресурсы, которые требуют, чтобы пользователь был в сети. СЕТЬ: * # static.html будет обслуживаться, если main.py недоступен # offline.jpg будет использоваться вместо всех изображений в изображениях / large / # offline.html будет использоваться вместо всех других файлов .html FALLBACK: /main.py /static.html images / large / images / offline.jpg
Строки, начинающиеся с «#», являются строками комментариев, но могут также служить другой цели. Кэш приложения обновляется только при изменении файла манифеста. Так, например, если вы редактируете ресурс изображения или меняете функцию JavaScript, эти изменения не будут повторно кэшироваться. Вы должны изменить сам файл манифеста, чтобы сообщить браузеру обновить кэшированные файлы .
Избегайте использования постоянно обновляемой метки времени или случайной строки для принудительного обновления каждый раз. Во время обновления манифест проверяется дважды, один раз в начале и один раз после обновления всех кэшированных файлов. Если манифест изменился во время обновления, возможно, браузер извлек некоторые файлы из одной версии и другие файлы из другой версии, поэтому он не применяет кэш и повторяет попытки позже.
Несмотря на то, что кэш обновляется, браузер не будет использовать эти файлы до тех пор, пока страница не будет обновлена, потому что обновления происходят после загрузки страницы из текущей версии кеша.
Манифест может иметь три отдельных раздела: CACHE, NETWORK и FALLBACK.
CACHE: это раздел по умолчанию для записей. Файлы, перечисленные в этом заголовке (или сразу после манифеста CACHE), будут явно кэшироваться после первой загрузки. СЕТЬ: Файлы, перечисленные в этом разделе, могут поступать из сети, если их нет в кэше, в противном случае сеть не используется, даже если пользователь подключен к сети. Вы можете указать в списке определенные URL-адреса или просто "*", что разрешает все URL-адреса. Большинству сайтов нужно "*". FALLBACK: необязательный раздел, задающий резервные страницы, если ресурс недоступен. Первый URI - это ресурс, второй - запасной вариант, используемый при сбое или ошибках сетевого запроса. Оба URI должны иметь то же происхождение, что и файл манифеста. Вы можете захватывать определенные URL-адреса, а также префиксы URL-адресов. «images / large /» будет фиксировать сбои в URL-адресах, таких как «images / large / what / img.jpg».
Примечание . Эти разделы могут быть перечислены в любом порядке, и каждый раздел может отображаться более чем в одном манифесте.
Следующий манифест определяет страницу «catch-all» (offline.html), которая будет отображаться, когда пользователь пытается получить доступ к корню сайта в автономном режиме. Он также заявляет, что для всех других ресурсов (например, удаленных сайтов) требуется подключение к Интернету.
CACHE MANIFEST # 2010-06-18: v3 # Явно кэшированные записи index.html css / style.css # offline.html будет отображаться, если пользователь находится в автономном режиме FALLBACK: / /offline.html # Все остальные ресурсы (например, сайты) требуют пользователь должен быть онлайн. СЕТЬ: * # Дополнительные ресурсы для кэширования CACHE: images / logo1.png images / logo2.png images / logo3.png
Примечание . Файл HTML, который ссылается на файл манифеста, автоматически кэшируется. Нет необходимости включать его в свой манифест, однако это рекомендуется делать.
Примечание . Заголовки кэша HTTP и ограничения кэширования, накладываемые на страницы, обслуживаемые по протоколу SSL, переопределяются манифестами кэша. Таким образом, страницы, обслуживаемые через https, могут работать автономно.
Обновление кеша
Когда приложение находится в автономном режиме, оно остается в кэше, пока не произойдет одно из следующих действий:
- Пользователь очищает хранилище данных своего браузера для вашего сайта.
- Файл манифеста изменен. Примечание. Обновление файла, указанного в манифесте, не означает, что браузер повторно кэширует этот ресурс. Сам файл манифеста должен быть изменен.
Статус кэша
Объект window.applicationCache - это ваш программный доступ к кешу приложения браузера. Его свойство status полезно для проверки текущего состояния кэша:
var appCache = window.applicationCache; switch (appCache.status) {case appCache.UNCACHED: // UNCACHED == 0 return 'UNCACHED'; перерыв; case appCache.IDLE: // IDLE == 1 return 'IDLE'; перерыв; case appCache.CHECKING: // CHECKING == 2 return 'CHECKING'; перерыв; case appCache.DOWNLOADING: // DOWNLOADING == 3 return 'DOWNLOADING'; перерыв; case appCache.UPDATEREADY: // UPDATEREADY == 4 return 'UPDATEREADY'; перерыв; case appCache.OBSOLETE: // OBSOLETE == 5 return 'OBSOLETE'; перерыв; по умолчанию: вернуть 'UKNOWN CACHE STATUS'; перерыв; };
Чтобы программно проверить наличие обновлений в манифесте, сначала вызовите applicationCache.update (). Это попытается обновить кэш пользователя (который требует изменения файла манифеста). Наконец, когда applicationCache.status находится в состоянии UPDATEREADY, вызов applicationCache.swapCache () заменит старый кеш на новый.
var appCache = window.applicationCache; appCache.update (); // Попытка обновить кеш пользователя. ... if (appCache.status == window.applicationCache.UPDATEREADY) {appCache.swapCache (); // Выборка прошла успешно, перестановка в новый кеш. }
Примечание : Использование update () и swapCache (), как это, будет означать, что новый кеш будет использоваться для последующих загрузок, но пользователь уже загрузит страницу и, вероятно, все ресурсы к этому моменту, эти файлы не будут автоматически перезагружаться. Вам необходимо обновить страницу, чтобы получить последнюю версию страницы и ресурсы, для которых не требуется вызывать swapCache ()
Хорошая новость: вы можете автоматизировать это. Чтобы обновить пользователей до последней версии вашего сайта, настройте прослушиватель для отслеживания события updateready при загрузке страницы:
// Проверяем, доступен ли новый кеш при загрузке страницы. window.addEventListener ('load', function (e) {window.applicationCache.addEventListener ('updateready', function (e) {if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {// Браузер загрузил новый кеш приложения. if (подтвердите ('Доступна новая версия этого сайта. Загрузить?')) {window.location.reload ();}} else {// Манифест не изменился. Ничего нового для сервера.} }, ложь);}, ложь);
События AppCache
Как и следовало ожидать, дополнительные события выставляются для мониторинга состояния кэша. Браузер генерирует события для таких вещей, как ход загрузки, обновление кэша приложения и ошибки. Следующий фрагмент устанавливает прослушиватели событий для каждого типа события кэша:
function handleCacheEvent (e) {// ...} function handleCacheError (e) {alert ('Ошибка: кэш не обновился!'); }; // Запускается после первого кэша манифеста. appCache.addEventListener ('cached', handleCacheEvent, false); // Проверка наличия обновлений. Всегда первое событие в последовательности. appCache.addEventListener ('check', handleCacheEvent, false); // Обновление найдено. Браузер загружает ресурсы. appCache.addEventListener («загрузка», handleCacheEvent, false); // Манифест возвращает 404 или 410, загрузка не удалась, // или манифест изменился во время загрузки. appCache.addEventListener ('error', handleCacheError, false); // Запускается после первой загрузки манифеста. appCache.addEventListener ('noupdate', handleCacheEvent, false); // Запускается, если файл манифеста возвращает 404 или 410. // Это приводит к удалению кэша приложения. appCache.addEventListener ('устарел', handleCacheEvent, false); // Запускается для каждого ресурса, указанного в манифесте, по мере его получения. appCache.addEventListener ('progress', handleCacheEvent, false); // Запускается, когда ресурсы манифеста были заново загружены. appCache.addEventListener ('updateready', handleCacheEvent, false);
Если файл манифеста или указанный в нем ресурс не загружается, происходит полное обновление. Браузер будет продолжать использовать старый кэш приложения в случае такого сбоя.
Рекомендации
Похожие
Скачать SEO руководство от GoogleРуководство по поисковой оптимизации Google впервые было разработано с целью помочь командам в Google, но Google подумал, что оно будет столь же полезным для веб-мастеров, которые плохо знакомы с темой поисковой оптимизации и хотят улучшить взаимодействие своих сайтов с обоими пользователями. и поисковые системы. ОБНОВЛЕНИЕ: Google обновил и выпустил руководство по поисковой оптимизации, которое содержит множество советов по SEO для блоггеров SEO ссылка строит сайт авторитет
Последняя проверка 5 марта 2019 года в 20:35 Мы все слышали о грохоте и приветствии создания ссылок в SEO во всей сети. Создание ссылок является одной из наиболее важных практик любого SEO. В этой статье я просто SEO обновление: последние изменения Google
Поисковая оптимизация - использование ключевой фразы - всегда является «движущейся мишенью». Все поисковые системы постоянно работают над тем, чтобы их алгоритмы выбирали сайты для поиска людей. Владельцы бизнеса треугольников, следящие за своей аналитикой Google, возможно, заметили некоторые изменения в последнее время, поскольку массивная поисковая система продолжает обновлять свой алгоритм. Вот последние изменения SEO и как они влияют на ваш бизнес: Обновление 2017 SEO руководство для голосового поиска
Разговаривать с Google Now, Siri, Cortana или любым другим голосовым помощником, доступным на рынке, модно. По данным Google, сегодня 20% мобильных поисков уже осуществляется с помощью голоса. присоединиться Online Marketing, международное консалтинговое и интернет-маркетинговое агентство, представляет основные инструменты SEO, которые необходимо учитывать, чтобы адаптировать веб-страницу к голосовым поискам и привлечь внимание пользователя при выполнении Структура URL - как это работает правильно
Термин описывает структуру веб-адреса, под которым ваш сайт доступен. С одной стороны, URL состоит из домена, с другой стороны, есть много других компонентов. Интернет-адрес - это не маленькая вещь, которую вы должны принять слегка: Интернет-маркетинг (а точнее: на Архитектура сайта для SEO: полное руководство
Как построить архитектуру вашего сайта, следуя хорошим практикам SEO? Это вопрос, который я привык задавать себе, и, по моему скромному мнению, я не должен быть SEO советы для начинающих в вашем интернет-магазине
Для покупателей это жесткая конкуренция за то, чтобы привлечь клиентов для своего обычного бизнеса, получить трафик в свой интернет-магазин намного сложнее. Количество интернет-магазинов, продающих те же товары, что и у вас, растет, и для того, чтобы получать продажи, нужно убедиться, что этот магазин выделяется. Вот почему вам нужны эти советы для начинающих SEO для вашего магазина электронной коммерции. Поисковая оптимизация - что это такое и как это работает Обновление Google Penguin SEO вступает в силу
Почти три года назад команда разработчиков Google под названием Google Penguin выпустила небольшую бомбу. Это было серьезным обновлением алгоритма SEO, который был введен в действие для проверки многих сайтов, которые злоупотребляли частями алгоритма для повышения рейтинга. Полное руководство по SEO для латиноамериканского рынка США
Райан Стюарт, эксперт по цифровому маркетингу и сотрудник престижных порталов, таких как Moz и Search Engine Journal, присылает нам статью о том, как реализовать стратегию SEO для испаноязычного рынка в Соединенных Штатах. Я оставляю вас со статьей: Задумывались ли вы, если будет эффективнее обратиться к вашей латиноамериканской аудитории в Соединенных Штатах на английском или испанском языках. В чем вы не можете сомневаться, так это в необходимости победить его. Цифры Основы SEO на странице
Как в моя последняя статья по поисковой оптимизации Существует как SEO-оптимизация вне страницы (в основном, оптимизация вне собственной страницы), так и SEO-оптимизация на странице. После того, как в последнее десятилетие основное внимание оптимизаторов уделялось оптимизации сторонних страниц или конкретно теме построения ссылок, в последние несколько лет тема оптимизации страниц все больше и больше OpenCart
OpenCart - это система интернет-магазинов с открытым исходным кодом на основе PHP. Надежное решение для электронной коммерции для интернет-торговцев с возможностью создания собственного онлайн-бизнеса и участия в электронной коммерции с минимальными затратами. OpenCart разработан с широкими возможностями, прост в использовании, удобен для поисковых
Комментарии
Как вы думаете, ссылка в меню так же важна, как и контекстная ссылка?Как вы думаете, ссылка в меню так же важна, как и контекстная ссылка? Мы рады услышать ваше мнение! Хотя я все еще сохраняю боковую панель в своих блогах, правда в том, что в такой сильной мобильной навигации, как нынешняя, мы от нее избавимся. Но так как я увлекаюсь этим, это все еще кажется хорошим способом получить подписчиков и поощрять просмотр других постов в блоге (и если вы их не спрашиваете) Хавьер Кэбот , который был обязан поместить Обновление, обновление или полный перезапуск?
Обновление, обновление или полный перезапуск? Обновления вносят наименьшее количество изменений, так как обычно только версия системы управления контентом немного изменена. Более важно решить, стоит ли переходить на новую версию Major / LTS или полностью перезапускать. Для этого вам следует задать следующие вопросы: Сколько страниц в дереве страниц? (полезный инструмент для этого: https://www.xml-sitemaps.com/ ) Должны Что такое хорошая ссылка?
Что такое хорошая ссылка? Так что, если ссылки выше не являются полезными, то что такое хорошая ссылка? Прежде всего, вы должны понимать, что укрепление связей - это не только вопрос количества, но и, прежде всего, вопрос качества. Часто, когда я делаю это замечание на конференциях, многие люди удивляются ... Я объясняю, что создавать бесполезные ссылки на ваш сайт бесполезно. Но важнее происхождение этих ссылок. Например, ссылка из обычного блога не имеет такой Не слишком ли плохо найти, что страница с потенциалом перестала генерировать хиты, потому что ссылка ушла в эфир?
Не слишком ли плохо найти, что страница с потенциалом перестала генерировать хиты, потому что ссылка ушла в эфир? Очень разочаровывает. Благодаря очень простому интерфейсу Broken Link Finder - как само название говорит - это помогает вовремя найти неработающие ссылки, чтобы избежать значительных потерь в вашей стратегии SEO. WordPress SEO Плагин WordPress является одной из наиболее часто используемых платформ для производства Что такое ссылка?
Что такое ссылка? Ссылка - это ссылка с одной стороны на нашу сторону с определенным якорным текстом. Я расскажу об основных текстах в следующей статье! Но на что нужно обращать внимание при линковке? Многие люди спрашивают, что в чем смысл построения ссылок ? Короче говоря, это означает получение ссылок на наш сайт с других престижных сайтов с использованием различных Что такое обратная ссылка в SEO?
Что такое обратная ссылка в SEO? Как купить? Внешние ссылки важны, но вы не должны смешивать качество с количеством и учитывать связи, которые не зависят от вашего контента. Важно понимать, что наличие хорошего контента значительно увеличивает ваши шансы на поддержание хорошего качества и естественных ссылок с соответствующих страниц. Эти ссылки помогут вам в долгосрочной перспективе. Если у вас есть что-то, что стоит подключить простым языком, вы можете Является ли эта ссылка спамом?
Является ли эта ссылка спамом? Потому что это пахнет как F% # ing ссылка спам. Сегодня стартовал первый день Search Marketing Expo в Силиконовой долине и одной из первых тем обсуждения был Голосовой поиск с техническим директором Google Бехшадом Бехзади . Мы знаем, что мобильный поиск находится на подъеме, и все больше и больше таких поисков выполняется с помощью распознавания голоса Как родилась ссылка на сайт?
Как родилась ссылка на сайт? Как ребенок ... Вот как выглядят мои ссылки сайта. Попробуйте выполнить следующее упражнение: Попробуйте поискать на сайте "Walla!" Знаменит в гугле. Вы можете видеть, как под первым результатом, который прыгнул в поиске, есть несколько страниц сайта Уоллы, такие как «Почта», «Спорт», «Воспоминания» и другие. Если, например, я сейчас ищу себя в Google и пишу "Matan Cohen SEO", я также выбрал бы страницы Это ссылка на что-то в популярной культуре?
Это ссылка на что-то в популярной культуре? Пожалуйста, добавьте информацию здесь !) Насколько новая ваша ссылка?
Насколько новая ваша ссылка? Насколько естествен ваш профиль ссылки? И так далее ... При создании ссылок на ваш сайт или внутренние страницы (которые в настоящее время являются более идеальными в SEO), сосредоточьтесь на релевантных, авторитетных и оптимизированных для SEO ссылках. Давайте обсудим несколько способов получить эти ценные ссылки: 1). Broken Link Building: хотя я написал тонны С какими проблемами UA сталкиваются маркетологи и разработчики приложений сегодня?
С какими проблемами UA сталкиваются маркетологи и разработчики приложений сегодня? Самая большая проблема, которую я вижу, - это возможность проводить как творческую оптимизацию активов, так и оптимизацию кампаний в режиме реального времени на панели самообслуживания. Есть еще несколько рекламных сетей, которые просто требуют, чтобы вы отправили электронное письмо руководителю кампании, чтобы внести изменения вручную, что, откровенно говоря, слишком медленно для современной среды UA.
Что-то", "/ page-url /?
Загрузить?
Как вы думаете, ссылка в меню так же важна, как и контекстная ссылка?
Обновление, обновление или полный перезапуск?
Для этого вам следует задать следующие вопросы: Сколько страниц в дереве страниц?
Что такое хорошая ссылка?
Так что, если ссылки выше не являются полезными, то что такое хорошая ссылка?
Не слишком ли плохо найти, что страница с потенциалом перестала генерировать хиты, потому что ссылка ушла в эфир?
Что такое ссылка?
Но на что нужно обращать внимание при линковке?
