No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    PWA white screen on IOS [Fixed]

    Help
    3
    8
    1870
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • alhidalgodev
      alhidalgodev last edited by alhidalgodev

      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>
      
      
      1 Reply Last reply Reply Quote 0
      • beets
        beets last edited by

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

        alhidalgodev 2 Replies Last reply Reply Quote 0
        • alhidalgodev
          alhidalgodev @beets last edited by

          @beets Yes, in SPA mode it also fails.

          beets 1 Reply Last reply Reply Quote 0
          • alhidalgodev
            alhidalgodev @beets last edited by

            @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()
            
            1 Reply Last reply Reply Quote 0
            • beets
              beets @alhidalgodev last edited by

              @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
              alhidalgodev 1 Reply Last reply Reply Quote 0
              • alhidalgodev
                alhidalgodev @beets last edited by

                @beets no error in console 😞

                dobbel 1 Reply Last reply Reply Quote 0
                • dobbel
                  dobbel @alhidalgodev last edited by dobbel

                  @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.

                  1 Reply Last reply Reply Quote 0
                  • alhidalgodev
                    alhidalgodev last edited by

                    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)
                    }
                    
                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post