DEV Community

Cover image for Show DEV: Open your favorite website in a standalone window on iPhone
Michael Puckett
Michael Puckett

Posted on

2

Show DEV: Open your favorite website in a standalone window on iPhone

Check it out here: https://standalone-web-wrapper.firebaseapp.com

Did you know can use the share sheet in Safari and select "Add to Home Screen" to save an app-like icon on the home screen? This functionality has existed pretty much since the iPhone launched.

Personally, I've not used this feature much over the years because it always just launched a fresh instance of the site in a new tab in Safari.

In the last few months, however, I noticed that some websites will open in their own window, not in Safari. Opening the site again will return you to that window, at the same place you left off.

Wow! A much better experience.

But not every website has opted in to this standalone experience. For good reason -- you lose your native browser frame with all the navigation buttons. This isn't so bad most of the time, because you can still swipe from the edge of the screen to go back/forward, just like in Safari.

The trick is to add a manifest.json file with the "display" property set to "standalone".

For me, I wanted the New York Times to work this way. I suspect that news sites might not be opting in because ad blockers still apply to the standalone experience, but anyway I'm not a fan of the NYT native app.

iFrames won't work due to cross-site restrictions, so I set up a meta redirect on the page that will instantly show the desired site. This will show the site name at the top of the page, which wastes a little bit of space, but allows access to Reader View.

I also made the app icon and app icon name customizable.

Let me know what sites you use it for!

https://standalone-web-wrapper.firebaseapp.com

https://github.com/michaelcpuckett/standalone-web-wrapper

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay