Манифест используется для оффлайн страниц.Даже при отключенной сети страницу можно нормально открыть.Он прост в использовании,но при реальном использовании возникают следующие проблемы:
(1) Как автоматически кэшировать все ресурсы страницы? Поскольку манифест не может использовать подстановочный знак * для кеша
(2) Если ресурсы веб-сайта обновляются, как сделать так, чтобы файл манифеста обновлялся автоматически? В противном случае, если пользователь не очистит кеш, старая страница будет загружаться даже при подключенном интернете.
Я думаю, что многие веб-сайты не используют Manifest по двум причинам, упомянутым выше.Некоторые люди пробовали его, но его использование более проблематично, и ценность автономного приложения не кажется большой. Тем не менее, использование Manifest по-прежнему имеет много преимуществ, особенно для веб-сайтов, которые имеют тенденцию отображаться, таких как блоги или онлайн-приложения.Частота динамических изменений данных на таких веб-сайтах относительно низкая, и нет необходимости часто запрашивать данные. из услуг. Таким образом, когда пользователю необходимо часто возвращаться на домашнюю страницу или часто переключаться между несколькими страницами, поскольку почти все ресурсы являются локальными, загрузка происходит мгновенно.
1. Использование манифеста
Использовать манифест очень просто, просто добавьте атрибут манифеста в тег html:
<html manifest="/static/manifest/home.appcache">Это свойство указывает на файл манифеста, в котором указывается, какие ресурсы на текущей странице необходимо кэшировать в автономном режиме, например home.appcache:
CACHE MANIFEST
#9/27/2017, 3:04:25 PM
#html
https://github.com/
#img
https://assets-cdn.github.com/images/modules/site/universe-octoshop.png
https://assets-cdn.github.com/images/modules/site/universe-wordmark.png
#css
https://assets-cdn.github.com/assets/frameworks-bedfc518345231565091.css
#js
https://assets-cdn.github.com/assets/compat-94eba6e3cd1fa18902d9.js
NETWORK:
*
FALLBACK
https://github.com/ /html/manifest/html/home.htmlПервая строка этого файла должна начинаться с CACHE MANIFEST, иначе браузер сообщит об ошибке при синтаксическом анализе.Комментарии начинаются с #, а ресурсы, которые необходимо кэшировать, следуют за этой строкой.Следующая NETWORK указывает, какие ресурсы необходимо загружается онлайн.Вообще, нужно писать как NETWORK*, указывая на то, что Все остальные ресурсы, кроме КЭША, должны быть подключены к интернету, в том числе и некоторые динамические запросы.Если не писать *, а писать конкретные пути, те, которые ни ни в CAHCE, ни в NETWORK не будут сообщать об ошибках при загрузке.
Даже если он подключен к интернету, он будет таким, поэтому обычно пишется как *.
FALLBACK означает альтернативные ресурсы. Если эти ресурсы не загружены, они будут загружены вместо них. Например, если вышеуказанный файл https://github.com недоступен, используйте статический HTML для доступа: https://github.com /html/манифест/html/home.html.
Откройте веб-сайт, который поддерживает манифест, например.www.rrfed.com, вы можете наблюдать за процессом кеша консоли Chrome:
Затем обновите страницу, вы обнаружите, что почти все ресурсы страницы извлекаются из локального кеша, как показано на следующем рисунке:
А отключаешь сеть, обновляешь страницу, страница еще может загружаться нормально. Это поддерживается в таких браузерах, как Chrome/Firefox/Safari.
В дополнение к манифесту есть еще один способ кэширования, который заключается в установке поля Cache-Control заголовка HTTP для кэширования.Это может кэшировать ресурсы JS/CSS/изображения, но если вы также кэшируете HTML, возникнет проблема , если пользователь не очистит кеш, даже если ваша страница будет обновлена, пользователь все равно будет загружать старую страницу до тех пор, пока не истечет время настройки кеша Max-Age. Таким образом, использование Manifest может решить эту проблему.
Как Manifest узнает, что данные текущей страницы обновлены? Если вы измените файл манифеста, такой как home.appcache выше, браузер будет загружать этот файл при открытии страницы. Как только он обнаружит, что файл был изменен, он перезагрузит все файлы кэша при следующем обновлении. способ изменить время в комментарии на текущее время:
#9/29/2017, 9:08:49 AMСледовательно, при изменении ресурсов веб-сайта содержимое манифеста может быть изменено, а затем обновлен сетевой браузер.
Используйте Manifest, чтобы обратить внимание на следующие проблемы:
(1) Манифест имеет ограничение по размеру. На самом деле это локальное хранилище. Как правило, каждый домен имеет ограниченное пространство для локального хранилища. ПК Chrome составляет 5 МБ. Для справкиследующая таблица:
| Browser | Application Cache (AppCache) Storage Limit |
|---|---|
| Safari Desktop (Mac & Win) | Unlimited |
| Safari Mobile (iOS) | 10 MB |
| Chrome Desktop (Mac & Win) | 5 MB * |
| Chrome Mobile (Android) | Unlimited ** |
| Firefox 4 Beta | Unlimited (with user prompt) |
| IE | No idea. It sucks. *** |
(2) Файлы манифеста, такие как home.appcahce, не могут быть междоменными, если междоменные должны поддерживать CORS.
(3) Ресурсы Manifest Cache не могут быть междоменными. Аналогичным образом, если междоменный ресурс должен поддерживать CORS, основной браузер автоматически обработает его.
2. Решить проблему автоматической генерации и обновления манифеста
Поскольку Manifest не может использовать подстановочные знаки для сопоставления ресурсов, необходимо перечислять ресурсы, подлежащие кэшированию, один за другим, а содержимое веб-сайта часто динамически обновляется, что доставляет больше хлопот. С этой целью автор написал пакет NPM, который автоматически генерирует манифестgenerate-manifest, который очень прост в использовании:
npm install -g generate-manifest
generate-manifest --url=https://github.comОн сгенерирует файл манифеста home.appchache, который включает ссылки на ресурсы img/js/css на странице:
CACHE MANIFEST
#9/27/2017, 3:04:25 PM
#html
https://github.com/
#img
https://assets-cdn.github.com/images/modules/site/universe-octoshop.png
https://assets-cdn.github.com/images/modules/site/universe-wordmark.png
#css
https://assets-cdn.github.com/assets/frameworks-bedfc518345498ab3204d330c1727cde7e733526a09cd7df6867f6a231565091.css
#js
https://assets-cdn.github.com/assets/compat-91f98c37fc84eac24836eec2567e9912742094369a04c4eba6e3cd1fa18902d9.js
NETWORK:
*
FALLBACK
https://github.com/ /html/manifest/html/home.htmlОн также может поддерживать настройку других параметров, см.:generate-manifest.
Это решает проблему автоматической генерации, что делать с автоматическим обновлением?
Поскольку я являюсь веб-сайтом блога, основными местами, где меняется содержимое веб-сайта, являются: 1. Публикация/изменение блогов 2. Пользователи оставляют комментарии 3. Просмотры страниц веб-сайта меняются, первое решение — написать интерфейс , если при публикации блога настройте этот интерфейс для создания нового файла манифеста:
https://www.rrfed.com/refresh-manifest.php?link=https://www.rrfed.com/2017/09/26/manifest/
Затем он передаст указанный выше пакет generate-manifest для создания файла manifest.appcache.В html имя манифеста определяется по последней части пути:
<?php
$uri = "$_SERVER[REQUEST_URI]";
$uriArray = explode("/", $uri);
$uriName = count($uriArray) > 2 ? $uriArray[count($uriArray) - 2] : "home";
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> manifest=<?php echo "/html/manifest/appcache/$uriName.appcache"?>>Это соответствует сгенерированному имени файла один к одному.
Второй вопрос: Пользовательские сообщения - автоматически настроить этот интерфейс в интерфейсе таблицы передачи, необходимо обратить внимание на этот интерфейс, требует инъекции противника, иначе опасно
Третий вопрос: количество читаемых данных изменяется - напишите запланированную задачу Linux, используйте crontab, чтобы добавить запланированную задачу, выполните crontab -e, чтобы добавить:
0 3 * * * /home/fed/manifest/update-all.shЭто означает запуск скрипта update-all.sh каждый день в 3:00, который записывает в него команды обновления всех страниц:
generate-manifest --url=https://www.rrfed.com
generate-manifest --url=https://www.rrfed.com/page/2/
generate-manifest --url=https://www.rrfed.com/page/3/
#..其它...Опубликованная статья, упомянутая в первом пункте, также добавит в этот скрипт строку команд.
Поскольку количество показаний не очень важно, хорошо обновлять его раз в день. Это позволяет пользователям кэшировать свои действия в тот же день. Я обновлю, если я вернусь на следующий день.
Так в принципе решить проблему автоматического обновления.
Другая проблема заключается в том, что первое обновление после изменения манифеста - это все еще старая страница, правильно только второе обновление, поэтому мы надеемся, что после изменения манифеста он будет новым, как только он обновится, а не предыдущий кеш. тот, который не нужно чистить дважды.
Так что делать? В манифесте есть событие обновления. После обновления файла манифеста это событие будет запущено, поэтому мы можем прослушивать это событие, а затем автоматически обновлять страницу, чтобы перезагрузить страницу. Следующий код:
function onUpdateReady() {
window.location.reload(true);
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
onUpdateReady();
}Подводя итог, мы хорошо использовали Manifest для создания автономного приложения страницы, которое решило проблему автоматической генерации и автоматического обновления. Даже если пользователь не в офлайне, ресурсы, загружаемые во второй раз, кэшируются локально, поэтому, когда пользователь переключается между несколькими страницами, скорость очень высока.Например, многие люди могут находиться между списком домашних страница и страница содержимого. Переключение вперед и назад.
Хотя Manifest устарел и заменен Service Worker, мы все еще можем использовать его из-за его простоты и совместимости.
Связанное чтение: