Динамически запускать файл HTML5 Cache Manifest? - PullRequest
Новая
       8

Динамически запускать файл HTML5 Cache Manifest?

21 голосов
/ 28 декабря 2010

Я использую новую функциональность манифеста кэша из HTML5 для кэширования моего веб-приложения, чтобы оно работало в автономном режиме. Содержимое кэшируется автоматически, когда страница загружается со следующим HTML-элементом: 

<html lang="en" manifest="offline.manifest">

Это отлично работает. Тем не менее, я хочу дать своим пользователям возможность того, что они хотят кэшировать контент в автономном режиме. Итак, вот мой вопрос:

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

Например, что-то вроде этого (с использованием jquery):

---------------- index.html -------------- 

<head>
 <meta charset="utf-8" />

 <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
 <script type="text/javascript" src="Main.js"></script> 

</head>
<body>

 <button id="cacheButton">Cache Page</button>

</body>
</html>

--------- Main.js --------- 

$(document).ready(
 function()
 {
  $('#cacheButton').click(onCacheButtonClick);
 }
)

function onCacheButtonClick(event)
{
 console.log("Setting Offline Manifest");
 $('#htmlRoot').attr("manifest","offline.manifest");
}

------------- offline.manifest ------------- 

CACHE MANIFEST

#version .85

#root
index.html
scripts/main.js

#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js

Обычно, когда нажимается кнопка, я динамически устанавливаю атрибут manifest элемента html. Это работает (в том смысле, что элемент установлен), но не заставляет браузер затем кэшировать страницу.

Есть предложения?

Ответы [ 4 ]

10 голосов
/ 12 апреля 2013

Вы динамически запускаете кэширование, добавляя iframe, который указывает на пустую страницу, содержащую фактический манифест кэша.

offline.html: 

<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
    <title></title>
</head>
<body>
</body>
</html>

Убедитесь, что index.html добавленманифест кеша.Затем просто добавьте что-то вроде: 

<iframe src="offline.html" width="0" height="0">

в document.body динамически для запуска кэширования.

5 голосов
/ 09 января 2011

После многих недель, проведенных с автономным кешированием, ответ - нет, вы либо кешируете, либо не кешируете, установка атрибута кеша на стороне клиента не имеет никакого эффекта.

Вы могли бы рассмотреть предложение альтернативного URLдля версии с кэшированием помните, что страница также неявно кэшируется как «основная запись».

Я затрудняюсь понять, почему вы хотите отключить кеширование jquery, поскольку оно, вероятно, будетслужил с очень длинным истечением в любом случае.

Вы можете рассмотреть возможность автономного хранения в качестве альтернативы.Сохраните текст скриптов и вставьте их в DOM при загрузке.Если не кэшировать выборку с использованием Ajax и внедрить ответ, так как создание тега сценария с помощью src не загрузит сценарий.

0 голосов
/ 16 октября 2017

Одна вещь, которую вы должны помнить.Не кэшируйте сам файл манифеста.Поэтому все, что вам нужно сделать, это обновить страницу другой версией файла манифеста в соответствии с вашим выбором пользователя.Вы можете динамически генерировать сам файл манифеста, любое изменение этого файла приведет к обновлению кэша.Лучшая практика для запуска повторного кэширования - изменить версию файла манифеста, например, с: # ver1 - 01/01/2018 на # ver2 - 02.02.2008.Поэтому вы не можете изменить его на стороне клиента, но вы можете сделать это на стороне сервера.

0 голосов
/ 14 августа 2015

В зависимости от вашего приложения может оказаться возможным использовать модифицированную версию подхода @ schibum, разбив ваше приложение на «мини» приложения, а затем кэшируя подразделы в iframe. Рассмотрим этот пример:

index.html 

<html manifest="indexx.manifest">
<head>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="index.js"></script>
    <title>Index</title>
</head>
<body>
    <ul>
        <li><a href="1.html">One</a>
        <li><a href="2.html">Two</a>
        <li><a href="3.html">Three</a>
    </ul>
    <iframe id="if" />
</body>
</html>

index.manifest 

CACHE MANIFEST
# 3
index.html
jquery-2.1.4.min.js 
index.js

index.js 

$( document).ready(function() {
    var pages = ['1.html','2.html','3.html'];
    var LoadNext = function() {
        alert(pages[0]);
        page = pages.shift();
        alert(page)
        if ( page !== undefined ) {
            console.log("Attempting to load " + page);
            $('#if').attr('src', page)
        } else {
            console.log("All done");
        }
    };
    $('#if').load(function() {
        console.log("Finished loading");
        LoadNext()
    });
    LoadNext(); 
});

1.html 

<html manifest="1.manifest">
<head>
    <title>One</title>
</head>
<body>
    <img src="1.jpg" width="50%">
</body>
</html>

1.manifest 

CACHE MANIFEST
# 2
1.html
1.jpg

{2,3}. {Html, manifest} следует за формой {html, manifest}.

В результате каждая подстраница (1.html, 2.html, 3.html) имеет свой собственный манифест и, таким образом, кэшируется независимо. index.html имеет свой собственный (минимальный) манифест, поэтому кэширование, безусловно, не так сильно загружает сеть, как кэширование всего приложения. Затем javascript отвечает за предварительную загрузку каждой страницы в iframe для ее кэширования.

Загрузите index.html, затем перейдите в автономный режим и посмотрите, как работают подстраницы. тоже.

Очевидным недостатком является то, что любые ресурсы, совместно используемые страницами (например, jQuery), должны быть избыточно кэшированы.

...