Заставка Reactjs PWA не работает на iOS

#javascript #html #reactjs #progressive-web-apps

#javascript #HTML #reactjs #progressive-веб-приложения

Вопрос:

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

Технические характеристики:

iPhone 8
iOS 12.2

Приложение создано с помощью Reactjs и имеет включенный service worker

Я попытался удалить / переустановить PWA, очистить данные браузера и перезапустить свое устройство.

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="TimeCard application.">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1,viewport-fit=cover"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <meta name="theme-color" content="#2A2B3A"/>

    <meta name="apple-mobile-web-app-capable" content="yes" >
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="icon" sizes="192x192" href="%PUBLIC_URL%/app_icon_192.png">
    <link rel="icon" sizes="512x512" href="%PUBLIC_URL%/app_icon.png">
    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/app_icon_192.png">
    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/app_icon.png">

    <link href="%PUBLIC_URL%/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    <link href="%PUBLIC_URL%/splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    <link href="%PUBLIC_URL%/splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />

    <link href="%PUBLIC_URL%/splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    
    <link href="%PUBLIC_URL%/splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    <title>TimeCard</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Ответ №1:

См.: Советы и рекомендации по PWA

iOS Чтобы сделать ваше прогрессивное веб-приложение более похожим на нативное на устройствах iOS, вы можете добавить пользовательскую заставку, которая отображается при запуске вашего приложения пользователями.

…

1. Я сделал в основном все, но все еще не работает:/ Возможно, проблемы вызывает сервисный работник. Мне придется отключить его и повторить попытку.

2. Вы следовали инструкциям в сообщении и использовали рекомендуемые инструменты для создания своих изображений и разметки?

3. Это сработало для меня, раньше это не работало, потому что 2 моих изображения были неправильного размера. Вы должны точно следовать размерам, чтобы он работал.