PWA white screen on IOS [Fixed]



  • Hello! deploy this PWA on netlify https://realstateapp.netlify.app everything works perfect on PC or android, but on IOS devices it doesn’t work at all, screen goes blank.

    Test on

    • Iphone 7 Plus IOS 13.6 with Safari and Chorome
    • Ipad mini 4 IOS 13.3 with Safari and Chrome

    quasar.conf.js

        pwa: {
          workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
          workboxOptions: {}, // only for GenerateSW
          manifest: {
            name: 'Real State App',
            short_name: 'Real State App',
            description: 'Real state app',
            display: 'standalone',
            orientation: 'portrait',
            background_color: '#ffffff',
            theme_color: '#027be3',
            start_url: './index.html',
            icons: [
              {
                src: 'icons/icon-128x128.png',
                sizes: '128x128',
                type: 'image/png'
              },
              {
                src: 'icons/icon-192x192.png',
                sizes: '192x192',
                type: 'image/png'
              },
              {
                src: 'icons/icon-256x256.png',
                sizes: '256x256',
                type: 'image/png'
              },
              {
                src: 'icons/icon-384x384.png',
                sizes: '384x384',
                type: 'image/png'
              },
              {
                src: 'icons/icon-512x512.png',
                sizes: '512x512',
                type: 'image/png'
              }
            ]
          }
        },
    

    index.template.html

    <!DOCTYPE html>
    <html>
      <head>
        <title><%= productName %></title>
    
        <meta charset="utf-8" />
        <meta name="description" content="<%= productDescription %>" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta
          name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
        />
    
        <link
          rel="icon"
          type="image/png"
          sizes="128x128"
          href="icons/favicon-128x128.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="96x96"
          href="icons/favicon-96x96.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="icons/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="icons/favicon-16x16.png"
        />
        <link rel="icon" type="image/ico" href="favicon.ico" />
        <!-- iPhone XR -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-828x1792.png"
        />
        <!-- iPhone X, XS -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
          href="icons/apple-launch-1125x2436.png"
        />
        <!-- iPhone XS Max -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
          href="icons/apple-launch-1242x2688.png"
        />
        <!-- iPhone 8, 7, 6s, 6 -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-750x1334.png"
        />
        <!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)"
          href="icons/apple-launch-1242x2208.png"
        />
        <!-- iPhone 5 -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-640x1136.png"
        />
        <!-- iPad Mini, Air, 9.7" -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-1536x2048.png"
        />
        <!-- iPad Pro 10.5" -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-1668x2224.png"
        />
        <!-- iPad Pro 11" -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-1668x2388.png"
        />
        <!-- iPad Pro 12.9" -->
        <link
          rel="apple-touch-startup-image"
          media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
          href="icons/apple-launch-2048x2732.png"
        />
      </head>
      <body>
        <!-- DO NOT touch the following DIV -->
        <div id="q-app"></div>
      </body>
    </html>
    
    


  • Have you tried to also deploy it as a SPA? The problem might be elsewhere.



  • @beets Yes, in SPA mode it also fails.



  • @beets Now that I remember after adding firebase cloud function for push notifications to project I happen this.

    firebase-messaging-sw.js

    // Give the service worker access to Firebase Messaging.
    // Note that you can only use Firebase Messaging here, other Firebase libraries
    // are not available in the service worker.
    importScripts('https://www.gstatic.com/firebasejs/7.17.2/firebase-app.js')
    importScripts('https://www.gstatic.com/firebasejs/7.17.2/firebase-messaging.js')
    
    // Initialize the Firebase app in the service worker by passing in
    // your app's Firebase config object.
    // https://firebase.google.com/docs/web/setup#config-object
    firebase.initializeApp({
      messagingSenderId: '',
      projectId: '',
      apiKey: '',
      appId: ''
    })
    
    // Retrieve an instance of Firebase Messaging so that it can handle background
    // messages.
    const messaging = firebase.messaging()
    


  • @alhidalgodev If the project fails in SPA, then I don’t think it has anything to do with the service worker. You can do simple debugging on iOS chrome by:

    • Open chrome://inspect and hit start logging
    • Open your webapp in a new tab/window
    • Switch back to the inspect tab and see if there are any errors


  • @beets no error in console 😞



  • @alhidalgodev

    revert back to the last commit/version of your working app, and work/compare your way back to the latest non working version to see what causes the white screen.



  • Fixed, the problem is the messaging.usePublicVapidKey() firebase method, I was not verifying that the browser supports this function.

    // src/boot/firebase.js
    let messaging = {}
    
    if (firebase.messaging.isSupported()) {
      messaging = firebase.messaging()
      messaging.usePublicVapidKey(process.env.PUBLIC_VAPI_KEY)
    }
    

Log in to reply