A Checklist of Issues for Progressive Web Apps and How to Fix Them | Hacker News Reader

A Checklist of Issues for Progressive Web Apps and How to Fix Them

heltweg.org

7 pointsrhazn8 comments

Disabling the "bounce" scroll effect and pull-to-refresh can now be done with the `overscroll-behavior` CSS property, which is supported on all recent browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-...

I would avoid using `touch-action` to accomplish this as it also affects other behavior on touch devices.

1 and 3 seem like strange advice. I don’t know much about PWAs. Why would you want to do these? 1 seems user-hostile, and 3 would make your app feel broken on iOS.

In general, these might not be the best solutions - they are just the ones I found. I am always happy to learn and want to keep that post as a living list of fixed for myself in the future (so if anyone knows a better way, please let me know!). I am also not a native iOS user, so I might miss adherence to the iOS UX standards.

The reason for 1 was actually my mother who tried the PW, had her phone set to a different language and always triggered the translation overlay ;).

It's not really that the solutions are bad but that a lot of these "problems" are fundamental parts of the UI, and shouldn't be taken away without a compelling reason.

You may well have compelling reasons, I assume each of these is a response to an issue you encountered. But since the article doesn't present them, it leaves the audience scratching their heads and comes off as needlessly disempowering your users. These definitely aren't things you should be doing by default in every PWA, as "checklist" would imply.

If I installed a PWA and I couldn't pull to refresh or select text, I would probably uninstall it.

The points you made about specific issues were good though, like notches, favicons, and mimetypes.

That's fair, the thought behind the checklist name was more for me to go through to double check if I need these... And only apply them if I feel it makes sense. But that's obviously lost if you read the list as not-me.

I'll take that feedback with me for future note-to-self style blogs :).

Wait you want to prevent text selection? Why?? I hate it when sites actively try to prevent me from performing normal operations on web pages.

it’s weird to me that these items are all just presented as problems to be solved, instead of justifying why this (often default, expected behavior) is a problem for progressive apps in particular.

Yeah, I should have probably explained most a bit more in detail.

I don't think highlight text when long pressing on UI elements is expected behavior for an app though. It would be for a website but can feel out of place in an installed app.

I think any content the user might care to select should be selectable, even if native apps often neglect this feature.

But I agree that UI elements (eg. buttons) should not be selectable. Even in regular websites, it's best to set the whole gamut of appropriate CSS properties so they behave like native UI widgets. I also make sure to set `cursor: pointer` on anything clickable.

Web apps that just set an onclick handler on a div and call it done are a pet peeve of mine.

Reply on news.ycombinator.com