In developing my latest Progressive Web App, I came across the following problem. Note I was using Create-React-App at at the time, it did not allow for modifying the workbox it used to generate its Service Worker.
I found this article https://karannagupta.com/using-custom-workbox-service-workers-with-create-react-app/ which provides a way to create a custom SW without ejecting from CRA.
Challenge
The issue was that the App for purposes of explanation is broken up into two parts, the CORE and the DATA.
The core is the actual App (tiny) around 0.5MB
The data is the SVGs and the audio behind each lesson. approx. 10MB
So, by default the App was loading the CORE and then PreFetching the Data (2000 Images and Audio clips 🙂
Issues it caused:
- Not ideal for older phones it would crash
- Data sensitive users – we cannot assume the user wants the entire app on his device
- Causing the “add to homescreen” pop-up to only AFTER all the DATA was loaded which could be minutes on older phones
- Users would go to Lesson 1 and while prefetching was still happening, and lesson 1 images and audio may not be ready for usage, and thus they would see empty blocks and/or no sound
Solution
I had to move to what is called “App Shell Model”, where the core is the shell and once loaded (in seconds) you can install the App.
However, it only fetches the audio/images per Lesson as user interacts with it and *caches* for offline usage.
This way we avoid all the issues above with only one downside, that you can only use the lessons you have viewed whilst being online, when you are offline. 🙂