Работник службы не работает: «Ошибка загрузки фрагмента: Ошибка загрузки фрагмента 28»

#angular #ionic-framework #progressive-web-apps #service-worker #angular-pwa

Вопрос:

Я не уверен, что делаю что-то не так. Я использую Ионный 5 с угловым 11. У меня есть работник службы ngsw-config.json и веб-манифест. Какие правильные шаги необходимо предпринять, чтобы мое веб-приложение работало в автономном режиме? Чтобы уточнить, мне не нужно совершать никаких звонков во внешнюю базу данных. Все мои данные там. Все вокруг просто перестает работать, когда я отключаюсь. Пользовательский интерфейс просто перестает отвечать всякий раз, когда я отключаюсь, выдавая мне «Ошибку загрузки X»

Другие вещи, которые я проверил:
-Предварительная загрузка всех модулей в моем app-routing.module.ts
— файл.htaccess

ngsw-config.json

 {
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "Specto",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}
 

Веб-манифест

 {
  "name": "Specto",
  "short_name": "Specto",
  "theme_color": "#00B8E1",
  "background_color": "#F9F9F9",
  "display": "standalone",
  "scope": ".",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}
 

Edit: I’m fairly certain my .htaccess messes it up. Need to figure out what to change about to make it work as my knowledge about .htaccess and apache servers is very limited.

.htaccess

     Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_URI} !^/sw.js$ 
    RewriteRule ^ index.html [QSA,L]