React PWA with workbox PWA
General Tech Bugs & Fixes 2 years ago
Posted on 16 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.
Answers (2)
manpreet 2 years ago
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 No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.
Which operating system you favour and why?
General Tech 10 Answers
What are the most popular tech portals in India?
General Tech 7 Answers
What are best technologies available today for education / aiding learning?
General Tech 3 Answers
What professional training certifications are most marketable?
General Tech 9 Answers
manpreet![Tuteehub forum best answer]()
Best Answer
2 years ago
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
json">
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"
}