Facing 404 Errors for PNG Icons in My PWA Deployment – Need Help!

0
26
Asked By TechyTaco123 On

Hey all! I'm in the process of deploying my PWA app called bleu-smart-flow using Lovable for hosting, and I've hit a snag. My custom domain is managed through Ionos, and here's the breakdown:

✅ **What works:**
- The `manifest.json` file is accessible at `https://bleusmartflow.com/manifest.json`.
- My icon files (`icon-192x192.png`, `icon-512x512.png`) are in the correct location in the `public` folder on GitHub. You can check it out [here](https://github.com/bobbyleu1/bleu-smart-flow/tree/main/public).

❌ **What's not working:**
- When I try to access the icons at `https://bleusmartflow.com/icon-192x192.png` and `https://bleusmartflow.com/icon-512x512.png`, I keep getting 404 errors. This issue persists despite having the right repo structure, confirmed manifest references, multiple redeploys, cache cleared, and even testing in Incognito a few times. I've also added `_redirects` for SPA fallback.

🔥 **Why it matters:**
- This situation is causing problems with PWABuilder detecting my icons, which is crucial for getting my app on the App Store and for displaying install banners properly.

🤔 **Here are my questions:**
1. Has anyone faced similar issues with Lovable's deployment pipeline overlooking PNG files in the public directory?
2. Is there a workaround to ensure these assets deploy correctly, or should I switch to Vercel or Firebase Hosting to avoid these static asset issues?
3. Any tips or best practices for handling PWA deployment challenges like this?

Thanks a ton for your insights! I really want to get this PWA up and running on the App Store soon!

2 Answers

Answered By CoderChick99 On

It seems Lovable may have trouble serving static files from the public folder, even though your manifest works. I'd start by checking the build output to ensure those icon files are included in the deployed version. You might also want to try using absolute paths for the icons in the manifest, like `https://bleusmartflow.com/public/icon-192x192.png`, to see if that resolves any path issues. If not, you could check Lovable's settings for static file serving—there might be an issue there. If all else fails, switching to Vercel or Firebase Hosting could be a smart move; they're reliable for PWAs and handling static assets. Good luck!

CuriousCoder85 -

Did you ever figure it out? I'm having a similar experience.

Answered By DevGuru_42 On

I had a similar issue, and using the Vite PWA plugin helped a lot with the deployment. Just make sure to read the docs thoroughly and update everything related to the service worker for it to work without issues. Give it a try!

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.