Введение в Cache Storage (новый кеш браузера) PWA API

Многие слышали о Service Workers, но мало кто слышал о CacheStorage. Если вы один из них, не волнуйтесь, этот пост будет служить и руководством, и наставником по основам CacheStorage. Если вы слышали о CacheStorage, этот пост расширит ваши знания. Ладно, приступим!

В этом посте мы рассмотрим CacheStorage API, я возьму каждый API из интерфейсов CacheStorage и Cache и объясню на примерах, как они работают и как их использовать.

Примечание. CacheStorage и Service Workers не связаны друг с другом. Это два разных понятия. Мы рассмотрим их в следующих разделах.

Совет: при создании веб-приложений используйте бит для повторного использования компонентов! Легко делитесь ими и синхронизируйте их в своем приложении, чтобы быстрее создавать вместе с вашей командой. Попробуйте.

Что такое CacheStorage?

Введение в API прогрессивных веб-приложений под названием Cache Storage, где сервисные работники могут загружать и хранить полную версию приложения - Angular University

CacheStorage - это механизм хранения в браузерах для хранения и получения сетевых запросов и ответов. Он хранит пару объектов запроса и ответа. Запрос как ключ и ответ как значение.

Объект Request используется для отправки HTTP-запроса по сети, сеть отвечает объектом Response с сервера. Теперь они образуют пару, как вопрос и ответ.

Допустим, мы запрашиваем изображение с сервера:

// question: Please, server I need an image `image.png`
const req = new Request('/image.jpg)

Мы получим такой ответ:

// Server: Hello Request, see the image you requested. Much please doing buisness with you
const res = new Response(new Blob([data]),{type:'image/jpeg'})
// here, res contains the image data

req и res будут храниться в кэше следующим образом:

Cache
-------------
key | value
-------------
req | res

Итак, чтобы получить объект Res Response, мы будем ссылаться на него из req, который является его ключом.

log(Cache[req])

Он вернет req.

Если мы запрашиваем конкретную страницу:

const req1 = new Request('/index.html')

Ответ будет таким:

const res1 = new Response(body);

Теперь кеш будет обновлен:

Cache
-------------
key | value
-------------
req | res
req1 | res1 

CacheStorage и сервис-воркеры

CacheStorage не является API-интерфейсом Service Worker, но он позволяет SW кэшировать сетевые ответы, чтобы они могли предоставлять автономные возможности, когда пользователь отключен от сети. Вы можете использовать другие механизмы хранения в ПО. Например, IndexedDB, база данных SQL в браузере, может использоваться для хранения сетевых ответов.

CacheStorage можно использовать в потоке DOM не только в потоке Worker:

<script>
    if('caches' in window) {
        caches.open('cache_name').then((cache) => {
            // ...
        }).catch((err) => {
            // ...
        })
    }
</script>

Хотя CacheStorage был создан для обеспечения возможности хранения сетевых запросов и ответов SW, как мы говорили ранее, его также можно использовать в DOM (окно, iframe) в качестве утилиты хранения.

Например, мы можем хранить пароль пользователя, ключ или состояние приложения и извлекать их, когда захотим.

кеширует объект

Объект caches (экземпляр CacheStorage) используется для доступа к CacheStorage, для извлечения, хранения и удаления объектов.

Объект кэшей является глобальным, он находится в объекте окна.

Чтобы определить, поддерживает ли ваш браузер CacheStorage, запустите приведенный ниже код:

<script>
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            // ...
        }).catch((err) => {
            // ...
        })
    }
</script>

Объект caches хранит и поддерживает список созданных кешей. Для управления этим кэшем объект caches имеет множество методов, помогающих ему выполнять свои работы по обслуживанию. Ниже мы рассмотрим способы.

Методы CacheStorage API - Создание кеша

Мы можем создать кэш, вызвав метод open (…). Метод open принимает строку, содержащую имя открываемого кеша.

Когда метод open вызывается с именем кеша, он ищет имя кеша в своем списке кешей и возвращает кеш со ссылкой на имя кеша. Если Cache не найден, метод open создает Cache и возвращает его дескриптор.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
    }
</script>

Примечание. CacheStorage API основан на обещаниях. Они возвращают PRomise, поэтому вы должны решить и отклонить их, чтобы получить их статус.

Выше мы попытались открыть cache_name Cache, вызвав метод open в объекте caches с именем кеша в качестве параметра. Метод возвращает Promise, он разрешает, если кэш успешно создан, или отклоняет, если операция не удалась.

Мы использовали метод then для получения разрешенного значения. Разрешенное значение - это дескриптор кэша.

Методы CacheStorage API - Проверка кеша

Мы можем проверить, существует ли объект Cache, вызвав метод has () с именем объекта кеша.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.has('cache_name').then((bool) => {
            l(bool)
        }).catch((err) => {
        })        
    }
</script>

Он возвращает Promise и логическое значение bool, логическое значение true, если Cache было найдено, или false, если Cache не был найден.

Например:

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            alert(cache.add)
        }).catch((err) => {
            l(err)
        })
        caches.has('cache_name').then((bool) => {
            l(bool) // true
        }).catch((err) => {
        })
        caches.has('cache_name_1').then((bool) => {
            l(bool) // false
        }).catch((err) => {
            l(err)
        })
    }
</script>

Мы добавили код в наш предыдущий раздел. Мы создали cache-name кеш, затем вызвали метод has (), передав имя кеша cache-name. Будучи ранее созданным, он будет регистрировать true. Затем мы вызвали метод has, передавая cache_name_1, это будет регистрировать false, потому что мы не создали cache_name_1 кеш.

Методы CacheStorage API - Удаление кеша

Мы можем удалить уже существующий кеш с помощью метода удаления. Создадим такой кеш:

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            alert(cache.add)
        }).catch((err) => {
            l(err)
        })
    }
</script>

Мы можем удалить cache-name Cache, вызвав метод delete () и передав имя кеша cache-name:

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
        caches.delete('cache_name').then((bool) => {
            l(bool) // true
        }).catch((err) => {
        })
    }
</script>

Он возвращает обещание, которое разрешается с помощью логического значения. Если логическое значение истинно, это означает, что кэш был успешно удален. Если это удастся, у нас будет true авторизованных в нашей консоли.

Если мы вызовем метод has после вызова delete, он обязательно зарегистрирует false, потому что не найдет кеш, потому что он был удален вызовом delete.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache.add)
        }).catch((err) => {
            l(err)
        })
        caches.delete('cache_name').then((bool) => {
            l(bool)
        })
        caches.has('cache_name').then((bool) => {
            l(bool) // surely logs false if `delete(...)` succeeds.
        }).catch((err) => {
        })
    }
</script>

Методы CacheStorage API - Список объектов кэша

Чтобы просмотреть созданные объекты кэша, мы используем метод ключей для вывода списка всех объектов кэша в нашем хранилище.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
        caches.open('cache_name-1').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
        caches.open('cache_name-2').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
        caches.keys().then(function(caches) {
            l(caches);
        });
    }
</script>

Он возвращает Promise, который разрешается в массив объектов Cache.

Методы CacheStorage API - получение объекта Cache из пула

Мы можем получить объект Cache, вызвав метод match, передав имя Cache.

Этот метод возвращает Promise, которое разрешается в Response или undefined, если Cache не найден.

<script>
    const l = console.log

    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache)
        }).catch((err) => {
            l(err)
        })
        caches.match('cache_name').then((cache)=>{
            l(cache)
        })
    }
</script>

В следующем разделе мы рассмотрим методы Cache API.

Методы API кеширования

Кэш - это то, что возвращает CacheStorage, когда завершает создание кэша через CacheStorage.open(). Имея такой доступ к кэшу, мы можем хранить ресурсы внутри экземпляра. Получив доступ к объекту Cache, мы можем сохранить, удалить или получить объект Response из Cache.

Первый метод, который мы рассмотрим:

Метод Cache API - Добавление в кеш

Одна из важных операций, которые мы выполним, - это сохранение пары запросов и ответов в кэш. Мы используем следующие методы для выполнения операции: add, addAll и put. Все они возвращают обещание и прикрепляют обратный вызов только для отклонения обещания.

добавить. Он принимает объект запроса или строку URL-адреса и извлекает данные по сети, ответ на сетевой запрос кэшируется со строкой URL или объектом запроса в качестве ключа.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            cache.add('/')
        }).catch((err) => {
            l(err)
        })
    }
</script>

Здесь мы запросили кэширование главной страницы нашего приложения. Cache выполнит выборку переданного / URL-адреса и кэширует ответ с / URL-адресом, являющимся ключом.

Откройте DevTools и нажмите «Приложение». Щелкните вкладку CacheStorage и щелкните cache_name. Вы увидите, что правая сторона пуста.

ОК, перейдите на вкладку «Сеть», вы увидите только нашу страницу во вкладке «Сеть» в качестве единственной загруженной страницы. Теперь загрузите страницу выше, чтобы запустить код.

Вы увидите запись, появившуюся на вкладке «Сеть». Вы увидите, что это журнал /, это строка URL, полученная из сети при запуске cache.open('/'). Это подтверждает наше утверждение о том, что метод add выполняет сетевой запрос для извлечения ресурса переданного ему объекта URL / Request.

Теперь перейдите в Application ›CacheStorage› cache_name и щелкните значок обновления. Вы увидите, что http://127.0.0.1:8080/ появится справа.

Это показывает URL-адрес и ответ был сохранен в кэше.

addAll Это похоже на add, за исключением того, что здесь он принимает строки URL или объекты запроса в массиве и выполняет add () для каждого из них. Если выборка одной из строк URL или объектов запроса в массиве завершается неудачно, вся операция addAll завершается (завершается).

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            l(cache)
            cache.addAll(['/','/faq','/contact','/about'])
        }).catch((err) => {
            l(err)
        })
    }
</scrip>

Приведенный выше код попытается получить и кэшировать главную страницу /, страницу часто задаваемых вопросов /faq, страницу контактов /contact и страницу информации /about. Если не удается получить свой ресурс, возможно, из-за сбоя сети или из-за того, что ресурс не найден, ни один из других ресурсов не будет кэширован, даже если они были успешными.

положить. Это совершенно другой путь. Это позволяет нам указать как строку URL-адреса или объект запроса, так и объект ответа.

<script>
    const l = console.log
    if ('caches' in window) {
        fetch('/faq').then(function(response) {
            return caches.open('cache_name').then(function(cache) {
                return cache.put('/faq', response)
            })
        })
    }
</script>

В приведенном выше коде мы извлекаем ресурс /faq страницы часто задаваемых вопросов с помощью функции fetch(), затем решаем открыть кеш cache_name и добавить строку URL /faq в качестве ключа к объекту ответа с помощью метода put().

Метод Cache API - Удаление из кеша

Мы можем удалить кешированный запрос из кеша, это делается с помощью метода удаления.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            cache.add('/')
            cache.delete('/')
        }).catch((err) => {
            l(err)
        })
    }
</script>

В приведенном выше коде мы создаем запись / с помощью add () и удаляем, вызывая delete () и передавая строку /.

Посмотрев на DevTools ›Appliaction› CacheStorage ›cache_name, мы увидим, что / исчезнет.

Cache API Method - получение всех ваших ключей

Чтобы вернуть все ключи, созданные в нашем кеше, мы вызываем метод keys(). Этот keys() метод возвращает Promise, который разрешается в массив Cache ключей.

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            cache.addAll(['/', '/faq', '/contact'])
            cache.keys().then(function(keys) {
                l(keys); // Array [Request, Request, Request]
            });
        }).catch((err) => {
            l(err)
        })
    }
</script>

Метод возвращает обещание, которое преобразуется в массив ключей запроса кэша.

Метод Cache API - match / matchAll

match Мы можем найти элемент в кеше, используя cache.match (…)

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            cache.addAll(['/', '/faq', '/contact'])
            cache.match('faq').then((response)=> {
                l(response)
            })
        }).catch((err) => {
            l(err)
        })
    }
</script>

В приведенном выше коде мы кэшировали запросы /, /faq и /contact. Затем мы попытались получить ответ /faq из кеша. Если строка передается для соответствия (...), она будет преобразована в объект запроса, а соответствующий ответ будет извлечен из кеша.

matchAll Бывают случаи, когда совпадение возвращает много совпадений, cache.match (…) возвращает только первое совпадение в кеше. Чтобы вернуть много результатов, мы будем использовать cache.matchAll (…):

<script>
    const l = console.log
    if ('caches' in window) {
        caches.open('cache_name').then((cache) => {
            cache.addAll(['/', '/faq', '/contact'])
            cache.matchAll('faq').then((response)=> {
                l(`Results: ${response}`)
            })
        }).catch((err) => {
            l(err)
        })
    }
</script>

Заключение

В этом посте мы много рассказали о CacheStorage. Мы начали с изучения того, что CacheStorage делает с его взаимоотношениями с Service worker, и, наконец, мы разделили каждый API, объясняя на примерах, как они работают и как их использовать.

Мы увидели мощь CacheStorage, и вам решать, когда использовать ее в своих интересах.

Если у вас есть какие-либо вопросы относительно этого или чего-либо, что я должен добавить, исправить или удалить, не стесняйтесь комментировать, напишите мне или напишите мне

Спасибо !!!

Учить больше