如何通过 cdn 脚本注册 service worker。 如何使用外部 url 注册 service worker

Question

I have a cdn script file that should handles push notification settings for client websites.

    // cdn sdk.js
    const register = await navigator.serviceWorker.register("https://my_cdn_address.com/sw.js", {
        scope: "/",
    });

but i got this error:

The origin of the provided scriptURL ('https://my_cdn_address.com') does not match the current origin ('https://my_client_website.com').

Answer 1

Just Create a local service-worker.js and put your script in it like this.

importScripts( "https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js" );

Answer 2

Use a public CDN!

if you don't know what a CDN (Content Delivery Network) is look here

---

there is 2 way to use public cdn:

1. unpkg.com

unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:

" unpkg.com/:package@:version/:file "

so you can just publish an sw.js file and use it by unpkg to deliver it.

---

2. jsdelivr.com

with this website you can:

• load any project hosted on npm
• load any GitHub release, commit, or branch
• load any plugin from the WordPress.org plugins SVN repo

for example you can load a package published in npm like this:

" https://cdn.jsdelivr.net/npm/package@version/file "

the intersting feature in jsdelivr is it can minfied your filed even if it's not exist

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
" https://cdn.jsdelivr.net/npm/jquery@3.2.1/src/core.min.js "

if your code hosted in Github just do this:

" https://cdn.jsdelivr.net/gh/{username}/{repo@version}/{file} " 

example:

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js