Skip to content

Home

Jump to bottom
Christophe Rosset edited this page Aug 7, 2016 · 2 revisions

The first goal of this project was to practice on RxJS. When I wanted to experiment on offline and Service Worker features, it seemed to fit.

You will find in that wiki all the things that aren't about RxJS on this project.

##AppCache

AppCache has been removed from Web Standards. It may be deprecated, it's the only cross-browser "API" that let's you provide offline browsing to your websites ...

###Runtime

You need a manifest.appcache file where you reference:

  • the files you want to cache
  • the network calls that are allowed when you're offline
  • the fallback urls when you're offline

When you develop an SPA, the problem is that (most of the time), you only have a single entry point: index.html. If you reference the manifest in that file like:

<html manifest="manifest.appcache">
  ...
</html>

Your index.html will automatically be added to the cache as the "Master entry" and if you want to serve an other file, say offline.html, when you're offline (by taking advantage of the FALLBACK section of the manifest), you will have problems, because ...

Master entries: These are resources added to the cache because a browsing context visited by the user included a document that indicated that it was in this cache using its manifest attribute.

This is why you'll find in my index.html the following snippet:

<iframe src="./iframe-inject-appcache-manifest.html" style="display: none"></iframe>

In the iframe-inject-appcache-manifest.html, you'll only find:

<html manifest="manifest.appcache"></html>

That way, iframe-inject-appcache-manifest.html is the Master entry, and index.html is not cached and can be falled back to offline.html ...

Try the app in offline mode, you'll find out the page changes.

###Build / Dev workflow

Some things to know about AppCache:

  • You can't invalidate a specific resource of the cache (you have to invalidate all of them)
  • To invalidate the cache, the most reliable way to do it, is to update the manifest file
  • Modifying comments in the manifest will update it (this is used to add a version in the comments)

I use appcache-webpack-plugin to generate the manifest, combined with html-webpack-plugin, to generate the offline.html page (from the same template for index.html).

In development (when you're using webpack-dev-server for reloading), I make sure to generate a manifest.appcache that wont cache anything, not to get in the way of the developer.

In production, the manifest.appcache generated contains the names of the files generated by webpack.

So, no need to worry about the manifest, it's automatically managed. If you need to generate a build with a manifest that wont cache anything, just use APPCACHE=false ...

##Service Workers

Section to come - Work still in progress ...

Clone this wiki locally