I created an Angular PWA and it works if you visit https://domain.tld/index.html. The index.html is also removed from the URL since "/" is equivalent to the index.
With that said if you refresh the page offline it no longer works as expected. The url changes to https://domain.tld/. If you are offline and visit https://domain.tld/index.html it works and it's served from the cache. So it only works if you access /index.html if you visit "/" it throws a 504.
I don't know how to solve this issue.
ngsw-config.json:
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
],
"dataGroups": [
{
"name": "daily-api",
"urls": ["https://api-link.net/daily.json"],
"cacheConfig": {
"strategy": "freshness",
"maxSize": 10,
"maxAge": "3d12h",
"timeout": "3s"
}
}
]
}
I thought the issue might be the "index" property but I don't understand why "/" != "/index.html" for the offline PWA.
I'm using nginx to serve the content so maybe that is the issue?
....
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
...
My angular routes consist of:
const routes: Routes = [
{
path: '',
loadChildren: () => import('./rooms/rooms.module').then(m => m.RoomsPageModule)
},
{
path: 'rooms',
redirectTo: '',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
];
I'm at a loss for trying to solve this. I can't seem to find any resources with why offline works on index.html but not on /.