My Angular progressive web application is not searchable

Question

I am building an Angular progressive web application. I want my application to behave like a native application however I am facing some problems which should not be there if you want it to behave like a native application.

I have built it as a PWA and It is successfully adding on my home screen.The application and icon both are showing on the home screen. But the issue I am facing is:

• When I am searching for it, just like I am searching for other applications on my phone, then it is not coming in the list. But I have tested this scenario with the Flipkart Lite, I have added that to my homescreen and when I am searching for it, then it is appearing in the list of applications.

My manifest.json is:

{
  "name": "beautyOfSoul",
   "gcm_sender_id": "103953800507",
  "short_name": "beautyOfSoul",
  "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"
    }
  ]
}

My app.module.ts file is importing the service worker as:

environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [], ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })

You can find the screenshots as below:

Please let me know what can I do to achieve this.

Answer 1

Check whether you have added the meta tags to your HTML. Certain mobile OS needs certain meta tags for PWA to work.

Please check this for more info on PWA meta. https://github.com/gokulkrishh/awesome-meta-and-manifest

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="App name">
<link rel="icon" sizes="192x192" href="./logo.png">

<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App Name">
<link rel="apple-touch-icon" href="./logo.png">

<!-- TODO: Tile icon for Win8 (144x144 + tile color) -->
<!-- <meta name="msapplication-TileImage" content="ms-touch-icon-144x144-precomposed.png"> -->
<!-- <meta name="msapplication-TileColor" content="#3372DF"> -->

<meta name="theme-color" content="#9fa2a3">