0

What should be start_url in manifest.json in angular application.

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

should it be "/" ot "." or "/index.html" and do i need to listen to "beforeinstallprompt" event for service worker? or any other if i am missing anything. Thanks in advance!

harsh
  • 247
  • 1
  • 2
  • 12

1 Answers1

0

Start URL is will be the homepage of your app when you click the icon of your PWA after adding to home screen. If you have a index.html in the root of the project and have a manifest in the same path, you can give “/index.html” or you can also give a fully qualified uRL with domain name like “https://www.example.com/

You need to listen for beforeinstallprompt to use that to show “add to home screen” install banner. You can add to home screen from chrome menu regardless of how you handle this event though. This event is for inpage install banner.

Anand
  • 9,672
  • 4
  • 55
  • 75
  • Thanks Anand for reply, I have figured out for angular app we can give simple "/" or relative path. Also, By default all browsers are showing popups for pwa installation and as per google docs we need beforeinstallprompt event from 68 version and above. – harsh Jun 07 '18 at 17:02
  • Start URL is nothing specific to Angular or any specific framework. All it matters is based on how ur build folder looks and how your web app resolved the start URL to a page. If it can, then all good. If you give a simple “/“ it’s equivalent to giving “https://example.com” in which case you can have your home page as index.html or index2.html or what ever as long as it resplves to a home page and when you give “/index.html” it’s equivalent of “https://example.com/index.html” .. yes it’s related path to qualified URL building. – Anand Jun 07 '18 at 17:16
  • yupp agree start_url has nothing to do with angular. I was just giving example in context of spa that path should be relative – harsh Jun 07 '18 at 17:37
  • I understand you have /index.html working .. all I’m trying to say is, that’s not the only value which will work regardless of the framework. Just trying to explain how start url works in general. I’m adding comments in between work and I guess u added in between. – Anand Jun 07 '18 at 17:59
  • And on beforeinstallprompt, It’s supported from chrome version 45. It’s just that chrome made it mandatory to use that to trigger the install banner in recent version as it they found more users didn’t use the addd to home screen if it’s shown as soon as they enter the site. It would be more appropriate to show in a screen where as a developer thinks user is going to like our site. It’s more of a good practice made mandatory and so u can have the event logic and gen for older version. Accept the answer if it solves your question. – Anand Jun 07 '18 at 18:14