How to make website offline accessible

  1. 1. Browser support – by time being
  2. 2. Requirement
  3. 3. 5 mins development

It is incredibly easy to make a rich web application like psdetch working offline with Service Worker. 5 minutes are all you need!

Browser support – by time being

  • Chrome
  • Firefox
  • Edge – In development
  • Safari – In development

More browser support details can be found here

Requirement

To make your online only web app (like https://studio.psdetch.com) working offline, your web app needs to use https for security request.

5 mins development

Very simple. The steps below works on any web apps:

  1. Follow this guide to install sw-toolbox
  2. Add service-worker.js at the root folder of your web app. Here, the location (root folder) is important.
  3. Add following script to index.html
1
2

<script src="/path/to/sw-toolbox/companion.js" data-service-worker="service-worker.js"></script>
  1. Add content to service-worker.js. You can follow the tutorial here. But most situation you can just use following scripts:
1
2
3
4
5
6
7
8
9
10
importScripts("/path/to/sw-toolbox/sw-toolbox.js");
/* this will cache all files of current web app with 
 * "fastest" strategy. 
 */
toolbox.router.get("/(.*)",toolbox.fastest);

/*
* Add external files here.e.g.
* toolbox.router.get("https://code.jquery.com/jquery-3.2.1.min.js",toolbox.fastest);
*/

You can check what I have used for psdetch.

And that’s it. Your whole web app can now work offline. With fastest strategy, response is always returned from Cache and updated immediately if possible. This dramatically increased user experience.

cat relax

js web
prev： next：