Disable Text Selection and Touch Callouts in a PWA on iOS
Because an installed PWA is really just a web app running in a browser, there are some browser behaviors that we may not want in our app, if we're going for a more "native" feel.
We'll first disable the ability to select text in our app by setting the css user-select options to none.
Then, we'll disable the iOS long-press "callout" menu by setting -webkit-touch-callout to none.
Instructor: [00:01] We have a PWA installed and running in standalone mode on iOS, but the user can still long press and select text that we may or may not want them to be able. Also, if the user long presses on a link, the page will navigate, but a touch call-out will pop up as well.
[00:20] These two both happen because our app is fundamentally a web app running in a web browser. In app.css, we can remove both of those behaviors by setting two settings on the body. First, remove the selection option by setting user select to none for our webkit, [indecipherable] , MS, and the base.
[00:42] Next, we can disable the touch call-out pop-up menu by setting webkit touch call-out to none. Then when we build and run that and run it on the iPhone again, now the text isn't selectable, and long pressing the link directs to the profile page and doesn't bring up the call-out menu.