How do i tell the browser to use cache manifest if the browser doesn't support service workers?

Question

I have an Angular 4 app that needs to run offline. Service workers do the job brilliantly but it isn't supported by Safari which is a required browser that it needs to run on.

I need to generate a cache manifest file if service workers is not supported by the browser then for the browser to use the cache manifest file once the browser goes offline

current code (typescript):

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('../../service-worker.js').then(function(registration) {
    //TODO: Implement Logging
  }).catch(function(err) {
    //TODO: Implement Logging
  });
} else {
  //Not currently supported on Internet explorer, Safari, IE Mobile and Safari Mobile. Use old Application Caching instead.
  console.log("Not Supported");
  //Use cache manifest
}

DrNio · Answer 1 · 2017-12-08T16:51:03.873

1

How about just create an element <link> in the else statement with all the required properties of the manifest file ? I guess you have to put that part of the script in the <head>

const linkMeta = document.createElement('link');
linkMeta.setAttribute('rel', 'manifest');
linkMeta.setAttribute('href', '/manifest.webmanifes');

and append it to the <head>

edited Dec 08 '17 at 16:51

answered Dec 08 '17 at 16:33

DrNio

1,936
1
19
25

Can you do this in typescript? – Callum Brankin Dec 08 '17 at 16:39
of course...in TS files you can write vanilla JS. For, the `script` to be in the head that is a different thing ... do you use some JS framework ? – DrNio Dec 08 '17 at 16:44
i meant with this way https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement – DrNio Dec 08 '17 at 16:48
I'll give it a go! – Callum Brankin Dec 08 '17 at 16:53
yes :) and let us know .. i haven't tried it. i think some other folks discussed here also https://stackoverflow.com/questions/4548342/dynamically-trigger-html5-cache-manifest-file – DrNio Dec 08 '17 at 16:55

score 0 · Answer 2 · answered Dec 09 '17 at 01:32

The appCache manifest is supported by iOS. This is how we made sites work offline for the past decade. If a page references an appCache manifest and a service worker, browsers that support service workers ignore appCache.

Also I think you are confusing web manifest with appCache manifest. They are two distinct things. appCache manages how to cache files for offline. A web manifest file provides meta data to the browser so it knows how to brand and rendering your site once it is added to the hone screen.

FWIW I have been building offline/mobile first web apps that rival native apps on iOS using appCache and localStorage/IndexedDB since about 2010. So you can absolutely do it :)

This is a presentation I gave at Velocity a few years ago https://youtu.be/GKxkzu0pHUc It might help you out.

How do i tell the browser to use cache manifest if the browser doesn't support service workers?

2 Answers2