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
- Open
-
@beets no error in console
-
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) }