Задержка заставки iPhone Web App - PullRequest
Новая
       27

Задержка заставки iPhone Web App

6 голосов
/ 07 октября 2010

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

Я пробовал 320x460 PNG и JPEG, кэшированные с файлом манифеста.Заставка появляется, но только через несколько секунд после запуска приложения с белым экраном.Итак, на самом деле заставка появляется только за долю секунды до того, как приложение завершает запуск.

Я не могу понять, почему оно не загружает заставку сразу.Я знаю, что он кешируется манифестом, потому что он загружается без подключения к интернету.Я читал ранее, что всплеск не появляется, пока DOM не будет готов, поэтому я предполагаю, что это проблема, но я не знаю, как ее исправить.

Ответы [ 3 ]

4 голосов
/ 25 октября 2010

Вы вставляете его со ссылкой для запуска? 

<link rel="apple-touch-startup-image" href="startup-graphic.png" />

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

2 голосов
/ 10 марта 2012

Это добавит заставку в ваше веб-приложение.Ниже приведены размеры, которые вам понадобятся как для iPad, так и для iPhone / iPod Touch, включая область строки состояния.

iPad Landscape - 1024 x 748 

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad Portrait -768 x 1004 

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

Портрет iPhone / iPod Touch - 320 x 480 (стандартное разрешение) 

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

Портрет iPhone / iPod Touch - 640 x 960 пикселей (Retina Display с высоким разрешением) 

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

При создании совместимости веб-приложения для iPad рекомендуется использовать размеры как альбомной, так и книжной ориентации.

РЕДАКТИРОВАТЬ : Кроме того, необходимо очиститькэшируйте и переименуйте файл (например, из image.png в new_image.png), чтобы устройство загрузило новое [правильное] изображение.Он не будет отображать заставку при первом запуске веб-приложения, и, возможно, даже не второй, в зависимости от того, достаточно ли у вас времени для загрузки всех необходимых файлов в память устройства.

2 голосов
/ 06 апреля 2011

Если вы используете Sencha Touch, я обнаружил, что проблема связана с этим. Чтобы попытаться определить размер экрана, они добавили 2 огромные задержки в 500 мс. Это добавляет дополнительную секунду ко времени загрузки.

Мне удалось сократить время до 50 мс на iPhone. Я не уверен, насколько хорошо работает код, но он работает для меня. 

if (Ext.is.iOS && Ext.is.Phone) {
    Ext.Viewport.init = function(fn, scope) {
        var me = this,
            stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2,
            body = Ext.getBody();

        me.updateOrientation();

        this.initialHeight = window.innerHeight;
        this.initialOrientation = this.orientation;

        body.setHeight(stretchSize);

        Ext.defer(function() {
            me.scrollToTop();
            if (fn) {
                fn.apply(scope || window);
            }
            me.updateBodySize();
        }, 50);
    };
}

Код сначала проверяет, что мы на iPhone. Таким образом, я только изменил функциональность для iPhone. У меня нет доступа к другим устройствам для тестирования.

Я думаю, что даже это можно сделать лучше. Например, в автономном режиме на iPhone мы точно знаем, насколько высоко экран.

Пока подойдет.

Надеюсь, это поможет.

...