PWA pass

[boostup]

• is app installable
• iOS icons
• Android icons
• Network or Cache first strategy ? Read this

---

Ensure that the following is cached for offline use:

• css
• fonts
• directory images

---

Ensure the error page displays when trying to access the shop page or any collection (i.e. /shop/hats)

• error message
• error image

[boostup]

Notes about PR #52

Note: on my local PWA branch, I do have some unpushed local changes that are to be the starting point for the next time I try to tackle this difficult topic.

What I'm trying to achieve

1) App-shell images to be precached at build time
I managed to do this partially : the directory images are now shipped into the build. I was able to do so using require. Here is the concrete code in the PR
In essence, this is webpack doing its thing thanks to CRA.

Status
I cannot seem to be able to reproduce the same with the ErrorBoundary image, but I must double check using the untested code on the PWA branch :

const imageUrl = require("../../assets/page-not-found.png"
...
render() {
    <ErrorImageContainer imageUrl={imageUrl} />
...

2) Add clothe images to be cached at run time so that they become available offline
Why? For instance, checking the contents of my shopping cart offline, the images appear in the cart dropdown minis, and in the checkout page.

• include a default clothe image( for when there is no cached version and there is no internet connection)

Status
I can tell that workbox is caching as files come along (since they are found in the DevTools > Application > Cache > runtime), thanks to this newly added file, however, I have not been able to have these images display in the UI from cache. In fact, no image whatsoever was displayed when browsing the checkout page offline. The images appear empty, with their alt text kicking in.

3) CSS and fonts
Fonts: I still need to attempt this, but i can confirm that fonts are not loaded on installed iPad app when browsing offline.
CSS: I am pretty sure though that the CSS is supposed to be cached by default CRA webpack config, but it is clear that the CSS is not loaded either when browsing offline on installed iPad app.

Status
Is it that the new file custom-service-worker.js is overriding completely the CRA defaults ? I'm pretty sure it is, because I had already marked CSS and Fonts as correctly cached, but my tests from today indicate it is not the case.

Test on staging version of the app if :

• CSS
• Fonts
  are both available in offline browsing mode of the app.

4) Stategy
StaleWhileRevalidate or CacheFirst ?
I am exploring this as an alternative to the original question of NetworkFirst or CacheFirst ?

5) Offline : what does it mean ?
When I am running the dev app on localhost:3000, or even a build version on port 5000, when I cut off my laptop internet connection, I am fooling myself to believe that the app is offline, when in actuality, there is a server running to serve assets...This is probably what is driving me nuts not being able to reproduce offline scenarios with predictable results.

---

Some PWA useful and helpful resources

These are resources which are currently helping me understand how to configure Workbox for this create-react-app-based project needs.

• Easy Workbox Integration with create-react-app - Kelvin Mwinuka JavaScript

• Workbox Routing | Google Developers

• Making a Progressive Web App | Create React App

• Workbox firestore data cache first - Google Search

• Firestore clients: To cache, or not to cache? (or both?) | by Doug Stevenson | Firebase Developers | Medium