React PWA with workbox PWA

Question

I am doing research on PWA from last one week I found that Workbox is good option to implement and I tried to implement the PWA using React+worbox+webpack I am able to create App icon, caching of GET apis data but not able to cache server side user images & POST api. And if anyone finds this method is not correct then please suggest me best method to implement PWA. I am looking for help or guidance which will help me achieving the deadlines. Appreciated your help. Thanks in advance

Package.json

"workbox-webpack-plugin": "^3.2.0"

webpack.config.js

var workboxPlugin = require('workbox-webpack-plugin');
                 plugins: [
                    new cleanPlugin([dist]),


new CopyWebpackPlugin([
                        // {output}/to/file.txt
                        { from: path.join(__dirname,'/index.html'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/manifest.json'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/.htaccess'), to: path.join(__dirname, '', 'www'), },
                        { from: path.join(__dirname,'/src/assets'), to: path.join(__dirname, '', 'www/src/assets') },

                    ]),
                    new UglifyJSPlugin(),
new workboxPlugin.GenerateSW({
                        swDest: 'service-workers.js',
                        clientsClaim: true,
                        skipWaiting: true,
                        globDirectory: dist,
                        globPatterns: ['**/*.{html,js,css,png,svg,jpg,gif,json}'],
                        globIgnores: [
                        "**/node_modules/**/*"
                          ],

                        runtimeCaching: [{
                        urlPattern: new RegExp('https://serverURl/api'),
                        handler: 'networkFirst',
                            options: {
                              cacheName: 'helloOne-api-cache',
                              networkTimeoutSeconds: 10
                          }
                        },
                        {
                        urlPattern: 'https://serverURl/images/users/(.*)',
                        handler: 'cacheFirst',
                            options: {
                            cacheName: 'helloOne-mk-images-cache',
                            expiration: {
                              maxEntries: 2,
                              maxAgeSeconds: 7 * 24 * 60 * 60,
                            }
                          }
                        }

                        ]
                    })
                    ]
                ]

index.html

<link rel="manifest" href="manifest.json">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">

manifest.json

{
              "short_name": "Welcome",
              "name": "Welcome One",
              "description": "WelcomeOne preproduction",
              "icons": [
                {
                "src": "src/assets/images/apps/appicon_60x60.png",
                "sizes": "60x60",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_72x72.png",
                "sizes": "72x72",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_48x48.png",
                "sizes": "48x48",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_36x36.png",
                "sizes": "36x36",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_76x76.png",
                "sizes": "76x76",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_96x96.png",
                "sizes": "96x96",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_120x120.png",
                "sizes": "120x120",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_152x152.png",
                "sizes": "152x152",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_180x180.png",
                "sizes": "180x180",
                "type": "image/png"
                },
                {
                "src": "src/assets/images/apps/appicon_512x512.png",
                "sizes": "512x512",
                "type": "image/png"
                }
              ],
              "start_url": ".",
              "display": "standalone",
              "background_color": "#415160",
              "theme_color": "#415160",
              "gcm_sender_id": "103953800507"
            }

PWA service worker caching is for browsers, not for server side! — Fawaz
Then how can I store user images in cache which is coming from server side.. is there no way? How Flipkart lite do that? — kusum.ratawa
That goes in sw.js (can be any name, just using sw.js) file, not in the manifest.json. If you use cra, it will be auto-generated. — Fawaz
Checkout this link github.com/fawaz-ahmed/redux-app/blob/master/service-worker.js and search for precacheConfig you will see how it sets up file names with a hash for caching. — Fawaz
Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer

RamY RamY · Accepted Answer · 2018-06-01T11:20:51

This looks like a bug mentioned in here check you generated service worker file if it loads in browser and check if the run time caching rules are present there.

You can also try this instead.

In your index.html you should be registering the service worker file 'sw.js' in my case, like this.

<script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js')
        .then(() => {
          console.log('service worker installed');
        })
        .catch(err => console.error('Error', err));
    }    
  </script>

Your sw.js should be in same folder as your index.html and should have this: This is the block that'll intercept and cache images from server. Source

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);

  workbox.precaching.precacheAndRoute([]);
  workbox.skipWaiting();
  workbox.clientsClaim();

  workbox.routing.registerRoute(
    /\.(?:png|gif|jpg|jpeg|svg)$/,
    workbox.strategies.cacheFirst({
      cacheName: 'images',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 60,
          maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
        }),
      ],
    }),
  ); 
}else {
  console.log(`Boo! Workbox didn't load 😬`);
}

As to caching POST requests, that's not possible. Link

React PWA with workbox PWA

1 Answers