iPhone Web App 启动画面延迟

Question

我已经构建了一个 iPhone Web 应用程序，并完成了使其看起来像本机应用程序的所有步骤：应用程序图标、防止滚动、防止选择、使用基于触摸的 js 方法等。但是，我遇到了困难与闪屏。

我尝试过使用清单文件缓存的 320x460 PNG 和 JPEG。启动图像确实出现，但仅在应用程序启动并显示白屏几秒钟后出现。因此，在应用程序完成启动之前，启动画面实际上只显示了几分之一秒。

我不明白为什么它没有立即加载启动画面。我知道它被清单缓存，因为它在没有互联网连接的情况下加载。我之前读到，在 DOM 准备好之前，启动画面不会显示，所以我猜这就是问题所在，但我不知道如何解决它。

Answer 1

您是否将其与启动链接一起插入？

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

我还发现，有时当我对 iPhone Web 应用程序进行更改时，我必须完全删除主屏幕上的链接，并在正确更新某些元素之前再次执行添加它的过程 - 即使在更新缓存清单之后。

Answer 2

如果您使用的是 Sencha Touch，我发现问题与此相关。
为了尝试计算出屏幕尺寸，他们添加了 2 个巨大的 500 毫秒延迟。这会额外增加一秒钟的加载时间。

我已成功将 iPhone 上的时间缩短至 50 毫秒。我不确定代码的功能如何，但它对我有用。

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

这将为您的 Web 应用程序添加一个启动屏幕。以下是 iPad 和 iPhone/iPod Touch 所需的尺寸，其中也包括状态栏区域。

iPad 横向 – 1024 x 748

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

iPad 纵向 – 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 显示屏高分辨率）

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

如果创建与 iPad 兼容的 Web 应用程序建议同时使用横向和纵向尺寸。

编辑：此外，您需要清除缓存并重命名文件（例如，从 image.png 到 new_image.png），以便设备加载新的[正确]图像。第一次启动网络应用程序时，它不会显示启动屏幕，甚至第二次也不会显示启动屏幕，具体取决于您是否有足够的时间将所有必需的文件加载到设备的内存中。