I have an Ionic (5) Angular app with the PWA packges set up as ng add @angular/pwa --project app(in angular.json it's still named 'app', so --project app should be correct).
When i serve the production build using serve, everything works fine on my local machine (i get offered to install the pwa app, offline mode works, etc).
But i want to host the PWA on my server from a subdirectory as in https://example.com/www.
So i adjusted index.html <head> to contain <base href="/www/ /> and put a .htaccess into the www-folder on my server containing
<IfModule mod_rewrite.c>
RewriteEngine On
# -- REDIRECTION to https (optional):
# If you need this, uncomment the next two commands
# RewriteCond %{HTTPS} !on
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
# --
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]
</IfModule>
It works fine, when im in the browser (Chrome, Firefox, Chrome on Androd, Firefox on Android, Safari on iOS) and navigate through it. But when i reload the page it shows an error for a brief moment and does load the page shortly after successfully (i guess the SW tries to load from cache and fails and then loads stuff from the server?). But when i go offline in Chrome on Desktop the page breaks and shows (in the console)
runtime-es2015.f19a664c8f87e8c99aa7.js:1 GET https://{myserver}/www/96-es2015.167e50f41d797c85f208.js net::ERR_ABORTED 504 (Gateway Timeout)
23:22:29.171 main-es2015.177342d8c81462cb0a8c.js:1 ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 96 failed.
(error: https://{myserver}/www/96-es2015.167e50f41d797c85f208.js)
If i go offline and reload the page chrome displays me a 504 ("{myserver} took too long to respond") HTTP Error Page. (Though, no output in the Console or Network Tab in Dev Tools.)
Also i'm not offered to install the PWA in Chrome (Deskop).
When i use Chrome (Android) to add it to my home screen via the menu (because it won't offer to install it itself), and launch the PWA there is an dialog box saying "Can't connect to site" which disappears after a few seconds then displaying the site correctly (most likely loaded from the web).
When i use Firefox on android and install the PWA to my Home Screen, then launch it, a toast appears for a short period of time saying "Insecure ConnectioN" then switches into firefox which display a "Corrupted Content Error" message.
The manifest contains
"scope": "./",
"start_url": "./",
Not sure wether this might cause it, but removing the scope-entry or setting it to /www/ does not make a difference either.
Obviously i really have no clue of how to set this up to work correctly as i'm trying for a day now :/...
What am i doing wrong? How to set this up?
Normally for such a case with Angular you need to build your app with --base-href parameter like so:
ng build --base-href=/subfolder/
So in your case:
ng build --base-href=/www/
This should set all needed things for you.
See this example with github pages: https://angular.io/guide/deployment#deploy-to-github-pages