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

Я использую новую функцию манифеста кэша из 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

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

Любые предложения?

Ответ 1

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

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

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

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

Ответ 2

Вы динамически запускаете кеширование, добавляя 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 динамически запускать кеширование.

Ответ 3

В зависимости от вашего приложения может быть возможно использовать модифицированную версию подхода @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} следуют 1. {html, manifest} форме.

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

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

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

Ответ 4

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