r/PWA

I've been looking into the PWA on iOS and was struggling to get rid of the bottom chin gap until I started deleting stuff and made some realisations: stuff that people recommend here is broken if it used to work.

This is my testing zone: https://pwa-test.xefig.workers.dev/

Essentially

iOS standalone mode (display: standalone in the manifest) automatically extends your app edge-to-edge, behind the status bar and home indicator, using the page's background colour.

You do not need viewport-fit=cover or manual safe area handling to achieve this.

The minimal setup that gives you a true fullscreen PWA on iOS:

// manifest.json
{
  "display": "standalone",
  "background_color": "#1a1a2e"
}

<!-- index.html -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="PWA Test" />
<meta name="theme-color" content="#1a1a2e" />
<link rel="manifest" href="/manifest.json" />

iOS fills the status bar and home indicator areas with background_color from the manifest (falling back to the page background).

Content goes into the safe zone automatically.

Working on a basic utility website and about to add PWA functionality. Pretty confident it’s the right call for what I’m building, but iOS limitations are making me nervous.

For this who have shipped PWAs.. what are the absolute must-dos and what are the mistakes to avoid?

Cold start on an installed iOS PWA (Add to Home Screen, standalone): after the dark system splash (the app has a black background) I get a very short full-screen white flash before the app goes dark again.

On Android (installed PWA / Chrome) I don’t see this, looks fine. So I’m treating this as an iOS / WebKit standalone problem for now.

Stack: Next.js App Router, Tailwind for dark UI, production build + service worker (I’m not judging this off next dev alone).

I’m assuming a mix of WebKit’s default background before first paint, FOUC until CSS/Tailwind is in, and on app routes extra JS + auth before the shell matches.

I’ve been pointed at inline/critical dark background on html/body, color-scheme: dark, manifest theme_color/background_color but did not find a solution atm.

Thank you.

Looking for a bullet proof sw upgrade procedure. I mean especially IOS. Safari is such s b***tch . Biggest problem is that URL based redirect to new sw. seems to bo no option in IOS sandbox: Id my best but still not perfect: https://bbpilott.app

Looking for a bullet proof sw upgrade procedure. I mean especially IOS. Safari is such s b***tch . Biggest problem is that URL based redirect to new sw. seems to bo no option in IOS sandbox: I did my best but still not perfect: https://bbpilot.app

We are hiring a Full Stack Developer (3+ years of experience) for a part-time contract opportunity.

⚙️ Technical Stack

• Backend: Node.js (required)
• Frontend: React (required)

🌎 Work Environment

• Fully remote role
• Work closely with US-based clients
• English-speaking team
• Daily stand-up meetings
• Availability aligned with EST working hours is required

💡 Bonus Experience

• Exposure to object-oriented programming languages such as Python, C#, or Java

💰 Engagement Details

• Part-time contract position
• Hourly rate: $40–$50, depending on experience
• Efficient and straightforward hiring process

🤝 What We Value

• Ability to adapt quickly to new tools and workflows
• Strong collaboration mindset
• Clear and effective communication skills
• Experience working in team-based environments