Closed ellingtonc closed 1 year ago
This is a working preview at the expense of removing @sentry
due to the conflict with next-pwa
. The app is now installable via the address bar (top right desktop icon).
If running lighthouse report, make sure to clear Application Cache beforehand and run the report in Incognito Mode to prevent extensions from interfering. Also note that lighthouse will have the following discrepancies in preview mode:
For some reason the performance is lower in the netlify preview than when I ran it from yarn build
/yarn start
. I have to investigate this issue some more. Also, discovered new error "Minified React Error" that is printed in console, which affects best practices.
Looking good!
While scrolling around, I noticed a lag in how images load in lessons. Namely, as a scroll down, a new image appearing within view takes ~0.5 seconds to show up. It's not a huge issue, but I don't see the same lag on the existing site.
Let me know what the best way forward is for fixing the interactives, e.g. if it'd be helpful to talk to those who originally made them. After that, I think we're good to go on merging.
The problem that you are seeing is due to Next Images lazily loading the images when they are scrolled into the viewport. Next image optimization requires a priority
attribute if you want it to load immediately. It recommends only putting the priority
attribute on images that will be in the immediate viewport (w/o scrolling).
I solved this by using the priority attribute on each of the figure images. It might take a small toll on the performance, but I can't imagine it being too bad because it still serving them as webp, which was the main performance issue in lighthouse.
For the interactives, I will take a look at them again this weekend, but feel free to reach out to the original dev for any ideas. No worries on this though, I am sure I will be able to put together a solution.
Hey Ellington, I wanted to apologize for this (and the various things we had discussed) slip through the cracks. I can all too easily get lost in the weeds of other things. No pressure to spin it back up or anything, I hope you're doing well!
Updates
Developer Changes
The package
next-pwa
is run during build time and generates a service worker that caches different routes and files for offline availability. Caching specifications are configured innext.config.js
.In development mode, the service worker is not generated. In production mode the service worker is generated at build time. That means even if you navigate away from the site and come back, data will still be stored by the browser. To manually clear out this data, go to the browser's development tools (
Right Click
->Inspect
). Then click theApplication
tab at the top, and clickClear Site Data
. This will clear out all the cached data and unregister old service workers.Known Issues
react-p5
load, but are not interactive. In development mode, a full warning is displayed, but can be dismissed by refreshing the page (ex:lessons/spans
,lessons/hyperdarts
, andlessons/inscribed-rectangle-problem
. In production, these interactive's load but do not have interactivity.