iPhone Web App 闪屏延迟

Posted 2023-03-10

【中文标题】iPhone Web App 闪屏延迟

【英文标题】：iPhone Web App splash screen delay

【发布时间】：2010-10-06 21:29:42

【问题描述】：

我已经构建了一个 iPhone 网络应用程序并完成了所有步骤以使其看起来像一个原生应用程序：应用程序图标、防止滚动、防止选择、使用基于触摸的 js 方法等。但是，我有启动画面的艰难时期。

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

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

【参考方案1】：

你是用启动链接插入的吗？

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

我还发现，有时当我对我的 iPhone 网络应用程序进行更改时，我必须完全删除主屏幕上的链接并重新添加它，然后才能正确更新某些元素 - 即使在更新了缓存清单。

【讨论】：

是的，我正在使用该代码。而且我还注意到我必须删除主屏幕上的应用程序并再次添加它（除其他外）以缓存新版本。问题不是什么大问题 - 它只是一个令人烦恼的赠品，它不是一个原生应用程序。

@ryanashcraft：只是不要在启动画面中包含应用版本号，并且永远不要更改它，这样用户就永远不会知道......

【参考方案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 的独立模式下，我们确切地知道屏幕的高度。

现在可以了。

希望这会有所帮助。

【参考方案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 像素（高分辨率视网膜显示屏）

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

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

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