
Once again I have changed the majority of the styling on my website to make use of another feature of the modern browser. This time I will be adding (as you can probably tell from the title) dark mode to this pwa app.

## Getting Started

For this article the main thing you have to do, when starting is change a class in your `tailwind.config.js` and here is what you have to change:
```
module.exports = {
  ...
  darkMode: 'media', // or 'class' or 'false'
  ...
}

```

Once this is added, your are then able to go into your HTML and start adding the `dark:` to your class or className if your are using jsx templates.

## Adding it to the HTML

So, go to your HTML file, or the .js / .ts file that contains your react component.
Then you want to set your current style to what it will look like in light mode. So, setting the text to black and the background to a light colour.

Then when adding the `dark:` class to your element you can change things like the text colour and background just prefixed with that class.

Here is an example from my website and you should be able to see how it works:

```
    <div className="block dark:bg-gray-800 -mt-3 w-full">
      <h2 className="block w-full font-serif text-3xl text-yellow-900 dark:text-yellow-400 my-2 mx-5"><b>A Develop(ing)(er) Blog...</b></h2>
      <div className="bg-clip-text bg-gradient-to-b from-purple-400 via-blue-400 to-indigo-400 p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols-3 gap-5  text-xl sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl">
        {posts.map((item) => (
            <BlogListItem key={item.slug} {...item} />
          ))}
      </div>
    </div>
```

On the outermost div, I only give it a background when it is in dark mode. By applying the `dark:` key word before setting the bg-colour using the tailwind syntax.

Another example from this is:
```
<h2 className="text-yellow-900 dark:text-yellow-400"><b>A Develop(ing)(er) Blog...</b></h2>
```

As you can see in light mode the text will be set to `text-yellow-900`. And when the device is in dark mode it will be set to `text-yellow-400`.

If you have any questions or need help implementing it just drop me a message through email and I will take a look and see if I can help.

Thank you for reading!

[Back to Home](https://erbriggs.vercel.app)

Adding Dark mode to my pwa (tailwind)


For this article I am going over how to add in a custom tailwind animation. That you can then just add this as another class to your element.

The best way to do I have found is in adding the css animation declaration in your `tailwind.config.js` file, if you are using next.js like me.

## Getting started 

To start you need to open your `tailwind.config.js` and then we are going to add a couple lines to here.

Under the theme section of your file is where we are going to start:
```
module.exports = {
...
  theme: {
    extend: {
      keyframes: {
       letterSpaced: {
        '0%':{ letterSpacing: ' 2rem'},
        '100%': { letterSpacing: 'initial'},
       },
      },
    },
  },
...
}
```

This is how we declare an animation in the tailwind file. Using the hierarchy `theme > extend > keyframes`.
Under the keyframes section we add a name and let that contain an object.
The name of my animation is `letterSpaced`. This gives a large letter space and then reduces it to the initial amount.

Here is the same declaration in vanilla css, so you can see the difference and how we can transfer this.
```
@keyframes letterSpaced {
    0% {
        letter-spacing:2rem;
    }
    100% {
        letter-spacing:initial;
    }
  }

```

One thing to take note of is that in css when you have a dash, the way you declare this in the `tailwind.config.js` is to remove the dash and capitalize the first letter of the next word. e.g. `letter-spacing -> letterSpacing`.

But otherwise it is quite self-explanatory and you can see how we move it over into the tailwind config.

## Declaring the animation class

Now we are going to add the animation and how it moves, the time it takes and any other things we need to run the animation.

So, in the `tailwind.config.js` file we are going to be adding another section to the extend section of the theme.

```
module.exports = {
...
  theme: {
    extend: {
        ...
      animation: {
        letterSpaced: 'letterSpaced 2s ease-in',
        ...
      },
    },
  },
...
}
```

As you can see for the animation you declare it as you do in css but using the name you made up earlier.

Here is the css version of the implementation:

```
@classifier {
    animation: letterSpaced 2s ease-in;
}
```

In css you can see we add this to a certain object so if you wanted to add this to multiple elements you would have to write this out in each of them. Also, anything you can use in css to change the animation you can use here, like a custom bézeir curve or adding infinite so the animation will repeat itself once it has done.

But with tailwind we just have to declare this once in this file then we can use it, like below, in our HTML so we repeat a little less then we would have to. As the DRY (Don't Repeat Yourself) approach is best.

## Applying the animation in HTML

Now we have defined our animation and how it is played out. we can start adding this to our HTML.

Here is an example:

```
    <h1 className=" ... animate-letterSpaced">A Web Developer</h1>
    <h2 className=" ... animate-letterSpaced">Helping you to get the most from your businesses website.</h2>
```

So, in the className of our JSX elements (The template's used by next.js). But as this uses HTML as a starting point you can just add this to your class if you are using basic HTML.

Then on reloading the page you should be able to see your animation play out.

## Conclusion

I really like how tailwind has implemented this as it will save you time when having one animation you can use across all elements, so when changing how the animation works in the future you just have to change it in one place rather then going through all your css classes with the animation and changing each of the seconds to make it last longer for an example.

Well, I hope this can help you implement some of your own animations in tailwind.

Thank you for reading!

[Back to Home](https://erbriggs.vercel.app)

Adding in a animation with tailwind css!


I am looking to make managing styles easier on my website. And tailwind seems like a great option for this as there are a lot of tutorials on adding this to a website. And making it way easier to make a great looking website. My other options were things like Bootstrap, but as I have used that before it seemed too easy.


## Getting started

We are going to have add the `tailwindcss` library to our package.json.

So we have to run the command.
```
npm install tailwindcss
```

We are also going to have to add a few files so that our next.js website knows to use tailwind instead of the built in css files.

But first let's add the tailwind base, components and utilities. Then they will have all the classes from tailwind included.

At the top of my `global.css` file, which covers the whole app.
```
@tailwind base;
@tailwind components;
@tailwind utilities;
...
```

## Adding the `tailwind.config.js`

This file will allow us to add some of our personal options to our tailwind css install.

To get this file easily you can run this command:
```
npx tailwind init
```

You can check out my article on turning your [website into a pwa](https://erbriggs.vercel.app/blog/website-to-pwa) if you want to learn more about what npx does.

Here is what the file should look like, in your root directory:
```
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

## Adding in the `postcss.config.js` file

This will tell the next.js config to use tailwind css. As this overwrites the next.js base config file for `postcss.config.js` we also have to include the `autoprefixer` to our plugins.

Here is the file I am using:
```
module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}
```

After building your app you may get this warning:
```
warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
```

I will show you how to fix this, you just have to change this line to your `tailwind.config.js`.

```
module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.js','./pages/*.js'],
  },
  ...
}
```

This will tell tailwind to remove all built in classes that you don't use for your app.
Also, to only look into the pages directory for any files that will need the purge of classes from them.
Now when building the app size, and css file size will be a lot smaller.


Once this has been done you should be able to use the tailwind css classes within your html and then see the results in your next.js app.

## Conclusion

This will now help me restyle elements and make sure they can fit on all sizes. Now just to go through my current css and see what I cna recreate using tailwind css.

***
One quick edit on the 22nd August, I have just tried to upload my website after completing all of the changes,
then loading up the `npm start` caused me to see my nav bar was not styled properly.


So, looking into I have seen my error, and it is very simple. When purging the results I did not include my components file, so it was purging the unique styles on the nav bar. I did not come across this immediately I first thought it was a problem with my code and after looking up possible reasons I found this [issue](https://github.com/vercel/next.js/issues/14595) about not including all the files with HTML in the content like above. Here is the correct way to include it:

```
module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.js','./pages/*.js','./components/*.js'],
  },
  ...
}
```

Thanks again for reading and I hope this helps!

[Back to Home](https://erbriggs.vercel.app)

Adding in tailwind css to my next js website!


This article will show you how to add a custom service worker to your next-pwa app.

For this I have used the base configuration in the [next-pwa examples](https://github.com/shadowwalker/next-pwa/blob/master/examples/offline-fallback/service-worker.js).
Then I have added a small snip-it to download my markdown files and cache them.

## Getting Started

For this we are going to be adding on a folder and a file, then it should just work.

Obviously, there is a lot of work going on under the hood of next-pwa, but they have made it as simple as possible for people to add this functionality to your apps.

## Adding the service worker

In your root directory add a the folder and file `/worker/index.js`

and there it is. Anything in here will be added to the automatically generated sw.js file that sits in your public folder.

Here is how my file is defined for reference:
```
import { skipWaiting, clientsClaim } from 'workbox-core'
import { ExpirationPlugin } from 'workbox-expiration'
import { NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'
import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing'
import { matchPrecache, cleanupOutdatedCaches } from 'workbox-precaching'

skipWaiting()
clientsClaim()

cleanupOutdatedCaches()
registerRoute(
  '/',
  new NetworkFirst({
    cacheName: 'start-url',
    plugins: [new ExpirationPlugin({ maxEntries: 1, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
  new CacheFirst({
    cacheName: 'google-fonts',
    plugins: [new ExpirationPlugin({ maxEntries: 4, maxAgeSeconds: 31536e3, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-font-assets',
    plugins: [new ExpirationPlugin({ maxEntries: 4, maxAgeSeconds: 604800, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
// disable image cache, so we could observe the placeholder image when offline
registerRoute(
  /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
  new NetworkOnly({
    cacheName: 'static-image-assets',
    plugins: [new ExpirationPlugin({ maxEntries: 64, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /\.(?:js)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-js-assets',
    plugins: [new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /\.(?:css|less)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-style-assets',
    plugins: [new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /\.(?:json|xml|csv)$/i,
  new NetworkFirst({
    cacheName: 'static-data-assets',
    plugins: [new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
  /\/api\/.*$/i,
  new NetworkFirst({
    cacheName: 'apis',
    networkTimeoutSeconds: 10,
    plugins: [new ExpirationPlugin({ maxEntries: 16, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)
registerRoute(
    /\.(?:md)$/i,
    new NetworkFirst({
      cacheName: 'blog-content',
      networkTimeoutSeconds: 10,
      plugins: [new ExpirationPlugin({ maxEntries: 16, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
    }),
    'GET'
  )
registerRoute(
  /.*/i,
  new NetworkFirst({
    cacheName: 'others',
    networkTimeoutSeconds: 10,
    plugins: [new ExpirationPlugin({ maxEntries: 32, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
  }),
  'GET'
)

// following lines gives you control of the offline fallback strategies
// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks

// Use a stale-while-revalidate strategy for all other requests.
setDefaultHandler(new StaleWhileRevalidate())

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(({ event }) => {
  // The FALLBACK_URL entries must be added to the cache ahead of time, either
  // via runtime or precaching. If they are precached, then call
  // `matchPrecache(FALLBACK_URL)` (from the `workbox-precaching` package)
  // to get the response from the correct cache.
  //
  // Use event, request, and url to figure out how to respond.
  // One approach would be to use request.destination, see
  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
  switch (event.request.destination) {
    case 'document':
      // If using precached URLs:
      return matchPrecache('/fallback');
    //   return caches.match('/fallback')
      break
    case 'image':
      // If using precached URLs:
      return matchPrecache('/static/images/fallback.png');
      // return caches.match('/static/images/fallback.png')
      break
    case 'font':
    // If using precached URLs:
    // return matchPrecache(FALLBACK_FONT_URL);
    //return caches.match('/static/fonts/fallback.otf')
    //break
    default:
      // If we don't have a fallback, just return an error response.
      return Response.error()
  }
})
```

This works for me as I use the pre-cached urls from next-pwa. But this may require some more configuration to work for your app.

## Here is what I added

The part I added to the file to cache my markdown files. Which I am not sure if I have to do, as they are statically generated but it works so, I will show you how.

```
registerRoute(
    /\.(?:md)$/i,
    new NetworkFirst({
      cacheName: 'blog-content',
      networkTimeoutSeconds: 10,
      plugins: [new ExpirationPlugin({ maxEntries: 16, maxAgeSeconds: 86400, purgeOnQuotaError: !0 })]
    }),
    'GET'
  )
```

- ***registerRoute*** defines a root for the service-worker to look for when caching.
- ***/\.(?:md)$/i*** this is an regular expression, if you have not used these before they allow you define a path that can include multiple files. So this looks for all files with the .md extension.
- ***NetworkFirst*** the files from before will download once you have a network connection established.
- ***cache-name*** kind of self-explanatory, what do you what the cache to be called
- ***networkTimeoutSeconds*** how long before you want to cancel the request to get the files. (for larger files you may want to extend this, mine are all just text.)
- ***plugins*** This uses a plugin from this import `import { ExpirationPlugin } from 'workbox-expiration'`
- ***ExpirationPlugin*** This defines the amount for entries you want to cache and then will take a certain amount of time in ***ms*** to set an age for these items to expire. (Change this if you have more you want to cache or for them to be cached for a different amount of time)
- ***GET*** this is the type of request the service worker will use to make the request.

For more information on plugins go to this link, for the [workbox plugins page](https://developers.google.com/web/tools/workbox/guides/using-plugins#:~:text=Workbox%20Plugins%20allow%20you%20to,want%20to%20add%20custom%20logic.)

## Conclusion

next-pwa make it really easy to add this, and I have only scratched the surface of what service-workers are able to do.

But hopefully this will help you add your own service worker and let you cache the items you need to make your app as productive as possible.

Thank you for reading.

[Back to Home](https://erbriggs.vercel.app)

A custom service worker, next-pwa

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](https://erbriggs.vercel.app/blog/website-to-pwa/).

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](https://github.com/shadowwalker/next-pwa/tree/master/examples/offline-fallback-v2).

(`/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](https://erbriggs.vercel.app)

Adding offline support to your next pwa


For this article I am going to be turning my website, that you are on. Into a downloadable PWA.

This will help show how you can turn already existing websites into an app for your customers / users / peers to have easy access to your content and allow you to have all of your technical factors of your business in one place.

## Turning a next.js website into a pwa app!

To start we are going to need to include a dependency. [next-pwa](https://www.npmjs.com/package/next-pwa)

```
npm i next-pwa
```
### Assets for the app
We are also going to need some images. You can include more but the base pwa requires two images at ***512x512*** and ***192x192***.
However, I am going to be using the pwa-asset-generator which I learned from this blog article by [Milind Soorya](https://milindsoorya.site/blog/convert-your-website-into-a-pwa-in-8-simple-steps-next-js-pwa-series-part-2).
I use [maskable](https://maskable.app/editor) from the article above to generate a ***1000x1000px*** size image. (Rename the file to icon.png or just change the icon.png in the command for your filename)
Then add this to the root directory of your project. So when the command has to be ran you can locate the file easily without typing in some long path.
So head over there if you would like more detail about using this but here is the command you should run.
`npx pwa-asset-generator icon.png icons`
- ***npx*** allows us to use a npm package without saving it to package.json.
- ***pwa-asset-generator*** is the package we want to use.
- ***icon.png*** the image we are using to generate the assets. (hence the large size)
- ***icons*** the folder where we want the generated images to be placed

Drag the folder to your public folder and we will reference them later in one of the files we have to add.
Also, you want to look for and copy this output from the asset generator:
```
[
  {
    "src": "icons/manifest-icon-192.png",
    "sizes": "192x192",
    "type": "image/png",
    "purpose": "maskable any"
  },
  {
    "src": "icons/manifest-icon-512.png",
    "sizes": "512x512",
    "type": "image/png",
    "purpose": "maskable any"
  }
]
```
Wait before starting your dev server. As the next file we add will require you to restart your app.

## Officially Getting Started

Now we have all of the dependencies we need.

Let's add our ***next.config.js*** file this will include the pwa dependency at build time.

As I am figuring this out as I write this I start with this snip-it from [vercel's next.js pwa example](https://github.com/vercel/next.js/blob/canary/examples/progressive-web-app/next.config.js).
```
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
  },
})
```
## Adding the manifest.json

I am now adding the manifest.json There are tools out there to generate this but I have just changed the snip-it from this pwa [blog article](https://web.dev/add-manifest/).
Then added the file to the public folder in my directory.
```
{
    "short_name": "ERBriggs",
    "name": "ERBriggs Developer Portfolio",
    "icons": [
        {
            "src": "icons/manifest-icon-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable any"
        },
        {
            "src": "icons/manifest-icon-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable any"
        }
    ],
    "start_url": "/?source=pwa",
    "background_color": "#6baa75ff",
    "display": "standalone",
    "scope": "/",
    "theme_color": "#cbff4dff",
    "shortcuts": [
    ],
    "description": "The portfolio for Ellis Briggs. A Web developer."
  }
```

Once that has been added we can move onto our next step.

## Adding the _document.js file.

This file is used to add the meta tags to your files so people will be able to download your app from any page.

Here is what I have added to the file. It includes some of the output from the asset generator.
```
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <link rel="manifest" href="./manifest.json" />
        <link
            href="/favicon-16x16.png"
            rel="icon"
            type="image/png"
            sizes="16x16"
        />
        <link
            href="/favicon-32x32.png"
            rel="icon"
            type="image/png"
            sizes="32x32"
        />
        <link rel="apple-touch-icon" href="/apple-icon.png"></link>
        
        <link rel="apple-touch-icon" href="icons/apple-icon-180.png"/>

        <meta name="apple-mobile-web-app-capable" content="yes"/>

        <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"/>
        <link rel="apple-touch-startup-image" href="icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"/>
        <meta name="theme-color" content="#cbff4dff" />
    </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
```
Once you have configured this file to your apps specific needs. Then you should be able to build your app and install the basic version of a pwa.

If you have not built your app before run:
`npm run build`
then
`npm start`


## Conclusion

Overall, this was quite easy but I did run into a few errors while doing this, like placing the manifest.json in the public folder instead of the root as of Next.js 9.1.

Next I will be showing how you can make your app available offline or supply an offline page that will show as a back-up for pages without currently loaded content.

Thank you for reading this and I hope this can help someone get started on their journey to making a great pwa.

[Back to Home](https://erbriggs.vercel.app)

A Web Developer

Helping you to get the most from your businesses website.

PWA / Static website / Wordpress

Scripts / Custom systems / SEO

ETC...

The Process

What can I do for you?

Basic - £100-£500+

Add-ons:

Business - £700-£1200+

Add-ons:

Enterprise
Message me to discuss pricing

Add-ons:

A Develop(ing)(er) Blog...

Previous Projects

WRB Carpentry and Plumbing

A Web Developer

Helping you to get the most from your businesses website.

PWA / Static website / Wordpress

Scripts / Custom systems / SEO

ETC...

The Process

What can I do for you?

Basic - £100-£500+

Add-ons:

Business - £700-£1200+

Add-ons:

EnterpriseMessage me to discuss pricing

Add-ons:

A Develop(ing)(er) Blog...

Previous Projects

WRB Carpentry and Plumbing

Enterprise
Message me to discuss pricing