title: React PWA with workbox PWA
body: <p>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 &amp; 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</p>
  
  <p>Package.json</p>
  
  <pre><code>"workbox-webpack-plugin": "^3.2.0"
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>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,
                              }
                            }
                          }
  
                          ]
                      })
                      ]
                  ]
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;link rel="manifest" href="manifest.json"&gt;
   &lt;meta name="mobile-web-app-capable" content="yes"&gt;
   &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  </code></pre>
  
  <p>manifest.json    </p>
  
  <pre><code>{
                "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"
              }
  </code></pre>