1

I'm not sure what I'm doing wrong. I'm using Ionic 5 with Angular 11. I have a service worker ngsw-config.json and a webmanifest. What are the correct steps to take to make my web app work offline? To clarify, I don't need to make any calls to an external database. All my data is there. Everything around it just stops working when I go offline. The ui just stops responding whenever I go offline giving me a 'Loading chunk X error'

Other things I've checked:
-Preloading all modules in my app-routing.module.ts
-.htaccess file

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)"
        ]
      }
    }
  ]
}

Webmanifest

{
  "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]
Furkan Öztürk
  • 441
  • 4
  • 21
  • I doubt it's your .htaccess - if you're working offline all files are cached; the .htaccess plays are role when your service worker is getting files/content from the webserver, but not afterwards. Are you using only Apache or also Nginx? – Herbert Van-Vliet Apr 11 '22 at 12:45

0 Answers0