1. Теперь за форумную активность начисляются биткоины и другие криптоденьги. Подробнее.
    Скрыть объявление
  2. Появилась архивная версия форума arhiv.xaker.name, где собраны темы с 2007 по 2012 год.
    Скрыть объявление

[Обо всем по немногу-Html5] Часть 2

Тема в разделе "CSS, HTML, JS", создана пользователем хопкинс, 5 июл 2013.

  1. хопкинс
    хопкинс Продвинутый
    Симпатии:
    35
    Как и обещал-пишу продолжение статей на тему html5))).В этой статье я хочу поговорить об оффлайновых веб-приложениях))).И так(барабанная дробь)...
    оффлайновое веб-приложение в html 5

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

    HTML:
    <html manifest="/cache.manifest">
    Хочу дополнить слова тем, что файл может валяться где угодно, но вы должны обеспечить для него тип text/cache-manifest...А так же для тех у кого стоит АПАЧ, рекомендуется прописать директиву AddType в файл .htaccess в корне сайта.
    HTML:
    AddType text/cache-manifest .manifest
    И помните, что манифест стоит указывать на каждой странице вашего приложения!

    Гребем дельше. Теперь давайте немного разберемся что вообще творится в файле манифеста:

    Если вы туда заглянете(то у вас вырастет пивное пузо, борода которая заменяет зимний свитер и футболка с надписью "I like Html)

    Вы увидите следующее:
    На первой строке будет CACHE MANIFEST

    А дальше пошли ягодки.Теперь все файлы манифеста можно разделить на три раздела: «явный», «резервный» и «онлайновый белый список».

    Если файл манифеста не содержит никаких заголовков как например здесь:

    HTML:
    CACHE MANIFEST
    /clock.css
    /clock.js
    /clock-face.jpg
    То все перечисленные ресурсы подразумеваются в разделе «явный».

    В нашем случае все 3 файла скинутся и все будем журжать и без интернета))) Но это еще не все.

    Предположим вы захотите...ну например отслеживать посетителей. Вот вы сбацали скрипт и делаете следующую вещь:
    HTML:
    CACHE:
    /clock.css
    /otsezivanie users.js
    /clock-face.jp
    В данном случае у вас все полетит к чертям. Нельзя допустить что бы файл otsezivanie users.js кэшировался, а сделать это можно так:

    HTML:
    CACHE MANIFEST
    NETWORK:
    /otsezivanie users.js
    CACHE:
    /clock.css
    /clock-face.jp
    Я надеюсь всем понятно, что все что попало в раздел NETWORK-НЕ КЭШИРУЕТСЯ!!.

    Но нам ведь и этого мало, не так ли?! Давайте рассмотрим еще один пример....а что если вам вдруг стукнула в голову мысль например сделать Гугл оффлайновым веб-преложением(для этого конечно надо упороться...но не об этом). Понятное дело что у вас ничего не выйдет. В Гугле миллиарды страниц. Куда их сохранить? Да никуда! Нафига нам все страницы?! Нам нужно например всего несколько. Но как определить какие именно? И тут нам на помощь приходит FALLBACK

    FALLBACK- Это своего рода резервный раздел. В Спецификации Html5 написано так:
    HTML:
    CACHE MANIFEST
    FALLBACK:
    / /offline.html
    NETWORK:
    *
    Теперь подробнее...если вы откроете какую нибудь книжку или что-то вроде этого....то там обычно на этом месте начинаются народные танцы шаманов вудду. Я же попытаюсь рассказать в двух словах и на пальцах.

    Если вы указываете данный раздел происходит следующее:

    Браузер проверяет бывали вы на этой странице раньше или нет.Если нет то он сохраняет страницу в кэш, а если были то он возьмет эту страницу из кэша. Вот и все) Таким образом все просмотренные страницы в гугле становятся автономными)

    Ну и конечно же все внимательные люди заметили знак * в разделе NETWORK...Тут особо ничего сложного нет...если бы вы его не поставили...было бы примерно следующее: Все мы знаем что крупные порталы хранят изображения на других доменах...так вот-без этой самой звездочки они бы не загружались!Объясняю почему. Этот символ имеет особое значение в сетевом разделе, он называется «подстановочный флаг онлайнового белого списка». Это причудливый способ сказать: все, что не в appcache, должно быть загружено по исходному веб-адресу при подключении к Интернету. А если этого символа не будет...то даже находясь в онлайне вы не увидите изображений.

    И это еще не все. Все что будет написано ниже можете читать смотря одним глазом на восход, другим на север, стоя на голове (Если прочесть +100500 раз то бог Ра спустится к вам с неба на своей огненной колеснице)

    1. Если хоть один файл(в манифесте) не будет скачен правильно, все скатится в тар-тара-ры. и вы увидите только Error! Без всяких там ванильных объяснений!
    2. Еще у вас могут возникнуть много магии с файлом манифеста. А именно:

    Как браузер проверяет, что файл манифеста кэша изменился?!

    Да вот как!

    • Посредством HTTP-семантики ваш браузер проверяет, что срок действия манифеста кэша истек. Так же, как и любой другой файл, работающий через HTTP, веб-сервер, как правило, включает мета-информацию о файле в HTTP-заголовок ответа. Некоторые из этих HTTP-заголовков (Expires и Cache-Control) говорят браузеру, как ему кэшировать файлы без всякого запроса сервера. Этот вид кэширования не имеет ничего общего с оффлайновым веб-приложением и происходит практически со всеми HTML-страницами, таблицами стилей, скриптами, изображениями или другими ресурсами в Интернете.
    • Если срок манифеста кэша истек (в соответствии с его HTTP-заголовком), то ваш браузер запрашивает сервер, есть ли новая версия, и если да, то браузер скачает ее. Для этого ваш браузер отправит HTTP-запрос, который включает дату последнего изменения манифеста кэша. Если веб-сервер определяет, что файл манифеста не поменялся с того времени, он просто вернет статус 304 (не изменен). Опять же это не относится к оффлайновым веб-приложениям. Это происходит по существу со всеми ресурсами в Интернете.
    • Если веб-сервер считает, что файл манифеста изменился с того времени, он вернет код состояния 200 (все в порядке), отправит содержимое нового файла с новым заголовком Cache-Control и датой последнего изменения, так что шаги 1 и 2 в следующий раз будут работать правильно. HTTP крут; веб-серверы всегда планируют на будущее и если вашему веб-серверу необходимо отправить вам файл, он сделает все возможное, чтобы не отправлять его дважды без всякой причины. Как только скачан новый файл манифеста кэша, ваш браузер будет сравнивать содержимое с копией скачанной ранее. Если содержимое файла манифеста кэша такое же, как оно было в последний раз, браузер не станет повторно загружать любой из ресурсов, перечисленных в манифесте.

    На сегодня я думаю хватит. Тут еще многое о чем нужно сказать...Но у меня уже мозг не варит. Пойду посплю, а завтра постараюсь дописать статью)))
     
    5 июл 2013
    1 человеку нравится это.
  2. хопкинс
    хопкинс Продвинутый
    Симпатии:
    35
    Разбор полетов

    И так, как и обещал-пишу продолжение.

    Представьте себе такую ситуацию... Вам показалось, что вы все умеете и прекрасно изучили статью, создаете свой файл манифест, но тут вы понимаете, что нужно добавить еще один ресурс. Это же так просто!

    И вот вы добавили одну строчку,сохраняете,обновляете страницу и БАМ!!!
    Не фига не сработало! Почему?! Все дело в том, что ваш веб-сервер, скорее всего, по умолчанию настроен сообщать браузеру кэшировать статичные файлы в течение нескольких часов (используюя HTTP-заголовок Cache-Control).
    Конечно, веб-сервер знает, что файл был изменен, но ваш браузер даже не догадается спросить об этом сервер.

    Почему так происходит?! Потому что в последний раз ваш браузер скачал манифест кэша, веб-сервер сказал ему кэшировать ресурсы несколько часов (используюя HTTP-заголовок Cache-Control). И теперь, спустя 10 минут, браузер так и делает.

    Но по сути-это не ошибка! Все работает как швейцарские часы)))
    Просто веб-сервер не может сказать браузеру (и промежуточным прокси) про кэширование, поэтому веб рухнет в одночасье. Но после данных слов вам не стало легче, верно? Так что же делать? Не ждать же пока все таинственным образом заработает(а оно заработает после истечения срока кэша)?

    Решение есть! Перенастроим наш веб-сервер так, чтобы файл манифеста не кэшировался по HTTP. В Apache это делается так...
    В файле .htaccess прописать две строчки:
    HTML:
    ExpiresActive On
    ExpiresDefault "access"
    Но это не совсем то....Придется либо связать строки с директивой <Files>, чтобы влиять только на файл манифеста, либо создать подкаталог, который содержит только .htaccess и файл манифеста
    (Все потому, что мы отключили кэширование для всех файлах в этом каталоге/подкаталогах.

    Вам кажется, что наступил рай?:diablo:

    Переходим ко 2у шагу из 3х этапного процесса:
    И так, представим обычный манифест.
    HTML:
    CACHE MANIFEST
    form.js
    form.css
    Вам надо изменить файл form.css...Ну и конечно же вы не увидите никаких изменений после обновления страницы!!!
    Все потому, что файл манифеста не изменился. Что бы это "исправить" предлагаю делать следующее-создать строку и закоментить ее. А в самой строке писать кол-во изменений:

    HTML:
    CACHE MANIFEST
    # izm-15
    form.js
    form.css
    Теперь когда вам нужно, что-то изменить, то заходим туда и меняем izm-15 на izm-16 и т.д...

    Ну и для закрепления материала предлагаю посмотреть как все это работает в DOM:

    1. Как только ваш браузер замечает атрибутmanifest в элементе <html>, он вызывает событие checking (все события, перечисленные здесь, срабатывают на объекте window.applicationCache. Событие checking всегда срабатывает, независимо от того, посещали вы эту страницу ранее или любую другую указанную в манифесте кэша.


    2.Если ваш браузер еще не видел манифест кэша...

    • Сработает событие downloading, затем браузер начинает загружать все ресурсы, указанные в манифесте кэша.
    • Пока идет загрузка, периодически срабатывает событие progress, которое содержит информацию, сколько файлов было скачано и сколько еще в очереди загрузки
    .
    • После того, как все перечисленные в манифесте ресурсы были успешно загружены, в браузере срабатывает финальное событие cached. Это сигнал для вас, что оффлайновое приложение полностью кэшировано и готово к автономному использованию.


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



    • Если ответ отрицательный, то манифест кэша не изменился, браузер немедленно вызовет событие noupdate. Вот и все.
    • Если ответ «да», манифест кэша изменился, браузер вызовет событие downloading и начнет повторно загружать каждый ресурс, упомянутый в манифесте.
    • Пока идет загрузка, браузер периодически вызывает событие progress, которое содержит информацию, сколько файлов было скачано и сколько еще в очереди загрузки.
    • После того, как все ресурсы, перечисленные в манифесте кэша, были успешно загружены вновь, в браузере срабатывает заключительное событие updateready. Это сигнал, что новая версия оффлайнового веб-приложения полностью кэширована и готова к автономному использованию. Однако, новая версия еще не используется. Для «горячей замены» на новую версию без вынуждения пользователя перезагрузить страницу, вы можете вручную вызвать функцию window.applicationCache.swapCache().

    В заключение хочу сказать, что если вы все прочли до конца с первого раза(да еще и поняли), то у вас стальные яйца куча терпения))

    P.S А терпение вам очень понадобится при создании оффлайновых-веб преложений)))
     
    7 июл 2013
    1 человеку нравится это.

Поделиться этой страницей

Загрузка...