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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

iPad Пейзаж - 1024 x 748

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

iPad Portrait - 768 х 1004

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

Портрет iPhone/iPod Touch - 320 х 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), чтобы устройство загрузило новое [правильное] изображение. Он не будет отображать заставку при первом запуске веб-приложения, и, возможно, даже не второй, в зависимости от того, достаточно ли у вас времени для загрузки всех необходимых файлов в память устройства.