Adding offline support to your next pwa

August 3rd, 2021

This article will help you add offline support to our next-pwa app.

We are going to be using the next-pwa package I had used in my last blog post. Check that out here.

This package has great support for offline pages and makes it really simple to customize what your app does.

However, I did run into a few problems where it seemed to be using an old service worker and then it would not display correctly in the mainfest.json file as it couldn't find the next cached files. But restarting the build usually fixed this.

Let's get started.

Adding offline support to your app

So, to start we do not have any dependencies to download. Just we are going to be adding 2 files to your app as well as making a change in the next.config.js file. One of which your should have just have to copy and rename the file.

I guess the best place to start is adding the "fallback" folder and icon to your public folder. And this will help the app know when we get a bad response from our sever it should probably just get these files and display this to the user.

For example on my home page I have the image of my face that bounces around and if the user makes a request to grab that image and they have no connection. But have already been on the page and downloaded the service worker! Then they will get the fallback image and that will be displayed in place of the other image.

So, in your public folder and another folder called fallback. Then copy an image from your icons folder and rename the image to fallback. You can change the image name and just change the code we will add to next.config.js. My image size was 512x512.

(/public/fallback/fallback.png)

Now we have added that we can get onto adding the next page.

Offline using _offline.js

From the title of this section you can see that the page is going to be called _offline.js. If you are using a different framework rather than vanilla js, you can see the support from this page here in next-pwa example.

(/pages/_offline.js)

Here is my file if you would like an example of what to do. This is a basic version and I may do another blog article about including the style file. But what this will do is help reduce the file size required when downloading the service worker.

import Head from 'next/head'

export default () => (
  <>
    <Head>
      <title>ERBriggs</title>
    </Head>
    <h1>You are currently offline</h1>
    <h2>Please reconnect to your network, or wi-fi and try again.</h2>
    <h3>Thank you.</h3>
  </>
)

Making the change to our next.config.js

Next for basic offline support we just have to add the fallback definition to our next.config.js, this will allow us to define where our assets are placed if they are not in the traditional public/fallback/.

Here is what I have defined in my file:

const withPWA = require('next-pwa')
module.exports = withPWA({
  pwa: {
    disable: process.env.NODE_ENV === 'development',
    dest: 'public',
    fallbacks: {
      image: '/fallback/fallback.png',
      // document: '/other-offline',  // if you want to fallback to a custom page other than /_offline
      // font: '/static/font/fallback.woff2',
      // audio: ...,
      // video: ...,
    }
  },
})

With this you should be able to run:

npm run build and then npm start

And then if you go to the application part in dev tools you should see the automatically generated service-worker install and then start to cover your apps routing, and allow certain files to be cached.

Next I will be showing you how to add your own service worker to cover any misc file types. As for me I needed one to include my markdown files, so they can be used when they are offline.

next-pwa makes this quite simple so look out for that!

Thank you for reading and if you have any questions, just use my contact form or just message my email and I should be able to get back to you!

P.S.

Make sure if you are using git, add these to your git ignore:

#workbox and service-workers
**/public/workbox-*.js
**/public/sw.js
**/public/fallback-*.js

Back to Home