Service worker : css class on wrapper component. Doesn't apply at times using emotion-js

[Jaikant]

There are two issues, I am seeing while loading a route directly (opposed to navigating to it), I am using emotion-js for styles.

Since both are related to loading the files from the service worker cache, I am opening a single issue here. I can break it into two if needed.

I started on service workers only today, so I have only a conceptual understanding of how it works, I tried looking into the code but I guess it will take some time for me to understand that.

Issue 1:

when loading from service worker cache. css missing from main wrapper of react component.

In offline mode:

If we directly access a route. The css class on the main wrapper, is not getting applied on the cached page.

It works fine if we navigate to the route (In offline mode).

Issue 2:

I am also noticing the page loading unevenly, creating a jarring effect.
In the layout in /src/layout/index.js, I have the structure like

  <MainDiv>
    <Navigation title={data.site.siteMetadata.title} />
    {children()}
    <Footer title={data.site.siteMetadata.title} />
  </MainDiv>

The Navigation and Footer load first and the children loads after that, creating a weird affect. Since the service worker setting is cache first, it happens all the time the route is directly accessed.

[calcsam]

Can you put up an example repo that demonstrates Issue 1?

[Jaikant]

Yes, I temporarily removed the service worker from my project. I will put up an example repo hopefully before the new year.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!