This website is now an installable PWA!
After 30 commits and 2 branches, this website is now an installable PWA! A month ago I tried to turn this website into a PWA however I ran into a few problems with installability. The PWA technology was being picked by devices however it could not be installed. This was odd especially because the errors given were related to bad pre-caching.
I didn't use Next's middleware, which tends to cause this issue, so I spent some time troubleshooting the issue. In total, it lead to 30 commits with fixes that didn't work from the build excludes to refactoring components and library integrations. Having realized that the issue might take more time to fix than anticipated, I left the feature to work on others.
Today I had some free time after dinner and decided to go over this PWA issue. I created a new branch and after around 10 minutes I realized what the problem was. The documentation suggested that the meta information be placed in either the _document.tsx or _app.tsx. Since I already had a <Head> in my _document.tsx due to Google Fonts, I decided to place the meta information in there. At the time I didn't think about the differences between how the _document.tsx and _app.tsx files would process the PWA generation but each has its own way of doing it.
Like with fonts, PWAs injected through the _document.tsx will only load for a single page. Processing it this way was bound to give errors. The fix was simply adding the meta information in the _app.tsx.
⚡And now this website is an installable PWA ⚡