Full offline support, precacheConfig vs prerender-urls.json etc...

[mariusk]

I'm struggling with getting full offline support operational. The use case is full offline support after first load on a mobile device. The application runs as a single page app, but I'm using the automatic feature of react-cli that creates separate files for the routes in my app.

Specifically I'm struggling with what I actually have to do to get everything pre loaded the first time my app is loaded. My test case is loading the app, the going offline (flight mode) and trying to navigate to another screen.

Exactly how and where does preact-cli know which routes to pre-render (and pre-load / cache I guess)? I'm using preact-cli-sw-precache where I'm trying to set everything automatically with a configuration like:

  const precacheConfig = {
    staticFileGlobs: [
      'build/**/*.{html,js,css,jpg}',
      'build/assets/favicon.ico',
      'build/assets/icons/*.png'
    ],
    stripPrefix: 'build/',
    navigateFallback: '/index.html',
    runtimeCaching: [{
      urlPattern: /\/api\//,
      handler: 'networkOnly'
    }, {
      urlPattern: '.*',
      handler: 'cacheFirst'
    }],
    minify: true,
    clientsClaim: true,
    skipWaiting: true,
    maximumFileSizeToCacheInBytes: 10*1024*1024
  };

Is this enough for the build system to figure out all the routes (disregarding the details about how this gets set up in preact.config.js, or do I need to specify a list or urls in the prerender-urls.json file in addition? And if so, how can I specify routes with "url based parameters", like logid in:

[
  {url: "/profile", title: "Profile"},
  {url: "/edit/:logid", title: "Log Edit"}
]

My gut feeling says only one of these should be necessary, but I can't get it working, so any help would be appreciated.

[lukeed]

Hey~! You need to specify a list of URLs to prerender inside your prerender-urls.json, otherwise only the / path is prerendered.

If you have a known set of /edit/* paths, you can pass them in one by one. But if it's a dynamic route (possibly an infinite number of paths), then you should prerender just /edit on its own & use it as a template, injecting any specific/dynamic info at SSR.

// known set
//~> assumes you only have "edit/foo" and "edit/bar"
[
  {
    "url": "/",
    "title": "Home",
    "description": "Foobar"
  }, {
    "url": "/profile",
    "title": "Profile",
    "description": "This is profile"
  }, {
    "url": "/edit/foo",
    "title": "Log Edit: Foo",
    "description": "Editing Foo"
  }, {
    "url": "/edit/bar",
    "title": "Log Edit: Bar",
    "description": "Editing Bar"
  }
]

// Dynamic, leave as template
[
  {
    "url": "/",
    "title": "Home",
    "description": "Foobar"
  }, {
    "url": "/profile",
    "title": "Profile",
    "description": "This is profile"
  }, {
    "url": "/edit",
    "isEdit": true
  }
]

Then you can customize your template file, responding to the isEdit option.

<!-- COPY MOST OF OUR TEMPLATE -->

<!-- SOMEWHERE INSIDE HEAD -->
<% if (htmlWebpackPlugin.options.isEdit) { %>
<title>Editing {INSERT_EDIT_NAME)</title>
<meta property="og:url" content="https://example.com/edit/{INSERT_EDIT_PATH}">
<% } else { %>
<title><%= htmlWebpackPlugin.options.title %></title>
<meta property="og:url" content="https://example.com/<%= htmlWebpackPlugin.options.url %>">
<% } %>

During SSR, you'd readout the contents of build/edit/index.html and then replace the contents of {INSERT_**} with the correct values. These are just examples, you can do whatever you want!

Your final build command will look something like this:

$ preact build --prerenderUrls prerender-urls.json --template src/template.html

[mariusk]

Ok, thanks. My whole app is a Preact app so there aren't many template files to modify, but if I just change the edit route to "/edit" (without the explicit :logid parameter) it seems to get pre-rendered correctly. Seems it is working as expected now, thanks agin.

[lukeed]

Great!

FYI, the template file I'm referring to is this file, which is used by default.

If you need to make template changes, you'd copy this file manually (for now) and then pass the --template flag to your build command.

[mariusk]

For some reason it wasn't quite working yet (did another build and release, and it no longer loads the other routes on the initial load for some reason). But something is fishy because there is also another more static route (without a parameter), the /profile route, that also does not get loaded on initial load. Looking at the template file you linked to - which I have a local copy of already (with a GA snippet), it seems to check for htmlWebpackPlugin.options.preload in addition to the filename to add a <link ref="preload"...> link. I'm trying to add that option to the prerender-urls.json sections to see if that works...

[mariusk]

.. and now it worked again. Seems there is an issue where sw.js isn't always loaded correctly, and then things aren't loaded / cached properly. Closing as this is most likely something else.