DIY repository setup

Step by step guide

First check this guide

Install

• workbox
• workbox inject function

npm i -D workbox-webpack-plugin

# Or with yarn
yarn add workbox-webpack-plugin -D

• This enables the use of workbox toolbox for PWA by Google. Creates service worker once Webpack finishes building, or better said it should be used as the last plugin in webpack.config.js More on workbox
• Some more help from Google Codelabs.

Webpack config updates

• Update the webpack.config.js file.

const WorkboxPlugin = require('workbox-webpack-plugin')

// In the plugins section add this code as the last plugin
new WorkboxPlugin.InjectManifest({
 swSrc: './src/sw.js',
 swDest: 'sw.js'
})

// Update the copy-webpack-plugin part as well
const copyWebpackPlugin = new CopyWebpackPlugin(
  [
    { from: '../favicon.ico' },
    { from: 'assets/icons/*.png' },
    { from: '../public/manifest.json', to: 'manifest.json' }
  ],
  { copyUnmodified: true }
)

• This will transfer static files such as the manifest.json file and all of the icons for functional PWA.

• I'm using InjectManifest workbox function because I have created a service worker base file under src/sw.js.

• Removed extract-text-webpack-plugin in favor of isomorphic-style-loader, this way you get the critical CSS needed for the current route (page) extracted as style in the head tag.

npm un extract-text-webpack-plugin
npm i -D isomorphic-style-loader

# Or with yarn
yarn remove extract-text-webpack-plugin
yarn add isomorphic-style-loader -D

• Then update the webpack.config.js file by removing extractTextPlugin.extract with the fallback option and instead have the CSS loaders set as:

use: [
  'isomorphic-style-loader',
   {
     loader: 'css-loader',
     options: {
       modules: true,
       importLoaders: 2, // postcss and sass
       localIdentName: '[name]___[local]___[hash:base64:5]'
     }
   },
   'postcss-loader',
   'sass-loader'
]

• In order for the isomorphic style loader to work, you have to create a HOC ContextProvider (as explained in this SO answer) as a wrapper for the App component or if you use CSS file in App, wrap the App component inside index.js