create-cloudinary-service-worker v0.3.0
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 create-cloudinary-service-worker
allowing it to be run with the npx
or yarn create
commands.
Example:
yarn create cloudinary-service-worker
npx create-cloudinary-service-worker
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-service-worker --path my-app/src
npx create-cloudinary-service-worker --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 create-cloudinary-service-worker
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-service-worker
# if you prefer to use npm please run the following
npx create-cloudinary-service-worker
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.