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"
}
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.
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
As to caching POST requests, that's not possible. Link