угловой 6 пва не работает - PullRequest
0 голосов
/ 16 мая 2018

Я сделал простой

ng new cx --service-worker
cd cx

Первое наблюдение: я не вижу работника сервиса, установленного с помощью этого в package.json или какой-либо записи модуля и т. Д. Это ошибка?

Я перешел и использовал

ng add @angular/pwa

Это добавляет работника службы. Однако при запуске я вижу ошибку в консоли:

Manifest.json

Unexpected error line 1 col 1, unexpected token;

mnifest.json

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

Я проверил, что файл существует в src / location с непустым содержимым. я сохранил эти значения по умолчанию на данный момент.

ng -v 
Angular CLI: 6.0.1
Node: 8.11.1
OS: darwin x64
Angular: 6.0.2

Ответы [ 4 ]

0 голосов
/ 02 августа 2019

Для меня исправление было в IIS. Мне пришлось добавить MIME-тип для обработки файла manifest.webmanifest.

Расширение файла:

.webmanifest

MIME Тип:

application/manifest+json
0 голосов
/ 17 мая 2018

Вы должны запустить инструменты Chrome Dev -> Аудит -> Выполнить аудит -> Прогрессивное веб-приложение и предоставить нам этот снимок экрана, без которого это всего лишь черный ящик, на котором соблюдаются все критерии PWA и что нет.

В отчете должно быть четко указано, в чем проблема с вашим PWA, и помочь вам решить проблему. Если нет, пожалуйста, опубликуйте скриншот, и мы поможем вам в этом.

0 голосов
/ 07 августа 2018

У меня была такая же проблема.Я запустил приложение, но потом захотел добавить @angular/cli в проект.Ничего не помогло, хотя я сравнил это с https://github.com/ng-model/pwa/. Я заметил, что они не сделали то же самое, что я делаю ниже.

В итоге я добавил следующее в конец моего index.html:

<script>
  if ( 'serviceWorker' in navigator ) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/service-worker.js');
    });
  }
</script>

Для Angular 6+ имя файла изменилось на ngsw-worker.js

<script>
  if ( 'serviceWorker' in navigator ) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/ngsw-worker.js');
    });
  }
</script>
0 голосов
/ 16 мая 2018

Я не обновлялся до Angular 6 сам. Но вот несколько ссылок, которые могут быть полезны для устранения ошибок и настройки manifest.json.

https://scotch.io/tutorials/how-to-build-progressive-web-apps-with-angular https://developers.google.com/web/fundamentals/web-app-manifest/

...