I have an Angular 8 app, and I ran this command to try to set up PWA functionality:
$ ng add @angular/pwa --project my-app
From there, the files seem to be set up as you would expect for a PWA, like described here.
No errors in development.
However, I have now put the app into production, hosted through AWS Amplify, and I believe this attempt at adding PWA functionality has created problems.
Once a browser loads the production app, it gets "stuck" on that version of the app. So for example, my chrome browser still loads with the first version of the app from several days back, even though I have updated the app multiple times on amplify since. This has also happened on other browsers like mobile safari.
When it loads that old version, it shows this error in the inspector:
Manifest: Line: 1, column: 1, Syntax error.
So in some way AWS is not getting along with something regarding the PWA functionality. Is there a known fix for this?
This app is in production now, so I'd really appreciate your help.
More Details:
For some more background, my index.html includes the following:
<link rel="manifest" href="manifest.webmanifest">
And in app/src folder, is the manifest.webmanifest:
{
"name": "My App",
"short_name": "My App",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "./",
"start_url": "./",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
I'll also note that from the beginning getting the Angular app running on Amplify created a few issues. Adding the following was required to get the app working in the first place:
Rewrites and Redirects:
Source Address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>
Target Address
/index.html
Type
200 (Rewrite)
Like I noted in the question, in order to get Amplify to work with Angular, I had to add a redirect like this:
Source Address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|map|json|mp3|tff)$)([^.]+$)/>
Target Address
/index.html
Type
200 (Rewrite)
It seems like what happened as a result is that Amplify would be redirecting the manifest file (which was not in the group of file types under "Source Address"), so nothing at all would be showing for the manifest file.
I added the webmanifest file type to the group, and it appears to be working without error now:
Source Address
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|map|json|mp3|tff|webmanifest)$)([^.]+$)/>
Target Address
/index.html
Type
200 (Rewrite)