PWA display standalone & fullscreen not working after add ServiceWorkerModule in Angular 5

Question

PWA display standalone & fullscreen not working after add ServiceWorkerModule in Angular 5

9.2k views Asked by kklimczak At 06 January 2018 at 13:21

Current behavior

After add configuration to app module environment.production ? ServiceWorkerModule.register('./ngsw-worker.js') : [] and enable serviceWorker in .angular-cli.json, my application after install on my device (LG G6) through Chrome with property display in manifest.json set on standalone or fullscreen after open on my device, the application always open in browser in new tab. When I remove service worker config (row in app module), app with only manifest open in standalone or fullscreen mode.

Expected behavior

After install app, application should open in stadalone or fullscreen mode, depends on set value in manifest.json.

Minimal reproduction of the problem with instructions

I have application generated with version 4.3 and updated to 5.1.3, add @angular/service-worker and generate with angular cli build with --prod. For serving the application, I use port forwarding in my chrome.

manifest.json

{
  "short_name": "FindPark",
  "name": "Find Nearby Car Parks",
  "start_url": "/search",

  "theme_color": "#206886",
  "background_color": "#ffffff",

  "display": "standalone",
  "orientation": "portrait",

  "icons": [
    {
      "src": "/assets/favicon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/assets/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

What is the motivation / use case for changing the behavior?

I don't know why isn't working with my application because I find example similar to my app https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/ and I clone and build and work fine (display as standalone app).

Environment


Angular version: 5.1.3 (also checked with 5.0.0, 5.0.3, 5.1.0)


Browser:
- [x] Chrome (desktop) version 63.0.3239.108
- [x] Chrome (Android) version 63.0.3239.111
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 6.11.4  
- Platform:  Linux 

Others:
@ngrx 4
rxjs 5.5.6
Android

Original Q&A

There are 2 answers

**Roman** · Answer 1 · 2018-01-06 14:54:23

I guess the manifest.json file is missing in the dist folder when you build your app.

Probably you're missing the manifest.json in the assets array in .angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "chronery-web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "manifest.json"  // Add this if it's missing!
      ],
      "index": "index.html",
      "main": "main.ts",

And make sure you added it to your index.html:

<head>
    ...
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#009688">
</head

**IanC** · Answer 2 · 2018-03-21 18:27:07

You say you are using port forwarding - I am not quite sure what that means here. In my experience, progressive web apps with service workers do not work correctly unless served from a standard HTTPS address. When I launch my app from a correctly configured HTTPS with a non-standard port (for example, 4567 rather than 443) the address bar will show in the app on Android.

Without the service worker (ie just using appcache) the same app from the same URL works as expected on Android with no address bar at the top.

If you keep the service worker and change the hosting so that HTTPS is on the standard 443 port, again the app works as expected on Android and opens with no address bar at the top. This seems like a bug?

TechQA.

PWA display standalone & fullscreen not working after add ServiceWorkerModule in Angular 5

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

There are 2 answers

Related Questions in ANGULAR

Related Questions in PROGRESSIVE-WEB-APPS

Related Questions in MANIFEST.JSON

Related Questions in DISPLAYMODE

Popular Questions

Popular Tags

Trending Questions