0

So I'm working on this school project and I'm trying to implement PWA. However, it doesn't seem to work like it should.

I added PWA to the project and it seems to work fine when I execute the ng build --prod command and then run a http-server by using the http-server -p 8080 -c-1 .\dist\Bookstore\ command. However, in order for this to work I had to modify my main.ts file like described in this post.

I'm guessing the problem has to do with how it's build and that's why it's not working on my school project live build? Or could it have to do with the fact that my website does not enforce HTTPS and HTTP links don't redirect to HTTP, because if I'm not mistaken a PWA requires HTTPS or production version in order to function? EDIT: HTTPS works now.

//Main.ts file

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'hammerjs';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('ngsw-worker.js');
  }
}).catch(err => console.log(err));}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Builder version: "@angular-devkit/build-angular": "^0.900.6"

//manifest.webmanifest

{
  "name": "Bookstore",
  "short_name": "Bookstore",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [...] //Shortened for obvious reasons
}
Ruben Szekér
  • 1,065
  • 1
  • 10
  • 21
  • Yes HTTPS is a requirement for is to be a valid working PWA – Mathias Mar 17 '20 at 11:38
  • 1
    Also, run the lighthouse tool to discover hints to fix any other issues you may have. Looks like you may need to adjust your start_url – Mathias Mar 17 '20 at 11:41
  • @Mathias Thanks for you answer! I tooled around a bit with the lighthouse tool and changed my `scope` and `start_url` to various things, but I can't seem to find what would make it work. Do you have any idea? I added the manifest.json file up here. – Ruben Szekér Mar 17 '20 at 15:10
  • Is your PWA @ /books ? Have you tried putting that in the start_url? or are you doing some sort redirect to that? – Mathias Mar 17 '20 at 22:10
  • In angular routing the path `''` redirects to `'books'` and I did try putting that there, but I'm not aware how much of an importance `.` and `/` are in the start_url, because I'm not 100% sure on what variants I've tried. – Ruben Szekér Mar 17 '20 at 22:23

0 Answers0