Kullanıcıların SVG lezyonu görmenizi sağlayan web uygulaması var. Bu SVG'ler genellikle göreceli bir url kullanılarak yüklenen görüntüleri içerir. Bu bir iPad 'web uygulaması' olmak istiyorum gibi biz de iPad kullanıcının Ana ekrana eklenmesini istediğiniz ve HTML 5 uygulama önbelleği tarafından önbelleğe için kullanıcının bu SVG açıklığı ve ilgili görüntüleri çevrimdışı olarak görüntülemek böylece. Bizim uygulama iPad ana sayfası simgesinden yüklendiğindeÖnceden iPad'de önbelleğe alındığında neden SVG'lerde görüntüler uygulama önbelleğinden yüklenmez?
, uygulama önbelleği tezahür doğru okunur ve başvurulan kaynakların tümünü önbelleğe alınır. Sorun, kullanıcı uygulamayı çevrimdışı kullanmaya başladığında ortaya çıkar. Uygulamanın kullanımı sırasında SVG'ler eklenir ve sayfa DOM'den kaldırılır. Bu sırada, SVG'deki bazı görüntüler kesinlikle mevcut ve önbelleğe alınmış olsalar bile uygulama önbelleğinden yüklenemez. Bunun yerine, görüntü artık çevrimiçi olmadığı için sunucuya bir istekte bulunulduğu açıktır.
İlginçtir ki, iPad'deki bir sayfada gezinirken bu sorun oluşmuyor. Tam sayfa web uygulaması görünümüne özgü gibi görünüyor, ancak bunu garanti edemiyorum.
Ben oldukça kolay bu HTML sayfasını kullanarak bu üretebilir:
<!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>
Bu 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>
SVG tarafından başvuruda bulunulan Bu görüntü:
Ve bu bildirim dosyası:
CACHE MANIFEST
CACHE:
TestFiles/Basketball.svg
TestFiles/Basketball.png
Javascript/jquery-1.7.1.js
Ve ardından bu adımlarla:
- Açık safari ve (biz Windows 2008/IIS sunucuda barındırmak) üreme html dosyasının konumuna gidin
- sayfa ekle Ana Ekran 'Ana Ekrana Ekle' düğmesini kullanarak.
- Kapat safari ve sayfa tamamen önbelleğe kadar safari önbelleği
- Yük yeni
- bekleyin imi eklenmiş gelen sayfa temizlemek. Genellikle yaklaşık 5-10 sn, ancak bazı uygulama önbellek olaylarına ekleyerek ilerlemenin kesilmesi istenir. sayfa doğru önbelleğe görünüyor o
- Bildirimi imi yeni eklenen gelen wifi (ya da ne hiç kullandığınız bağlantının anlamına gelir)
- Yük sayfası kapatın
- . Ekle ve kaldır düğmelerini kullanın. Oldukça hızlı bir şekilde, sayfadaki 'ekle' düğmesini kullanarak eklediğinizde dikkat etmelisiniz. SVG'deki resim kaynağı, önbelleğe alınmış olsa bile, uygulama önbelleğinden her zaman yüklenmez.
- Uygulama önbellek tezahür doğru vardır: Sorun oluştuğunda,
aşağıdaki ekran görüntüsü gibi bir şey göreceksiniz
- Uygulama önbellek tezahür doğru vardır: Sorun oluştuğunda,
Zaten bazı bariz şeyler kontrol ettim MIME Tür
- bilen var mı: manifest'te başvurulan es
Benim sorulara
Bunu elma ile ilgili bir hata olarak günlüğe kaydettim, bu yüzden bu sorunun cevabını onlardan alabilirim!
Teşekkürler!
Andy.
iOS ana sayfası uygulamaları hala iOS Safari için WebKit'in farklı bir sürümünü kullanıyor mu, yoksa bunu düzelttiler mi? Çözümler gelince: JS ve/veya HTML önbelleğe alma doğru mu? Resimlerinizi veri URL'leri olarak kodlar mısınız? – robertc
Hey, önerileriniz için teşekkürler, JS ve HTML hem önbelleğe alma, hem de HTML sayfasındaki SVG içindeki uygulama önbelleğinden alınmayan görüntü. iOS ana sayfası uygulamaları ve iOS safari ile ilgili olarak aslında bilmiyorum. Biraz farklı bir versiyon kullandıklarını veya aralarında farklı bir şey olduğunu tahmin ediyordum ama ne olduğunu bilmiyorum. Öğrenmenin bir yolu var mı (kitlesel bir iOS yanlısı değilim!). Eğer mümkünse aynı görüntüye sahip birden fazla SVG'imiz varsa (arka plan veya başlık belki de) verimsiz olacağından veri URL'lerini denemek ve önlemek isteriz. – Andy
Aslında bunu düşünürsek, webkit sürümünü isteğin başlığından alabilir miyiz? ... Biraz zamanım olduğunda bakmam gerekecek! – Andy