New ionic project PWA error

Ionic Framework
1

I have installed a new ionic project

ionic start myApp

ng add @angular/pwa

ionic build --prod

I have uploaded www into IIS webserver with https valid certificate.
Everything works fine. But there is no “Add to Home Screen Button” when accessing from mobile.

Here is my LightHouse report.

pwa
pwa645×758 36.9 KB

When I make the browser to “Offline” mode and refresh, it doesn’t refresh. It gives http error.

2

Hi
do you rewrite all requests to index.html? (IIS setting)
Tom

3

yes…
web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
	<clear />
	 <rule name="Redirect all requests to https" stopProcessing="true">
       <match url="(.*)" />
         <conditions logicalGrouping="MatchAll">
           <add input="{HTTPS}" pattern="off" ignoreCase="true" />
         </conditions>
         <action 
            type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" 
            redirectType="Permanent" appendQueryString="false" />
     </rule>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
     
    </rules>
  </rewrite>
</system.webServer>
</configuration>
4

Maybe check the server for all get requests

The error says it doesnt have a web manifest

Angular pwa does create one, so maybe also check its existence in the www folder as well if it is pushed to the server

Also in the browser devtools under network you can see if it tries to get one and if it 403s

Next, u can check if index.html has a reference to the manifest file

5

Below is manifest.webmanifest

{
  "name": "app",
  "short_name": "app",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

See the file structure attached

pwa
pwa461×935 41.5 KB

pwa2
pwa2959×67 3.39 KB

This is a fresh ionic project. I didn’t change any coding.
Please look into that

6

I guess then there is nothing wrong on the ionic side - nothing seems wrong from the face of it

As per earlier suggestion, u may want to inspect how it is served on iis

Did u check the hosting guide on angular.io? It has some hints on how to setup some of the common servers

7

found the solution…

Many thanks