Hey there, let’s tackle that frustrating white screen issue on iOS. I’ve debugged similar Vue PWA problems before, so let’s break down the most likely fixes based on your code and common iOS quirks:

1. Fix Start URL & History Mode Misalignment #

Your router uses history mode, and your manifest’s start_url is set to index.html—this is a common culprit for iOS PWA white screens. iOS handles PWA routing differently, and specifying index.html can clash with history mode’s path resolution.

Adjust your vue.config.js:

pwa: {
  // ... other settings
  manifestOptions: {
    start_url: './', // Use relative root instead of index.html
    // Or use '/' if your app is deployed at the domain root
  },
}

Also, double-check that process.env.BASE_URL in your router matches your actual deployment path (e.g., if deployed to a subfolder, ensure it’s set correctly in vue.config.js via publicPath).

2. Troubleshoot Service Worker Compatibility #

You’re using InjectManifest with a custom Firebase messaging service worker. iOS Safari has stricter SW rules, and custom SWs can easily cause caching issues or compatibility errors.

Testing steps:

• Temporarily switch to workboxPluginMode: 'GenerateSW' in vue.config.js to rule out custom SW problems. If the white screen disappears, your firebase-messaging-sw.js likely has iOS-incompatible code (e.g., unsupported Workbox features or missing fallback logic).
• Clear iOS’s stubborn cache: Go to Settings > Safari > Clear History and Website Data, then reload the app and re-add it to the home screen.

3. Fix Router Guard Cookie Access Issues #

Your route guard relies on window.$cookies—but in iOS (especially PWA standalone mode), cookie access can be restricted, and $cookies might not be initialized when the guard runs.

Add safeguards to your router:

router.beforeEach((to, from, next) => {
  // Ensure cookies are available before proceeding
  if (!window.$cookies) {
    return next(); // Skip auth check temporarily until cookies load
  }

  // ... rest of your guard logic
});

Also, verify your cookies have the correct attributes (e.g., SameSite=None and Secure) if your app uses HTTPS—iOS blocks cookies without these in cross-origin or standalone PWA contexts.

4. Ensure Full Transpilation for iOS Safari #

You’re transpiling Vuetify, but other dependencies (like Firebase) might use ES6+ syntax that old iOS Safari versions don’t support. Unhandled syntax errors will crash the app and cause a white screen.

Update vue.config.js:

transpileDependencies: ['vuetify', 'firebase', 'firebase-messaging'], // Add all modern dependencies

Also, set explicit browser targets in your Babel config (create babel.config.js if missing):

{
  "presets": [
    ["@vue/cli-plugin-babel/preset", {
      "targets": {
        "safari": "11" // Cover older iOS Safari versions
      }
    }]
  ]
}

5. Verify iOS PWA Meta Tags #

Double-check your public/index.html has all required iOS-specific meta tags to ensure the PWA loads correctly in standalone mode:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="AppName">
<link rel="apple-touch-icon" href="<%= BASE_URL %>icons/apple-touch-icon-180x180.png">

Critical Debugging Step: Check Safari Console Errors #

The most important thing you can do is connect your iPhone to Safari on a Mac and inspect the app’s console. White screens almost always come from uncaught JavaScript errors—this will tell you exactly what’s breaking (e.g., missing variable, SW registration failure, syntax error).

1. On your iPhone: Go to Settings > Safari > Advanced > Enable Web Inspector
2. On your Mac: Open Safari, go to Develop > [Your iPhone’s Name] > [Your App’s URL]
3. Check the Console tab for red error messages—this will point you directly to the problem.

内容的提问来源于stack exchange，提问作者Quốc Khánh Bùi