6

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

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

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

ответ

4

Вы вставляете его со стартовой ссылкой?

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

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

+0

Да, я использую этот код. И я также заметил, что мне нужно было удалить приложение на домашнем экране и добавить его снова (между прочим), чтобы получить кеширование новой версии. Проблема заключается не в том, что большая часть сделки - это просто беспокойство по поводу того, что это не родное приложение. – ryanashcraft

+0

@ryanashcraft: просто не включайте номер версии приложения в заставку и никогда не меняйте его, поэтому пользователи никогда не узнают ... – awe

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

Это будет сделано пока.

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

2

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

IPad Пейзаж - 1024 х 748

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

IPad Портрет - 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 Portrait - 640 x 960 пикселей (Retina Display с высоким разрешением)

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

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

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

Смежные вопросы