DEV Community

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

Posted on

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

Top comments (0)