How to make your website work offline

So you’ve build your website. Whether that is a React app, a Vue app or a good old HTML site, well done. You should be proud of it. Think back to when you wrote your first line of code, now you have a website. It’s online and other people can see it.


This content originally appeared on DEV Community and was authored by Luke Cartwright

So you've build your website. Whether that is a React app, a Vue app or a good old HTML site, well done. You should be proud of it. Think back to when you wrote your first line of code, now you have a website. It's online and other people can see it.

celebrate gif

However the website only works when you are connected to the Internet. If your users lose connection then they will see that chrome dinosaur instead of your lovely site.

Chrome dinosaur

So what's your solution? Do you accept the status quo? Is an offline website even possible?
Indeed it is! Progressive Web Apps(PWAs) are your solution.

What are Progressive Web Apps?

Progressive Web apps are Web applications that can act like native apps. Using 2 files, your website can have push notifications, offline mode and become downloadable like an app. These 2 files are called a service worker and a manifest JSON file.

Service worker

The first file you need is a service worker which is a Javascript file that is the brains of the PWA. You'll need to register it by adding a script tag in your base HTML and adding this code.

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
          console.log('Service worker started');
        })
        .catch(function(error) {
          console.log('Service worker failed, error:', error);
        });
    }

In your seperate service-worker.js file, you'll need 2 blocks of code.

self.addEventListener('install', (event) => {
    // run caching when installing service worker.
});

self.addEventListener('activate', (event) => {
  // After install and all active pages have been closed, this will run.
});

Now you have a starter code for your PWA. Look up some of the remaining code to add the functionality.

Manjest.json

The manifest.json file is similar to a package.json file in a node project. It contains some information about the website like name, background color and icon. For the full list see here on MDN. This file defines some of the Web apps meta data such as what the website icon will be when you download it.
Add <link rel="manifest" href="/manifest.json"> into the head element of the root HTML file to link the website to it and add your icon to an images folder.

{
    "short_name": "My Example PWA",
    "name": "Example PWA",
    "start_url": "/index.html",
    "background_color": "#1c5680",
    "display": "standalone",
    "theme_color": "#1c5680",
    "icons": [
       {
           "src": "/images/icon.png",
           "type": "image/png",
           "sizes": "128x128"
       }
     ]
}

Making an offline page

const custom_offline_page = "offline.html"

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('CacheName').then((cache) => {
      return cache.addAll([
        custom_offline_page
      ])
    })
  )
})

self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      try {
        // Fetch request from network
        const networkResponse = await fetch(event.request)
        return networkResponse
      } catch (error) {
        // Error thrown when a user has no internet connection
        const cache = await caches.open('CacheName')
        const cachedResponse = await cache.match(custom_offline_page)
        return cachedResponse
      }
    })()
  )
})

And you now have an offline page.
Magic

Testing it works

In chrome, open up the dev tools and go to the lighthouse tab. You can run an audit. One of the tick boxes is PWA. Run the audit and this will reveal any problems if you have any.

Lighthouse reporting with PWA selected

You can also check the application tab in dev tools to see the manifest json and to see if a service worker has successfully been registered.

If you have any questions or issues, drop them in the comments below. I'd be more than happy to help

Resources:


This content originally appeared on DEV Community and was authored by Luke Cartwright


Print Share Comment Cite Upload Translate Updates
APA

Luke Cartwright | Sciencx (2022-05-04T21:49:29+00:00) How to make your website work offline. Retrieved from https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/

MLA
" » How to make your website work offline." Luke Cartwright | Sciencx - Wednesday May 4, 2022, https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/
HARVARD
Luke Cartwright | Sciencx Wednesday May 4, 2022 » How to make your website work offline., viewed ,<https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/>
VANCOUVER
Luke Cartwright | Sciencx - » How to make your website work offline. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/
CHICAGO
" » How to make your website work offline." Luke Cartwright | Sciencx - Accessed . https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/
IEEE
" » How to make your website work offline." Luke Cartwright | Sciencx [Online]. Available: https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/. [Accessed: ]
rf:citation
» How to make your website work offline | Luke Cartwright | Sciencx | https://www.scien.cx/2022/05/04/how-to-make-your-website-work-offline/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.