3 ms·

Nice and clean! As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA. I realized pretty quickly that the

by mvkel 3y ago

Nice and clean! As a fellow web slinger, I recently went down the road of trying to build a simple veggie tracker as a PWA. I realized pretty quickly that the PWA world still feels like a hacky mess, with weird CSS rules to make it feel more, but never fully, native. Most of the issues from way back in the pre-App-Store days remain. For example, double tapping on the screen triggers a zoom, and there's no way to disable it. After a full week trying to make my PWA not feel clunky, I resorted to making my first native iOS app with the help of chatty G. It was surprisingly easy. It took two days to build, and because it's native, everything just works. PWAs as a platform have so much potential, this app being a great example. It's frustrating that developments aren't further along than they are. I'd think Google especially would have interest in supporting such a platform

NorwegianDude 3y ago
> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.
- beretguy 3y ago
  > That's objectively BS and 100 % skill issue on your side. Why so aggressive?
  - fodkodrasz 3y ago
    It is 100% a skill issue (in communications skills)
- mvkel 3y ago
  It's not a viewport meta tag. It's { touch-action: manipulation; }. And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example. Thanks for your... encouragement?
  - anon373839 3y ago
    Try: * { touch-action: manipulation; } While you're at it: * { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } Then, you can override these if needed for specific elements. Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like: html { height: 100svh; overflow: hidden; overscroll-behavior: none; position: fixed; } body { height: 100svh; width: 100vw; overflow: hidden; touch-action: none; position: fixed; } The idea is to never let html or body exceed the size of the viewport, lock them down completely, and then enable overflow scrolling only in the divs that need it. This also eliminates pull-to-refresh when the app is used inside the browser. (If you want PTR functionality in the app, of course you can watch for overscroll on a particular div and implement it yourself. But your app skeleton will stay put.)
    - mvkel 3y ago
      Thanks for sharing these! Locking down the size of the viewport did the trick
olzhasar 3y ago
Thanks for the feedback! This a hobby project for now, so I tried to do it in a cheapest way possible, and PWA looked like a good approach, as there is no need to buy developer subscription. Have you used Swift to develop your IOS app or any cross-platform solution?
- mvkel 3y ago
  Makes total sense! I basically did whatever chatgpt told me, which was Swift with UIKit, and Storyboards for the interface design. Took me a bit to learn some of the conventions and syntax, but they've come a long way in making it much more intuitive for web dev folks.
anon373839 3y ago
> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That can be disabled: https://stackoverflow.com/questions/59732074/disable-double-tap-zoom-on-safari-ios-13 https://stackoverflow.com/questions/59732074/disable-double-... Actually, all of the layout and gesture jank problems in web apps can be fixed, but it does take some effort. I’m tempted to put in the time to open-source a reference for this, but then I cynically wonder if Apple would then find a way to break it. ;)

by mvkel 3y ago

NorwegianDude 3y ago

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That's objectively BS and 100 % skill issue on your side. A simple "disable zoom PWA" search on google would definitely give a bunch of sites telling you how to do it. It's super simple, just add a viewport meta tag.

beretguy 3y ago
> That's objectively BS and 100 % skill issue on your side. Why so aggressive?
- fodkodrasz 3y ago
  It is 100% a skill issue (in communications skills)
mvkel 3y ago
It's not a viewport meta tag. It's { touch-action: manipulation; }. And it doesn't work consistently. Very easy to break it if you double tap on the background and not somewhere in the text, for example. Thanks for your... encouragement?
- anon373839 3y ago
  Try: * { touch-action: manipulation; } While you're at it: * { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } Then, you can override these if needed for specific elements. Since the "frame" of a native app isn't wiggly and pinchable, I also suggest something like: html { height: 100svh; overflow: hidden; overscroll-behavior: none; position: fixed; } body { height: 100svh; width: 100vw; overflow: hidden; touch-action: none; position: fixed; } The idea is to never let html or body exceed the size of the viewport, lock them down completely, and then enable overflow scrolling only in the divs that need it. This also eliminates pull-to-refresh when the app is used inside the browser. (If you want PTR functionality in the app, of course you can watch for overscroll on a particular div and implement it yourself. But your app skeleton will stay put.)
  - mvkel 3y ago
    Thanks for sharing these! Locking down the size of the viewport did the trick

olzhasar 3y ago

Thanks for the feedback! This a hobby project for now, so I tried to do it in a cheapest way possible, and PWA looked like a good approach, as there is no need to buy developer subscription. Have you used Swift to develop your IOS app or any cross-platform solution?

mvkel 3y ago
Makes total sense! I basically did whatever chatgpt told me, which was Swift with UIKit, and Storyboards for the interface design. Took me a bit to learn some of the conventions and syntax, but they've come a long way in making it much more intuitive for web dev folks.

anon373839 3y ago

> For example, double tapping on the screen triggers a zoom, and there's no way to disable it. That can be disabled: https://stackoverflow.com/questions/59732074/disable-double-tap-zoom-on-safari-ios-13 https://stackoverflow.com/questions/59732074/disable-double-... Actually, all of the layout and gesture jank problems in web apps can be fixed, but it does take some effort. I’m tempted to put in the time to open-source a reference for this, but then I cynically wonder if Apple would then find a way to break it. ;)