Преимущество API API обслуживания JavaScript состоит в том, что он позволяет веб -разработчикам легко управлять кэшами. Хотя использование таких технологий, как ETAGS, также является технологией для управления кэшами, использование JavaScript позволяет программам контролировать кэши более мощными и свободно. Конечно, Strong имеет свои преимущества и недостатки - вам нужно выполнять лечение после ухода. Так называемая лечение после ухода состоит в том, чтобы очистить кеш.
Давайте посмотрим, как создать объект кэша, добавить данные кэша запроса в кэше, удалить данные кэша запроса из кэша и, наконец, как полностью удалить кэш.
Определите поддержку браузера для кеша кэша кэша API
Проверьте, поддерживает ли браузер API кэша ...
if ('caches' в окне) {// имеет поддержку!}… Проверьте, есть ли в окне объект Caches.
Создать объект кэша
Способ создания объекта кеша - использовать caches.open () и передать имя кэша:
caches.open ('test-cache'). Затем (function (cache) {// создается кэш, и вы можете получить к нему доступ});Этот метод Caches.Open возвращает обещание, и объект кэша в нем вновь создан. Если он был создан ранее, он не будет воссоздан.
Добавьте кэшированные данные
Для этого типа кэша вы можете думать о нем как о массиве объектов запроса, и данные ответа, полученные по запросу запроса, будут сохранены в объекте кэша по значению ключа. Есть два способа добавить данные в кэш: добавить и addall. Используйте эти два метода, чтобы добавить адрес запроса для кэширования. Для введения в объект запроса вы можете обратиться к статье Fetch API.
Используйте метод Addall для добавления запросов кеша в партиях:
caches.open ('test-cache'). Тогда (function (cache) {cache.addall (['/', '/images/logo.png']) .then (function () {// cached!});});Этот метод Addall может принимать адресную массив в качестве параметра, и данные ответа этих адресов запроса будут кэшированы в объекте кэша. Аддалл возвращает обещание. Чтобы добавить один адрес, используйте метод добавления:
caches.open ('test-cache'). Тогда (function (cache) {cache.add ('/page/1'); // будет запрошен адрес "/page/1", и данные ответа будут кэшированы.});Метод add () также может принять пользовательский запрос:
caches.open ('test-cache'). then (function (cache) {cache.add (new Request ('/page/1', {/* parameter*/});});Это очень похоже на метод add (). Метод put () также может добавить адрес запроса и одновременно добавить его данные ответа:
fetch ('/page/1'). Тогда (function (response) {return caches.open ('test-cache'). then (function (cache) {return cache.put ('/page/1', response);});});Доступ к кэшированным данным
Чтобы просмотреть измененные данные запроса, мы можем использовать метод Keys () в объекте кэша, чтобы получить все объекты кэшированного запроса в форме массива:
caches.open('test-cache').then(function(cache) { cache.keys().then(function(cachedRequests) { console.log(cachedRequests); // [Request, Request] });});/*Request { bodyUsed: false credentials: "omit" headers: Headers integrity: "" method: "GET" mode: "no-cors" redirect: «Следуйте» рефералу: "" url: "http://www.webhek.com/images/logo.png">Если вы хотите просмотреть содержимое ответа запроса на кэшированный запрос, вы можете использовать метод cache.match () или cache.matchall ():
caches.open ('test-cache'). Затем (function (cache) {cache.match ('/page/1'). Тогда (function (matchedresponse) {console.log (matchedresponse);});});/*Ответ {body: (...), bodysed: falsers: uders: waders, ok: true, status: ntuste: ",", types: ",". "https://www.webhek.com/page/1">*/Для получения дополнительной информации об использовании и деталях объектов ответа вы можете обратиться к статье Fetch API.
Удалить данные в кэше
Удалить данные из кэша, мы можем использовать метод delete () в объекте кэша:
caches.open ('test-cache'). Тогда (function (cache) {cache.delete ('/page/1');});Таким образом, в кеше больше не будет данных /1 запроса.
Получите имя кэша в существующем кэше
Чтобы получить имя данных кэша, которые уже существуют в кэше, нам нужно использовать метод caches.keys ():
caches.keys (). Then (function (cachekeys) {console.log (cachekeys); // ex: ["test-cache"]});window.caches.keys () возвращает обещание.
Удалить объект кеша
Чтобы удалить кэшированный объект, вам нужно только имя кэшированного ключа:
caches.delete ('test-cache'). then (function () {console.log ('cache успешно удален!');});Как удалить старые кэшированные данные в больших количествах:
// Предположим `cache_name`-это имя нового кэша // Теперь очистите старый кэш cache cache_name = 'version-8'; // ... caches.keys (). Тогда (function (cachenames) {return promise.all (cachenames.map (function (cachename) {if (cachename! });});Хотите стать экспертом по обслуживанию? Приведенный выше код стоит поместить в вашу библиотеку. Firefox и Google Chrome Support Service Worker, и я считаю, что больше веб -сайтов и приложений будут использовать эту технологию кэширования для повышения скорости их бега.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.