javascriptangularinternet-explorerprogressive-web-appshtml5-appcache

Disable HTML5 AppCache Of All browser Except IE

I have an Angular based PWA app (based on the service-worker) which is working fine offline in all modern browsers, To support IE I have added "manifest.appcache" which enable IE works offline by HTML5 App Cache.

Is there Any way which can disable Appcache in all other browsers except IE ? Currently in modern browsers Appcache is also working along with service worker

i have tried below 

<html lang="en" manifest="manifest.appcache" *ngIf="isIE">
<html lang="en" *ngIf="!isIE">

In component 

const isIE = /msie\s|trident/i.test(window.navigator.userAgent);

But Seems HTML render before the component set value of the isIE

Solution

  • I haven't tested in on IE, but from this SO answer it looks like it will not work if the manifest is set client side.

    In this case, then you can set this attribute server side using angular universal.

    import {Request} from 'express';
import {REQUEST} from '@nguniversal/express-engine/tokens';

public constructor(@Inject(PLATFORM_ID) private platformId, 
            @Optional() @Inject(REQUEST) protected request: Request,
            @Inject(DOCUMENT) private  doc: Document, private renderer: Renderer2)
    {

        if(!isPlatformBrowser(platformId))
        {
          const isIE = /msie\s|trident/i.test(request.headers['user-agent']);
          if(isIE)
          {
            this.renderer.setAttribute(this.doc.documentElement,"manifest","manifest.appcache");
          }
        }

    If you are not using angular universal and cannot/do not want to use it, you need to find some other way to modify the index.html file server side before returning it.