This is the second part of my previous blog on my journey to explore PWA. As some of you might have read the first episode, you have known that my first attempt to implement PWA to
Telescope nothing more than a failure in my opinion. If you have not read the first part, you can read about it here.
After getting myself together, I was determined to find out a working solution to my PWA issue. I decided to dig deeper into the web and tried out every single solutions I could have found or thought of with the hope that one of them will work or at least function. From my memory, I kept pushing new commit every 10 minutes for 3 hours straight. The list of force-push commits kept getting longer and longer but none of them has worked yet. Here is how many times I attempted to solve it.
It’s long, isn’t it? I was very confident that I set up everything correctly. However, it only worked locally and still not work in production for some unknown reason. I did not really know how to debug the service worker as professor Dave has said once that it is really difficult to debug service worker. It seemed like the workbox file and service worker file were not working. I decided to go to
next-pwa github to ask the creators/maintainers about my issue, then I noticed someone filed an issue that is very similar to my problem. There were quite a few people commented in the issue saying they have same error by different causes. One of the posts came from someone who has some information about why
workbox(a dependency of
next-pwa ) did not work probably.
A few days later the creator released a new version integrating the new workbox version.
I updated to v5.1.3, but still PWA could not be installed on prod. And I found out that some file in the public folder cannot be cached. I decided to make a comment asking about it.
The creator answered quickly after and suggested a solution to it.
Now everything just clicked to me why it was working on prod before but not now. This google file was added after I started working on this and hence affecting the result. I added what he suggested to my code and it worked like a champ. Maybe I should have figured it out earlier rather than spending too much time grinding…
It was frustrating experience but I felt I learned a lot about PWA out of it. I also learned that Apple is still behind in the PWA movement but they have been making efforts to integrate PWA into Safari, so I will be keeping track of updates because I believe PWA will be a common thing of the future web.
Thank you for reading.