Автономный и полноэкранный режим отображения PWA после добавления ServiceWorkerModule в Angular 5

Question

Текущее поведение

После добавления конфигурации в модуль приложения environment.production ? ServiceWorkerModule.register('./ngsw-worker.js') : [] и включить serviceWorker в.angular-cli.json мое приложение после установки на мое устройство (LG G6) через Chrome со свойством display в manifest.json установлен на standalone или же fullscreen после открытия на моем устройстве приложение всегда открывается в браузере в новой вкладке. Когда я удаляю конфигурацию работника службы (строка в модуле приложения), приложение с открытым манифестом открывается только в автономном или полноэкранном режиме.

Ожидаемое поведение

После установки приложения приложение должно открываться в стандартном или полноэкранном режиме, в зависимости от установленного значения в manifest.json.

Минимальное воспроизведение задачи с инструкциями

У меня есть приложение, созданное с версией 4.3 и обновленное до 5.1.3, добавьте @angular/service-worker и сгенерируйте с помощью angular cli build с --prod, Для обслуживания приложения я использую переадресацию портов в моем 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/**"
      ]
    }
  }]
}

Какова мотивация / вариант использования для изменения поведения?

Я не знаю, почему не работает с моим приложением, потому что я нахожу пример, похожий на мое приложение https://angularfirebase.com/lessons/hnpwa-angular-5-progressive-web-app-service-worker-tutorial/ и Я клонирую, собираю и работаю нормально (отображается как отдельное приложение).

Среда

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 

Answer 1

Вы говорите, что используете переадресацию портов - я не совсем уверен, что это значит здесь. По моему опыту, прогрессивные веб-приложения с работниками сферы обслуживания не работают правильно, если они не обслуживаются со стандартного адреса HTTPS. Когда я запускаю свое приложение из правильно настроенного HTTPS с нестандартным портом (например, 4567, а не 443), адресная строка будет отображаться в приложении на Android.

Без работника службы (т.е. только с помощью appcache) то же самое приложение с тем же URL-адресом работает, как и ожидалось, на Android без адресной строки вверху.

Если вы оставите работника сервиса и измените хостинг так, чтобы HTTPS был на стандартном порте 443, приложение снова работает должным образом на Android и открывается без адресной строки вверху. Это похоже на ошибку?

Answer 2

Я думаю, manifest.json файл отсутствует в папке dist при сборке приложения.

Возможно, вам не хватает файла manifest.json в массиве assets в .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",

И убедитесь, что вы добавили его в свой index.html:

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