search

dwyl / app

Clear your mind. Organise your life. Ignore distractions. Focus on what matters.
http://dwyl.github.io/app/
143 stars 22 forks source link

PR: Optimise `JS` issue #325 #327

Closed nelsonic closed 1 year ago

nelsonic commented 1 year ago

This PR adds a <button> to the inded.html and some JS code to only load the Flutter Web App if the person taps/clicks the button: https://github.com/dwyl/app/issues/326 + #325

It takes us from a performance score of 70 to 100 using "smoke and mirrors". Also addressed all A11y and SEO issues so now we have a perfect score on PageSpeed Insights: https://pagespeed.web.dev/report?url=https%3A%2F%2Fapp.dwyl.com%2F

image

@LuchoTurtle / @SimonLab please review and merge when you can. :shipit: Thanks. 👌

nelsonic commented 1 year ago

Cloudflare pages was deploying before the deploy.yml had run ...

image

This is obviously undesireable so I disabled it: https://github.com/dwyl/app/issues/322#issuecomment-1454628249

nelsonic commented 1 year ago

image

Need to fix scale on iPhone 📱...

nelsonic commented 1 year ago

Ok, that was too much ... 😜

image

nelsonic commented 1 year ago

Better but not quite perfect ...

image

nelsonic commented 1 year ago

Much better:

image

nelsonic commented 1 year ago

@SimonLab please review and merge when you can. Thanks 👌

nelsonic commented 1 year ago

cursor: pointer added as per @LuchoTurtle's suggestion. ✅ Over to you @SimonLab 🙏

nelsonic commented 1 year ago

@SimonLab agreed. 👌 I dislike landing/loading pages a lot! 😢 But I see it as a necessary evil for now ... ⏳ It gives the person viewing the App something they can see while waiting for Flutter to load ...

I wish we had resources to maintain a dedicated web version of our App for fast loading and SEO. 🐎 But ... equally I love the fact that Flutter can build for various platforms off the same codebase. ❤️ So we can build a PWA that we can all use on both Mobile and Desktop for fast iteration. 📱 & 💻 = 🎉 And people trying our App don't have "install" anything if they don't want to, it just works! That is game-changing for adoption rates. Last year when I was doing FinTech work, one of the "Neo Banks" went down the iOS-only route and it bit them really hard as they only had 10k registered accounts by the time I rolled off. 💭 The break-even point and all the MGMT projections for the app were 100k ... 💯 People couldn't even start the onboarding process without downloading the App!! 😞 This is a very poor strategy (IMO) in a world with so many Apps competing for attention.

The hardest part by far of any App is the UI/UX and if we can get it pixel-perfect in Flutter using M3 then we're not going to re-do it all in PETAL unless there is a compelling reason e.g: Perf, A11y or SEO.

Again, I agree. 👍 If we can figure out a way of avoiding the loading screen, please open an issue and we can remove it. 🙏