So I am deveoloping a Vite React Webapp and deploying it on Fly.io. It works on every Browser except on IOs. There every time i enter the website, my site goes blank. Now sadly i cant read the console on my IPhone therefore I have no Information about the error.
However this thread (React + Vite App Not Loading on iOS When Wrapped with Cordova (White Screen Issue)) provided a solution that fixes the issue but created a new one. My service worker stop working.
I have already tried to edit vite.config.ts
:
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
devOptions: {
enabled: true,
},
workbox: {
skipWaiting: true,
clientsClaim: true,
globPatterns: ['**/*.{js,css,html,png,jpg,svg,json,webmanifest,ico}'],
},
includeAssets: ['icons'],
strategies: 'injectManifest',
srcDir: 'src/sw',
filename: 'sw.ts',
injectManifest: {
swDest: 'dist/sw.js',
},
manifest: {
name: 'WTT - APP',
short_name: 'WTT',
description: 'An app to track user data',
theme_color: '#161618',
start_url: '/',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: '/icons/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/icons/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: "/icons/apple-touch-icon.png",
sizes: "180x180",
type: "image/png",
}
],
}
})
],
base: '/',
publicDir: 'public',
build: {
minify: 'terser',
}
})
I tried to implement solutions that helped othe people, like specifying base: '/'
and using build.minify = 'terser'
. These solutions didn’t work out either. What am I missing here?
Yann Bernard is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.