PWA white screen on IOS [Fixed]

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>

beets

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

alhidalgodev

@beets Yes, in SPA mode it also fails.

alhidalgodev

@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()

beets

@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

@beets no error in console

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.

alhidalgodev

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)
}