Ручное кеширование файлов в JavaScript - PullRequest
0 голосов
/ 22 апреля 2019

У меня есть проект на основе HTML, который работает с мультимедиа с других веб-сайтов, который встраивает изображения / песни / видео, используя их прямые ссылки. До сих пор система работала идеально, но я хотел бы внести изменения: поскольку зрители обращаются ко многим ресурсам неоднократно, казалось бы, более оптимальным является их кеширование контролируемым образом, поэтому всякий раз, когда появляются определенные носители, вам не нужно чтобы получить его с исходного сервера каждый раз. Я никогда не делал этого раньше, поэтому я не знаю, если и как это можно сделать.

Чтобы использовать упрощение: у меня есть встроенная фотография с именем "image.png" внутри элемента изображения, которая будет отображаться при каждом открытии сайта. В настоящее время это просто определяется как:

<img scr="https://foo.bar/image.png">

Работает отлично! Однако я хочу убедиться, что при доступе к моему сайту вам не нужно каждый раз извлекать это изображение из foo.bar: вы сохраните его в локальном каталоге после его однократной загрузки, из которого скрипт может извлекать и работать с файлом самостоятельно. Например, для Firefox этот подкаталог будет находиться в вашем каталоге ~/.mozilla/firefox/my_profile. В идеале его можно определить с использованием фиксированного имени, поэтому независимо от того, с какого URL открывается веб-сайт, он использует один и тот же путь кэш-памяти вместо каждого зеркала проекта, создающего свое собственное.

Во-первых, мой скрипт должен сказать браузеру загрузить https://foo.bar/image.png и сохранить его в этом подкаталоге кеша. После этого потребуется сгенерировать ссылку для встраивания ее непосредственно из этого подкаталога, поэтому используемый мной URL теперь будет иметь следующий вид:

<img scr="file://path_to_cache/image.png">

Как мне сделать эти две вещи, совместимыми с популярными веб-браузерами? В качестве бонуса было бы полезно узнать, могу ли я ограничить размер этого каталога кэша, поэтому, как только он достигнет, скажем, 100 МБ, самые старые элементы будут удалены, чтобы остаться под этим размером.

1 Ответ

0 голосов
/ 22 апреля 2019

Вы можете альтернативно добавить кеширование в файл .htaccess вашего сервера. Этот сайт объясняет, как: https://www.siteground.com/kb/leverage-browser-caching/ Однако это не кэширует изображение на компьютере пользователя, оно кэшируется на сервере для более быстрого ответа.

Вы можете использовать сервисных работников для кэширования изображений на компьютере пользователя. https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...