Service Worker 未创建 networkFirst Cache

Question

我的服务人员：

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

//Use Workbox Precache for our static Assets

workbox.precaching.precacheAndRoute([]);
console.log('this is my custom service worker');


//Create articles Cache from online resources
const onlineResources = workbox.strategies.networkFirst({
cacheName: 'articles-cache',
plugins: [
  new workbox.expiration.Plugin({
    maxEntries: 50,
    }),
   ],
  });


workbox.routing.registerRoute('https://newsapi.org/(.*)', args => {
return onlineResources.handle(args);
 });

precache 缓存有效，但 onlineResources 缓存从未创建。

看看我的文件结构：

所以我认为范围不是问题，即使我在 Chrome 开发工具上看不到我的 service worker 中的客户端。

最后是我的 app.js 文件：

    //main populates main tags in indexpage
const main  = document.querySelector('main');
//this populates the source dropdown menu with sources
const sourceSelector = document.querySelector('#sourceSelector');
//set default source so page loads this
const defaultSource = 'bbc-news';

//on window load call update news and when update
window.addEventListener('load', async e => {
    updateNews();
   await updateSources();
   sourceSelector.value = defaultSource;

   //when sourceSelector is changed update the news with the new source
   sourceSelector.addEventListener('change',e =>{
       updateNews(e.target.value);
   });



//checks for serviceWorker in browser
if('serviceWorker'in navigator){
    try{
        //if there is register it from a path
        navigator.serviceWorker.register('/sw.js');
        console.log('registered!');
        }  catch(error){
        console.log('no register!',error);
    }
}
});



async function updateNews(source= defaultSource){
//response awaits a fetch of the news API call
const res = await fetch(`https://newsapi.org/v2/top-headlines?sources=${source}&apiKey=82b0c1e5744542bdb8c02b61d6499d8f`);
const json = await res.json();

//fill the html with the retrieved json articles
main.innerHTML = json.articles.map(createArticle).join('\n');
}


//Update the news source
async function updateSources(){

    const res = await fetch(`https://newsapi.org/v2/sources?apiKey=82b0c1e5744542bdb8c02b61d6499d8f`);
    const json = await res.json();

    //Whatever source the sourceSelector picks gets mapped and we take the id of it - It is used with updateNews();
    sourceSelector.innerHTML = json.sources
    .map(src=>`<option value="${src.id}">${src.name}</option>`).join('\n');
    }







function createArticle(article){
    return `     <div class="article">
        <a href="${article.url}">
        <h2>${article.title}</h2>
        <img src="${article.urlToImage}">
        <p>${article.description}</p>
        </a>
        </div>
    `;
}

App.js 插入 newsAPI 并将 JSON 输出到页面 HTML。

Answer 1

当您注册路由时，您似乎正在尝试使用正则表达式作为字符串。我认为它实际上是将路线解释为包含.* 的字符串。而是尝试使用正则表达式 /^https:\/\/newsapi\.org/，每个 docs 将从 url 的开头匹配。