Mamy aplikację internetową, która umożliwia użytkownikom przeglądanie plików SVG. Te obrazy SVG zwykle zawierają obrazy, które są ładowane przy użyciu względnego adresu URL. Ponieważ chcemy, aby była to aplikacja internetowa na iPada, chcemy również, aby była ona dodawana do ekranu głównego użytkownika iPada i aby była buforowana przez pamięć podręczną aplikacji HTML 5, aby użytkownik mógł przeglądać te obrazy SVG i powiązane obrazy w trybie offline.Dlaczego obrazy w SVG nie zawsze są ładowane z pamięci podręcznej aplikacji, gdy są wcześniej buforowane na iPadzie?
Po załadowaniu naszej aplikacji z ikony strony głównej iPada manifest manifestu aplikacji jest odczytywany poprawnie, a wszystkie przywoływane zasoby są buforowane. Problem występuje, gdy użytkownik zaczyna korzystać z aplikacji w trybie offline. Podczas korzystania z aplikacji pliki SVG są dodawane i usuwane ze strony DOM. W tym czasie niektóre obrazy w SVG nie mogą być załadowane z pamięci podręcznej aplikacji, mimo że są zdecydowanie obecne i przechowywane w pamięci podręcznej. Zamiast tego do serwera wysyłane jest żądanie obrazu, co oczywiście kończy się niepowodzeniem, ponieważ użytkownik nie jest już online.
Co ciekawe, ten problem wydaje się nie występować podczas nawigacji na stronie Safari na iPadzie. Wygląda na to, że dotyczy on pełnego widoku aplikacji internetowej, ale nie mogę tego zagwarantować.
mogę odtworzyć to dość łatwo za pomocą tej strony HTML:
<!DOCTYPE html>
<html manifest="testfiles.manifest">
<head>
<title>Test</title>
<script src="Javascript/jquery-1.7.1.js" type="text/javascript"></script>
<!-- Remove the browser chrome when the page is loaded from a homescreen icon -->
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<h1>Simple SVG caching test</h1>
<h2>Basket ball SVG</h2>
<p>
<span id="remove">Remove</span> | <span id="add">Add</span>
</p>
<p>
<span id="show">Show</span> | <span id="hide">Hide</span>
</p>
<p>
<span id="reload">Reload</span>
</p>
<embed width='360' height='510' src='TestFiles/Basketball.svg' />
<script type="text/javascript">
$(function()
{
$("#remove").click(function()
{
$("embed").remove();
});
$("#add").click(function()
{
$("<embed width='360' height='510' src='TestFiles/Basketball.svg' />").appendTo("body");
});
$("#show").click(function()
{
$("embed").show();
});
$("#hide").click(function()
{
$("embed").hide();
});
$("#reload").click(function()
{
location.reload(true);
});
})
</script>
</body>
</html>
Ten SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="340"
height="340">
<image
width="340"
height="340"
xlink:href="Basketball.png"
x="0"
y="0" />
</svg>
Ten obraz, który jest określany przez SVG:
I ten plik manifestu:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
I przez następujące kroki:
- Otwórz Safari i przejdź do lokalizacji pliku reprodukcja html (gościmy go na serwerze 2008/IIS w systemie Windows)
- Dodaj stronę do ekran główny za pomocą przycisku "Dodaj do ekranu głównego".
- Close safari i wyczyścić pamięć podręczną safari
- załadować stronę z nowo dodana zakładka
- Poczekaj aż strona jest całkowicie buforowane. Zwykle około 5-10 sekund, ale można dołączyć do niektórych zdarzeń pamięci podręcznej aplikacji, aby wylogować się z postępów.
- Wyłącz WiFi (lub co kiedykolwiek pomocą połączenia używanego)
- załadować stronę z nowo dodana zakładka
- Zauważ, że strona wygląda prawidłowo pamięci podręcznej. Użyj przycisków dodawania i usuwania. Powinieneś zauważyć dość szybko, że po dodaniu za pomocą przycisku "dodaj" na stronie. Zasób obrazu w SVG nie zawsze jest ładowany z pamięci podręcznej aplikacji, mimo że jest wyraźnie zapisany w pamięci podręcznej.
Gdy wystąpi problem, powinieneś zobaczyć coś jak na zrzucie ekranu poniżej
Ja już sprawdzone pewne oczywiste rzeczy:
- Zastosowanie pamięci podręcznej manifestu ma prawidłowa mime type
- Manifest jest pobierany
- Resourc es przywoływane w manifeście są buforowane poprawnie
moje pytania są następujące:
- Czy ktoś wie dlaczego tak się dzieje?
- Czy są jakieś obejścia tego problemu?
Zalogowałem się jako błąd w Apple, więc zaktualizuję to pytanie za pomocą wszelkich opinii, które mogę uzyskać od nich!
Dzięki!
Andy.
Czy aplikacje na stronie głównej systemu iOS nadal używają innej wersji WebKit do Safari na iOS, czy też to naprawiły? Co do obejść: czy buforowanie JS i/lub HTML jest prawidłowe? Czy możesz zakodować swoje obrazy jako adresy URL danych? – robertc
Hej, dzięki za sugestie, JS i HTML są poprawnie buforowane, tylko obraz wewnątrz SVG na stronie HTML, który nie jest pobierany z pamięci podręcznej aplikacji. Jeśli chodzi o aplikacje na stronie głównej iOS i Safari na iOS, nie wiem. Zgadywałem, że użyli nieco innej wersji lub między nimi było coś innego, ale nie wiem co. Czy jest jakiś sposób, aby się tego dowiedzieć (nie jestem masowym pro iOS!). Chcielibyśmy, jeśli to możliwe, uniknąć adresów URL danych, ponieważ byłoby to nieefektywne, gdybyśmy mieli wiele plików SVG z tym samym obrazem (może to być tło lub nagłówek). – Andy
Właściwie, zastanawiając się nad tym, czy możemy uzyskać wersję webkita z nagłówków żądania? ... Będę musiał rzucić okiem, gdy będę miał trochę czasu! – Andy