오프라인 웹 앱로드시 1 분 미만의 콘텐츠가 사라집니다.

iOS 4.3에서 5.0까지이 사실을 확인했습니다. 하나의 HTML 파일과 CSS 및 JS와 같은 일부 애셋 (캐시 매니페스트에 모두 있음)을 의미하는 간단한 오프라인 웹 앱을 만드는 경우 오프라인 모드 (비행기 모드에서 테스트) - BUT을 추가 할 때 이러한 응용 프로그램을 홈 화면에 표시하고 전체 화면 모드로 열면 초기 내용 인 이 표시되고 모든 항목이 사라지고 (페이지가 흰색으로 변함)이 0.5 초 이상 지나면 내용이 다시 나타납니다.오프라인 웹 앱로드시 1 분 미만의 콘텐츠가 사라집니다.

잘 알고 있고 유용한 오프라인 웹 앱인 Glyphboard을 iOS 홈 화면에 추가하고 몇 번 실행하면이 사실을 알 수 있습니다. 로드 할 때마다 흰색 플래시 효과가 나타납니다.

이것은 큰 문제입니다. 이는 앱의 자연 스러움을 없애고 앱의 성능과 버그가 최적화되어 있지 않다는 인상을주기 때문입니다.

이 문제에 대한 보고서를 찾으려고했지만이 문제와 관련이없는 iOS 4.3 JavaScript 렌더링 엔진 실패에 대한 소문과 오해가 있습니다. 그러나 iOS 버전 3에서 나는 하얀 플래시를 결코 보지 못한다고 기억하고있다.

출처

2011-09-23 mislav

렌더링 중에 화면 및 기타 아티팩트를 지우는 것은 HTML의 점진적 특성으로 인해 HTML 렌더링의 일반적인 문제입니다. 개념은 브라우저가 가능한 한 조기에 가능한 한 자주 그려야하며 스타일/스크립트/콘텐츠를 사용할 수있게 렌더링해야한다는 것입니다. 마크 업에는 일부 콘텐츠 나 스크립트를 사용할 수있을 때까지 모든 렌더링이 지연되는 문제가있을 수 있습니다. 당신은 이미지 크기에 따라 동적 높이를 가지고 있지만 그렇지 마크 업이나 CSS에서 이미지 크기를 설정

: 경우에 발생할 수 있습니다.
레이아웃은 테이블을 기반으로하며 CSS에서는 'table-layout : fixed'를 사용하지 않습니다.
HTML이 document.write()와 함께 인라인 스크립트를 사용합니다.
콘텐츠를 표시하거나 수정하는 일종의 onLoad() 함수가 있습니다.
외부 스타일 시트에 연결합니다.
캐싱 할 수없는 외부 콘텐츠를 사용 중이거나 캐싱을 사용하지 않도록 설정했습니다.
404를 반환하거나 오프라인에서 사용할 수없는 외부 콘텐츠를 사용 중입니다.

IOS 버전 테스트 사이에 HTML/CSS가 변경 되었습니까?

출처

2011-10-13 05:19:36 SpliFF

아니요, HTML/CSS가 변경되지 않았 음을 의미합니다. 그러나 외부 자산에 대한 좋은 지적. CSS를 인라인하는 것이 도움이되는지 알 수 있습니다. – mislav

문제를 해결 했습니까? 그 원인을 알아 냈어? –

여기에서 일어나는 일은 iOS가 메인 메뉴에 추가 될 때 페이지에서 스크린 샷을 찍는 것입니다. 그런 다음이 스크린 샷은 응용 프로그램로드 중 표시됩니다 (WebKit로드). WebKit은 페이지 렌더링을 시작하고 페이지 자체는 페이지 콘텐츠가 즉시 사용 가능하지 않도록 구성되어 페이지 콘텐츠가 아직없는 경우 렌더링 된 페이지 인 흰색 플래시를 만듭니다.

JS/CSS를 빌드하여 특정 HTML 뷰를 빠르게로드 한 다음 백그라운드에서 나머지 리소스를 지연로드/빌드하도록하여 특정 레벨의 문제를 해결할 수 있습니다. 또한 iOS에서 페이지에서 사용하는 기본 스크린 샷 대신 사용자 정의로드 스크린을 설정할 수 있습니다. 당신이 자신에게 앱 화면을 캡처 한 다음이 같은 것을 할 수있는 경우

미정 :

<body style="background: white url('my-initial-loading-screen.png')" />

를 ... 그리고 확인하십시오 이미지를 사용할 수 있으며 매니페스트에서 온다.

또는 더 나은 것은 외부 리소스가 필요없는 (단순히 일반 HTML) 화면로드로 브라우저에 아무것도로드 할 필요가 없다는 것을 알 수 있습니다.

출처

2011-09-24 10:10:16

iOS가 스크린 샷을 찍고 처음에는 실행하고 나중에 다시 그려야합니다. 그럼에도 불구하고 페이지 전체를 정리해야하는 이유는 무엇입니까? 또한 글리프 보드 (문제를 명확하게 보여주는)에는 "사과 터치 시작 이미지"와 배경색이 모두 있으며 여전히 사라져 있습니다. 이 문제를 방지하기 위해 페이지에서 아무 것도 할 수없는 것처럼 보입니다. – mislav

나중에 페이지를 다시 그리면 페이지가 자바 스크립트 코드, HTML 레이아웃 또는 콘텐츠와 관련 될 수 있습니다.이를 피할 수 있을지 확신합니다. 브라우저가 리플 로우를 유발한다는 것은 https://code.google.com/speed/articles/reflow.html –

나는 이것이의 사용에 의해 발생하는 것으로 나타났습니다 : 최소한의 페이지로

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">

, 나는 사과 터치 시작 이미지 및 페이지 내용 내가 사용하는 경우 사이의 흰색 플래시를 얻을 뷰포트 메타 태그. 태그를 꺼내면 플래시가 작동하지 않습니다.

프로그래밍 방식으로 태그를 설정하여 문제를 해결할 수 있습니다.

출처

2012-07-05 18:08:09

오프라인 웹 앱로드시 1 분 미만의 콘텐츠가 사라집니다.

답변

관련 문제