Gatsby: [gatsby-plugin-offline] Configure to cache all resources on first visit

[ghost]

Hey, Gatsby (and JAMstack in general) newcomer here.

A customer is asking for an app to display showcase information on iPads. (These iPads will be in front of their products in the showcase room.)

I'd like to use Gatsby for this since it is a rather small project to test things out. But there is one thing I am not sure Gatsby could handle.

The client wants an app-like offline experience without bothering about app stores. I know that there are plugins for service workers and a manifest. But I don't know if it behaves like a native app. To my knowledge, I (as the user) must visit every single page to have the full site offline, right?

Could I configure the service worker to load all pages including images and videos during the first page load so that the client does not have to manually visit all pages?

Oh, and it should work with iOS Safari ... 👎

[LekoArts]

To my knowledge, I (as the user) must visit every single page to have the full site offline, right?

My experience is that I can visit my index page and then all linked pages are pre-cached. So I didn't have to visit really every page.

Could I configure the service worker to load all pages including images and videos during the first page load so that the client does not have to manually visit all pages?

Sure you can. You override the default options with the fitting workbox config.

They say in workbox precaching:

The main reasons for doing this is that it gives developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline.

Oh, and it should work with iOS Safari ...

Use the manifest plugin with display: 'standalone', and then you can add it to the homescreen without problems.

[ghost]

Thanks @LekoArts, that should help me.

Another requirement is the use of an intranet server. I think this is possible but hope you could confirm my assumption.

Gatsby will get the contents from WordPress. They live on the same virtual server. But we need a way to automatically rebuild on content changes.

My plan is to write a small WordPress plugin that displays a button on the admin bar. If clicked, this button should fire a PHP function that will execute the node build command. Easy. 👍 I think ...

But should I be aware of something that could go terribly wrong? 💣
Like someone visits the site during build.

[LekoArts]

Another requirement is the use of an intranet server. I think this is possible but hope you could confirm my assumption.

Does the Wordpress backend have an URL you can enter in the config?

Like someone visits the site during build.

That solely depends on how you build. I think most people with a more manual setup build the new contents in another directory and copy it over when it’s finished. Search for that on Google. You'll probably find something.

[ghost]

Yeah, WordPress will have a unique URL for data fetching.

I might have read about that temporary build directory and such at Netlify. Will have a look, thanks!

[LekoArts]

Netlify? Then you don’t have to do anything. They do it all for you.

[ghost]

Yeah, but they want their own intranet server. Very disappointing, I wanted to deploy that on Netlify.

What I mean is, that I think Netlify does the same: Build into a temp folder and copy that over when finished.

[ghost]

I had a look at the Workbox config and tested some Gatsby starters that use the offline plugin in the newest iOS Safari with airplane mode.

My steps:

1. Load home page.
2. Go offline.
3. Browse through the other pages.

It seems that the offline plugin caches resources that are linked on the page I visited while online.
That's great so far.

Unfortunately, the precache config is not easy to crasp. So how do I configure the offline plugin properly to load all resources, including those not linked on the page I visited? I'd like to have a real offline app that caches anything on the first visit, as you mentioned @LekoArts.

Could use a tutorial or starter that explains the Workbox config in case of Gatsby, @KyleAMathews.

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[TomFreudenberg]

Hi Carsten @cardiv

have you managed to get an answer for your question? I have a similar approach and also looking für offline plugin documentation. Would be really nice if you would share your results.

Thanks in advance
Tom

[ghost]

@TomFreudenberg We do not need this anymore – maybe in the future.

[schalkventer]

I'm interested in this as well.

Seems that passing the following options to the plugin doesn't seem to do the job:

{   
  resolve: `gatsby-plugin-offline`, 
  options: {    
    importWorkboxFrom: `local`, 
    globDirectory: '.', 
    globPatterns: ['public/**/*'],  
    globIgnores: ['public/admin/**/*', 'public/**/*.map'],  
    cacheId: `gatsby-plugin-offline`,   
    skipWaiting: true,  
    clientsClaim: true, 
  }
}

Did I perhaps miss something or is this beyond the scope of the plugin? I.e. Should rather just customise the Gatsby webpack config?

[schalkventer]

Turns out that I needed to change my config as follows:

{   
  resolve: `gatsby-plugin-offline`, 
  options: {
    importWorkboxFrom: `local`,
    globDirectory: 'public',
    globPatterns: ['*/**'],
    cacheId: `gatsby-plugin-offline`,
    skipWaiting: true,
    clientsClaim: true,
    directoryIndex: 'index.html',,  
  }
}

However, I can't seem to get URLs with query strings to resolve. @LekoArts, is it possible to resolve this issue with the plugin, or should remove the Gatsby plugin and rather do this by customising the webpack config in Gatsby?

[TomFreudenberg]

Hi Schalk @schalkventer

if you get any progress it would nice if you would share that here. I am also currently struggling with offline plugin.

Thanks
Tom

[schalkventer]

Hey @TomFreudenberg!

I actually ended up just creating my own fork of the plugin that fixed the issue. I'm planning on taking some time and publishing the fork as a Gatsby plugin itself, I just need to clean it up a bit first. Will let you know when I do.

[TomFreudenberg]

Hi Schalk, thanks for sharing your infos

[devrnt]

@schalkventer Did you manage to publish this fork?

[TomFreudenberg]

@schalkventer

Hi Schalk - did you already found the time to launch your fork?

Thanks for some feedback
Tom