How can I hide the url when my site is “added to home screen” on IOS?

Code Help
1

I want the toolbar/url to ide when the site is added to Home Screen on iOS. An example of this is plus.FIFA.com. I will add a screenshot with a visual example of another site.

IMG_2042
IMG_20422160×1620 108 KB

https://replit.com/@BluebayStudios/Ples-nerd

2

You need to turn your website into a Progressive Web App (PWA):
https://web.dev/explore/progressive-web-apps

And use a meta tag for this:

3

How can I add a “meta tag”?

4

You add in the <head> section of your html, like:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
5

Still seems to lead to safari… Is there something else I need to change?

6

Did you create the manifest?

You can check tutorial on youtube this is a rapid one that sums it up what you need:

But there are more detailed PWA tutorial too.
(This video talks about service worker but that is optional)

8

Is there source code I can view? Also, will this require my repl to include node?

9

You can follow this guide:

I don’t have any code to this unfortanelly but the guide is pretty elusive

10

Thanks for your help. I followed this guide: How to build a PWA from scratch with HTML, CSS, and JavaScript

1 Like
11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.