In this section, we will cover how to enable offline mode for our application, which helps the user open our web application without an internet connection.
In order to support offline mode, we have to cache resources in the client browser, and for that, we use the precache plugin to cache our resources using service worker. It creates the service worker file using sw-precache. The steps involved are as follows:
- Installing the plugin: The first step is to install the precache plugin in our current project using the following command:
$npm install --save-dev sw-precache-webpack-plugin- Creating precache JavaScript: The precache plugin uses the precache configuration file to define resources to cache in the client browser. For more details about the precache plugin, refer to https://github.com/goldhand/sw-precache-webpack-plugin.
Here's the complete precache.config.js:
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
module.exports = {
navigateFallback...