Additional UI Techniques

[00:00:00]
>> Maximiliano Firtman: Pull to Refresh, but you've seen this sometimes you pull to refresh and it reloads the page, but maybe you wanna reload your content, does it make sense? So you have your own Pull to Refresh, but the browser has its own Pull to Refresh, so does it make sense?

[00:00:21]
If you want, you can remove it. With CSS overscroll behavior, with that code you are disabling Pull to Refresh. This is just for the case when your PWA has its own Pull to Refresh.
>> Maximiliano Firtman: And that applies actually on Android only, to be honest. Because on a PWA, you cannot pull to refresh on a PWA.

[00:00:50]
Maybe on Safari, another browser you can, but not on a PWA, okay? Another idea I have for you, use the new View Transition API to transition between page changes. If you're a single page application or a multi-page application, you can create really nice animations between pages. It's not directly related to PWAs, but it makes your PWA feels more native, so you can animate page changes.

[00:01:17]
And another link to another course, you can check the course on web app patterns. Where we implement that View Transition API on a single page application and also on a multi-page application. So that will improve a lot the feeling that this is an app. For more information on that topic, check the course practical web app patterns, okay?

[00:01:41]
System fonts, this is in case you really want your app to feel like a native app. So this is like a hacky font family list that will try to use on every platform the default font that you have on native apps. So then we have the apple-system one, of course, if it's not there, it will move to the next one BlinkMacSystemFont, Segoe UI, that's windows, Roboto, that's Android, Ubuntu.

[00:02:11]
So, then this would try to push as much as possible the native font, instead of seeing a web font. Of course you can use web fonts and apply your font, okay? But in case you want the whole UI to feel more native, and of course, you don't need to apply this to the whole body, you can actually apply it to some parts.

[00:02:31]
It's just a hack to to make it more app-like user interface. Use the web, share API, because now we are on a standalone application. What if the user is seeing something on the screen that wanna share that with someone else? On a browser, you copy and paste the URL, but now we are at PWA, so where is the URL?

[00:02:55]
Can I copy the URL? The answer is it depends on the platform, some platform will let you, there is a menu on Android. On some Android devices, you may have a notification, which is called a static notification, it's complicated. Well, you can provide your own Share button in your page.

[00:03:15]
And for that, you have navigator.share, I'm not sure if you have ever used that. On the normal web, it's okay, you can use it, but it's not wow. But in a PWA, it's really important because it's a way that you have for the user to get content out.

[00:03:32]
And it will trigger the native share dialogue on Android, iOS, MacOS, I think that's all because of Windows, I'm not sure if you have a native share dialog. So in fact, there is a can share method as well to check if you can share or not. Again, just quick ideas, pieces of ideas that I have for you here.

[00:03:56]
Disable Touch Callout, this is for iOS only, you can see it's even a prefix -webkit. What's a touch-callout? Is when you touch and long press a link, it typically opens a menu. Which is maybe okay, but if you're doing a single-page application, it's also applying the menu on a JavaScript-based link, which is kind of weird.

[00:04:23]
Well, you can disable that with webkit-touch-callout none on your links. Again, we are trying to make this more app-like and less web-like, okay? So you can check the course also now the link a tour of web capabilities, Frontend Masters. There are lots of examples there on how to use the sensors and hardware APIs.

[00:04:49]
Where you will be able to integrate your PWA with a platform, geolocation game pads, Bluetooth, web serial and so on, okay? Ideas to make a better PWA. Reduce motion, I mean, this is for the web as well, but it's more important when you are in the app. For example, on MacOS, you can enable Reduce Motion, the same on iOS, to the same on Android and Android is Remove animations.

[00:05:21]
So some users are disabled in animations, but it's not gonna work for your web app automatically. It works automatically for native animations, but not for the web. For the webs, you need to use media queries. Use the @media prefers-reduced-motion, reduce and disable, or your transitions and animations, you need to do it manually.

[00:05:41]
This is important because it's not gonna happen automatically for the user, on native apps it happens automatically. Persistent storage requests, no one asked about that, but we're installing assets, do we have a limit? Remember, with the service worker, we're installing assets, do we have a limit? And for how long those assets will be there?

[00:06:02]
Well, the answer is complicated, but something that I wanna emphasize right now is that by default, those assets don't live in a persistent storage. Which means the browser can, at any time, delete everything. So all the assets that you downloaded, including the service worker, when there is a storage pressure, for example, that means that you don't have enough space on your phone, the browser will say, well, you know what?

[00:06:32]
No, you web app, goodbye. And that includes all your data, all your assets, we don't want that, that doesn't happen with native apps, most of the time. I mean, the native apps, if you have it, you have it, it should be there, okay? If you want the same thing, you can, but you need to explicitly request persistent storage.

[00:06:55]
Fortunately for us, all the PWA browsers, Safari on iOS, Chrome on Android, Chrome on desktop, Firefox. Actually, Firefox will do something different, so let's get it out. Will grant you persistent storage if you install the PWA. So if you install the PWA, when you ask for it, it will say, okay, yeah, you got it.

[00:07:18]
And then if there is a storage pressure, it's not going to delete your data, even if you're using two gigabytes. Firefox always ask to the user. You see a prompt saying, hey, do you wanna grant persistent storage permission to the user, yes or no? You just need to call explicitly this.

[00:07:43]
And another link, if you wanna get more information about the persistent storage, quotas, and how that works, check the course, Web Storage APIs, also at Frontend Masters.