Bug 255858

Summary: Feature Request: "Add to Home Screen" Smart Banner
Product: WebKit Reporter: Dan Fabulich <dan>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ik, tomac, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: Unspecified   
OS: Unspecified   

Description Dan Fabulich 2023-04-24 00:52:06 PDT
iOS Safari supports Smart Banners, allowing web sites a better way to link to the App Store.

> Smart App Banners vastly improve users’ browsing experience compared to other promotional methods. In iOS, Smart App Banners provide a consistent look and feel that users come to recognize. They trust that tapping the banner will take them to the App Store and not a third-party advertisement. They appreciate unobtrusive banners at the top of a webpage, instead of a full screen that interrupts their experience with the web content. And with a large and prominent Close button, a banner is easy to dismiss. When the user returns to the webpage, the banner doesn’t reappear.

Many web apps offer an excellent app-like experience when the user adds the web app to their home screen, but the Add to Home Screen (A2HS) feature is extremely difficult to find. Users first have to click the Share button, which is hidden when the URL bar is collapsed, then they have to scroll the Share Sheet, which many users don't realize is scrollable.

There should be a similar Smart Banner for the Add to Home Screen (A2HS) feature.
Comment 1 Dan Fabulich 2023-04-24 01:01:50 PDT
This is particularly important on iOS Safari 16, where users have to A2HS in order to subscribe to push notifications, but most users don't know how to A2HS, so they can't figure out how to subscribe.

What we need is an unobtrusive dismissable on-screen button for A2HS, like a Smart Banner.

As it stands today, I have to teach users how to use A2HS in order to explain to users how to subscribe to my push notifications.

> 1. To subscribe to push notifications, first, scroll all the way up, to reveal the Share button, which looks like this: 📤
> 2. Tap the Share button, then scroll down to find the "Add to Home Screen" button.
> 3. Tap Done in the upper right corner.
> 4. Tap on the web app on your Home Screen.
> 5. Finally, click the Subscribe button in the Home Screen web app.
Comment 2 Radar WebKit Bug Importer 2023-05-01 00:53:19 PDT