Using service workers with Cloudinary!

What's inside?

The main directory consists of an index.js script and the templates directory containing service worker file and its configuration.

This is published to NPM as @cloudinary/create-cloudinary-service-worker-lab allowing it to be run with the npx or yarn create commands.

Example:

yarn create @cloudinary/cloudinary-service-worker-lab
npx @cloudinary/create-cloudinary-service-worker-lab

Those commands will copy the service worker files to the desired location (working directory by default, can be overriden with -p | --path parameter).

Example:

yarn create @cloudinary/cloudinary-service-worker-lab --path my-app/src
npx @cloudinary/create-cloudinary-service-worker-lab --path my-app/src

The script accepts also a --verbose flag to provide additional runtime information. See --help for more options.

Demo project

Besides the main package this repository contains also the demo application showing the example use case. It includes a small website with images that does not use Cloudinary. You can run it locally, use the @cloudinary/create-cloudinary-service-worker-lab script and enable it to see the difference.

In order to check it yourself please clone this repository and run the following.

cd demo
yarn
yarn start

# if you prefer to use npm please run the following
cd demo
npm install
npm start

You should have a working page without service workers running locally. In order to enhance it with the power of the Cloudinary service worker run the following:

yarn create @cloudinary/cloudinary-service-worker-lab

# if you prefer to use npm please run the following
npx @cloudinary/create-cloudinary-service-worker-lab

The service worker is now copied to your (demo) project directory. Please edit index.html and add the service worker setup script cloudinaryServiceWorkerSetup.js.

<script src="./cloudinaryServiceWorkerSetup.js"></script>

You're done! Once you refresh the page the service worker should be registered. Once you refresh the page for the second time all assets will be served through cloudinary. You can edit the config JSON inside the cloudinaryServiceWorkerSetup.js file to customize the behaviour.

Disclaimer

Cloudinary makes no warranties regarding the currency, accuracy or completeness of the information provided herein (“Information”). Such Information could include technical or other mistakes, inaccuracies or typographical errors and may be out of date, and Cloudinary makes no commitment to update it. Cloudinary expressly reserves the right without prior notice to make changes to the Information made available or to cease publication temporarily or permanently. Cloudinary assumes no responsibility for errors or omissions in the Information. In no event will Cloudinary be liable to you or any third parties for any special, punitive, incidental, indirect or consequential damages of any kind, or any damages whatsoever, including, without limitation, those resulting from loss of use, data or profits, whether or not Cloudinary has been advised of the possibility of such damages, and on any theory of liability, arising out of or in connection with the use of the Information. The use of the Information is done at your own discretion and risk and with agreement that you will be solely responsible for any damage to your computer system or loss of data that results from such activities. The Information will not create any warranty for the software provided or made available by Cloudinary in connection with the Information.