Sorry for the long post, but I have a spring boot app and need to set it up as a simple PWA.
It works perfect locally, but every time I commit my changes to AWS (GitHub -> AWS Code Pipeline -> Elastic Beanstalk) I run into this frustrating error.
Note, my port is set to 5000 (not spring boot's default 8080 because 5000 is what AWS expects)
File tree overview
Resources
|
├───static
│ │ service-worker.js
│ │ site.webmanifest
│ │
│ ├───css
│ │ site.css
│ │
│ ├───images
│ │ android-chrome-192x192.png
│ │ ...
│ │
│ └───js
│ site.js
│
└───templates
│ index.html
│ ...
│
└───fragments
elements.html
service-worker.js
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('ads-cache').then(function(cache) {
try{
return cache.addAll([
'/',
'/css/site.css',
'/js/site.js'
]);
} catch(error){
console.log(error);
}
})
)
});
self.addEventListener('activate', function(event) {
// ...
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(cachedResponse) {
return cachedResponse || fetch(event.request);
})
);
});
site.webmanifest
{
"name": "The app name",
"short_name": "The short name",
"description": "Details about the app",
"icons": [
{ "src": "images/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "images/logo.png", "sizes": "200x105", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/?source=pwa",
"id": "/?source=pwa",
"dir": "auto",
"lang": "english",
"orientation": "any",
"scope": "/"
}
site.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
scope: '.'
})
.then(function(registration) {
console.log('Service worker registration successful, scope is:', registration.scope);
})
.catch(function(error) {
console.log('Service worker registration failed, error:', error);
});
}
Localhost
Everything works fine
But then once the site is live on AWS I keep getting this annoying (and very unhelpful) message
And I also noticed this which makes me think it's got something to do with the file structure maybe?
service-worker.js through DevTools sources tab
Am I doing something wrong "file structure wise" (I'm using Thymeleaf)? Is there something I need to change in AWS? Could this be a cloudflare thing? (my site is routed through cloudflare to AWS)
