Service worker allowing app name to change in angular 7

Question

I have added the PWA to my existing angular app, after which browser is allowing to add my app to home screen with mentioned app icon, name, description etc. The issue is while adding app to home screen it allows the user to change the app name which I want to restrict as Myntra and other products out there are doing. I am attaching the screen shots of my app and Myntra. Thanks in advance.

Manifest.json -

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

Probably `scope` is a problem. Try to delete that property from manifest.json. More about that you can read here https://developer.mozilla.org/en-US/docs/Web/Manifest/scope — Patryk Panek, Jul 12 '19 at 11:08
@PantryPanek Its not working even after removing the scope attribute — Palash Agrawal, Jul 12 '19 at 11:18
Do you have your app deployed somewhere? Probably it's related with service worker or manifest directory, but I'm not sure. Service worker might not initialise properly, or app is missing manifest.json somehow. To test service worker you need to host your app like it's described inside Angular Docs (https://angular.io/guide/service-worker-getting-started). **EDIT:** If you can change your app name it means PWA is not working at all. — Patryk Panek, Jul 12 '19 at 12:09
@PantryPanek My application is hosted on nginx and we are using azure cloud and it has manifest.json file as well. I can see the mentioned app icon with different resolutions on different devices in PWA, also short name mentioned in manifest is visible. So may be we can say my PWA is working somewhat. — Palash Agrawal, Jul 12 '19 at 12:37
@PalashAgrawal do you have anywhere some logic that might allow to change the PWA name? Did you follow all the steps as described here: https://dev.to/paco_ita/install-a-pwa-on-the-user-s-device-step-2-27pa — Francesco, Jul 12 '19 at 13:06

Mathias · Answer 1 · 2019-07-12T14:27:45.820

0

You are testing the Add To Home Screen (A2HS) menu item on a site that is not HTTPS.
That menu link is available for all sites, not just PWAs.
When doing that, a user can modify the name of the Icon.

First
1. Deploy your website to a HTTPS host (REQUIRED)
2. Verify with the Chrome Lighthouse tools that you have an installable PWA

Then when a user clicks on the A2HS link they will NOT be able to modify the name.

Lighthouse will give you many great hints on how to get things right.

edited Jul 12 '19 at 14:27

answered Jul 12 '19 at 14:19

Mathias

4,243
4
25
34

If you don't have a HTTPS host yet https://glitch.com/ is a great FREE option for quick testing. – Mathias Jul 12 '19 at 14:40
@PalashAgrawal if you do it this way does it work the way you expect? – Mathias Jul 14 '19 at 11:00
Thanks for the answer. The image which I posted is for representational purpose, my actual app is on https only. secondly I ran the light house tests on same it is giving error - "this page is controlled by a service worker however the start_url is not in the scope of service worker". – Palash Agrawal Jul 19 '19 at 08:14
Once you fix all lighthouse errors on your site and it is a PWA, the A2HS shortcut will be locked. Are you testing with a subdomain, port or subfolder? If yes, then you may need to change the "start_url": "/" value in your manifest file to match. – Mathias Jul 19 '19 at 11:10

Service worker allowing app name to change in angular 7

1 Answers1