Gatsby: static assets and gatsby-plugin-offline

[edsu]

Summary

I'm trying to use gatsby-plugin-offline to preload an image in my static directory.

Relevant information

I've got a small test repo here that demonstrates what I'm trying to do:

https://github.com/edsu/test-offline-static

On the advice of someone in Discord chat I tried to modify navigateFallbackWhitelist in the gatsby-config.js. The image displays fine under gatsby develop but when I gatsby-build I don't see the <link rel="preload"> for the image in public/index.html.

Any advice you can provide would be most welcome!

Environment (if relevant)

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.8.0 - /usr/local/bin/node
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.1
    Safari: 11.1.2
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-plugin-offline: ^1.0.18 => 1.0.18
  npmGlobalPackages:
    gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby',
  },
  plugins: [
        {
      resolve: `gatsby-plugin-offline`,
      options: {
        navigateFallbackWhitelist: [/^[^?]*([^.?]{5}|\.html|\.jpg)/],
      },
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "dependencies": {
    "gatsby": "^1.9.277",
    "gatsby-plugin-offline": "^1.0.18",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  }
}

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

I'm not sure if gatsby-plugin-offline can help you achieve this.

@pieh @m-allanson any thoughts regarding this?

[edsu]

I've updated the example to have a second page with a second image on it to test whether visiting the homepage will trigger the downloading of the image on the other page.

[edsu]

@kakadiadarpan I thought the gatsby-plugin-offline plugin was to help building progressive web apps? Isn't being able to tell the client to prefetch media used on other pages part of what doing PWA is? I'll admit I'm kind of new to this topic.

[kakadiadarpan]

@edsu my bad, I missed this earlier. In your gatsby-config.js file you need to make the changes as below:

plugins: [
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        globPatterns: ['**/*.{js,jpg,html,css}'],
      },
    },
  ],

By default globPatterns has this value: ['**/*.{js,css,html}'], which results in precaching of only JS, HTML and CSS files. With the above code snippet, we also added the option of caching .jpg files. You can check the generated sw.js file inside the public folder to know which all files will be precached.

You can learn more about all the available options for the plugin here

[edsu]

@kakadiadarpan thanks, I did try adding that, but it doesn't seem to pick up the jpg file in my /static/images directory. You can check it out in the test repo, and here is the precacheManifest from the sw.js:

self.__precacheManifest = [
  {
    "url": "4-85d196808f777a16a9b1.js"
  },
  {
    "url": "app-e3d8cc91d15661318fb9.js"
  },
  {
    "url": "book/index.html",
    "revision": "e71b0e8653e819a604243fa7bbc41c35"
  },
  {
    "url": "component---node-modules-gatsby-plugin-offline-app-shell-js-963e407518fcfce183b2.js"
  },
  {
    "url": "component---src-pages-book-js-b386776f37ec1b3765e3.js"
  },
  {
    "url": "component---src-pages-index-js-cc4bbf1267b01d9c8ac5.js"
  },
  {
    "url": "images/book.jpg",
    "revision": "7d2d12839ec0ab279793a6551bd568e2"
  },
  {
    "url": "images/gatsby.jpg",
    "revision": "5a8d43f66f1f280a842963b0b7d41036"
  },
  {
    "url": "index.html",
    "revision": "d3364685fd69efaaf188a0acb6af5fe7"
  },
  {
    "url": "offline-plugin-app-shell-fallback/index.html",
    "revision": "a8f0e4909017bacccd6f0d6c3ea206d2"
  },
  {
    "url": "webpack-runtime-ea20b98181259d2af1a8.js"
  }
].concat(self.__precacheManifest || []);

Can you please reopen this ticket?

[edsu]

Whoops, my bad. The jpg files are staring at me right in the face in that manifest! Thanks for your help, much appreciated!