{"id":18131851,"url":"https://github.com/tpiros/cloudinary-workbox-plugin","last_synced_at":"2025-04-15T23:07:01.821Z","repository":{"id":57200812,"uuid":"165715686","full_name":"tpiros/cloudinary-workbox-plugin","owner":"tpiros","description":"Official Cloudinary plugin for Workbox.js","archived":false,"fork":false,"pushed_at":"2019-03-19T21:07:54.000Z","size":108,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T02:21:54.074Z","etag":null,"topics":["cloudinary","plugin","workbox"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tpiros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-14T18:47:36.000Z","updated_at":"2022-02-19T13:16:55.000Z","dependencies_parsed_at":"2022-09-16T15:12:00.960Z","dependency_job_id":null,"html_url":"https://github.com/tpiros/cloudinary-workbox-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpiros%2Fcloudinary-workbox-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpiros%2Fcloudinary-workbox-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpiros%2Fcloudinary-workbox-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tpiros%2Fcloudinary-workbox-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tpiros","download_url":"https://codeload.github.com/tpiros/cloudinary-workbox-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246363721,"owners_count":20765332,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary","plugin","workbox"],"created_at":"2024-11-01T12:09:26.498Z","updated_at":"2025-03-30T18:31:33.296Z","avatar_url":"https://github.com/tpiros.png","language":"JavaScript","readme":"# Cloudinary Workbox.js Plugin\n\nThe official [Cloudinary](http://cloudinary.com) plugin for [Workbox.js](https://developers.google.com/web/tools/workbox/).\n\n# Usage instructions\nThe installation will place the plugin itself under the `node_modules` folder, therefore we'll need to copy it over to a location where we can use it from in the service worker. The easiest way to copy it would be via gulp:\n\n```javascript\nconst copyCloudinaryPlugin = () =\u003e gulp.src(['node_modules/cloudinary-workbox-plugin/dist/cloudinaryPlugin.js']).pipe(gulp.dest('build'));\ngulp.task('copy-cloudinary-plugin', copyCloudinaryPlugin);\n```\n\nTo use the plugin, we'll need to make use of the `importScripts()` method which synchronously imports scripts into the service worker's scope. We can achieve this via Workbox's `generateSW()` method:\n\n```javascript\nconst serviceWorkerImportscript = async () =\u003e {\n  return await workboxBuild\n  .generateSW({\n    swDest: 'build/sw.js',\n    globDirectory: 'build',\n    importScripts: ['./cloudinaryPlugin.js'], // location of the plugin\n    runtimeCaching: [{\n      urlPattern: '/api/news',\n      handler: 'staleWhileRevalidate',\n      options: {\n        cacheName: 'api-cache',\n      }\n    }, {\n      urlPattern: new RegExp('^https:\\/\\/res\\.cloudinary\\.com\\/.*\\/image\\/upload\\/'),\n      handler: 'cacheFirst',\n      options: {\n        cacheName: 'cloudinary-images',\n        plugins: [{\n          requestWillFetch: async ({ request }) =\u003e cloudinaryPlugin.requestWillFetch(request)\n        }]\n      }\n    }]\n  });\n};\n```\n\n\u003e Note that copying the plugin should happen before the above build task.\n\n## Prerequisite\nIf you'd like to modify / build this plugin make sure to install the dependencies first by running `npm i`.\n\n## Build\nTo build the plugin please execute `npm run build`. The result of the build is going to be a `dist` folder with a single `cloudinaryPlugin.js` file along with a `cloudinaryPlugin.min.js` file for a minified build.\n\n## Usage Instructions\nFor further information please visit [https://blog.fullstacktraining.com/a-cloudinary-plugin-for-workbox/](https://blog.fullstacktraining.com/a-cloudinary-plugin-for-workbox/)\n\n## Test\nTo test the plugin please execute `npm test`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpiros%2Fcloudinary-workbox-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftpiros%2Fcloudinary-workbox-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftpiros%2Fcloudinary-workbox-plugin/lists"}