首页 文章

为什么Service Worker在localhost上运行时似乎没有写入Google Chrome控制台？

提问于
浏览 次
3

我有一个使用新服务工作者（渐进式网络应用程序）的非常简单的示例 - 请参阅https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

当我从localhost运行我的应用程序时，该示例似乎无法在console.log（）上写入 . 但是，它确实适用于我创建的plunkr . 以下是在plunkr上运行它的步骤：

1. 使用以下网址（来自您的Google Chrome网络浏览器），将显示Plunkr编辑器：https://plnkr.co/edit/FgG2krKDuSmIddR1Pskd?p=preview

这是ServiceWorker.js中的代码，它应该在控制台中显示获取状态 .

//serviceWorker.js

console.log("well, I'm in serviceWorker.js");
self.addEventListener("fetch", function(event) {
  console.log("Fetch request for:", event.request.url);
});

plunkr first view

2. 到达目的地后，打开Chrome开发控制台（以便查看输出） - HINT ：在Chrome中按F12即可打开控制台 .

运行plunkr . 您应该看到如下输出：

console output

The Failure

当我在本地运行相同的代码时（在运行IISExpress的localhost上），我没有看到fetch语句输出到控制台 . （这是ServiceWorker.js文件中的代码）我只看到初始注册 .

它看起来像：
service worker registered

Things I've Tried

  • 停止并重新启动IIS Express

  • 切换到Chrome开发工具应用程序选项卡并强制更新（参见下图）

  • 切换到Chrome Dev工具应用程序选项卡并强制取消注册再次运行并重新注册（参见下图）

update and unregister

在Chrome中，您永远不会看到使用提取项目更新控制台 .

4. Run Locally In Firefox

但是，我在FireFox中运行了相同的代码，并且该控制台确实显示了获取项：
firefox console

EDIT 有人问是否因为Console.log过滤器而出现此问题，因此这里有一个快照，显示没有过滤器，并且确实显示了所有console.log条目 . 这是很多次运行（重新加载页面） .
no console filter

javascript google-chrome service-worker

1 回答

  • 2

    哇 . 好的，所以看起来Chrome不会将ServiceWorker控制台语句输出到“main”console.log - 正如我在问题中所示 .

    相反，你必须：

    1. 单击“应用程序”选项卡下的“检查”链接 .

    2. 将弹出一个窗口 .

    3. 之后，您必须切换到该（弹出）窗口的控制台选项卡，您将看到输出 .

    但是，输出仍然不会显示在应用程序的主控台上 . 这有点痛苦 . 此外，检查链接有时会消失，您必须重新启动服务工作者 . :(

    Here's what it looks like :(我已将窗口分层，以便您可以在图像中看到它 . 请参阅下方窗口右下方的"Inspect"链接 . ）
    inspect via application

    EDIT and PART 2 -- With Second Solution

    好吧，实际上有更多的东西比满足眼睛 . 我以前打开过选项Update On Reload，这样我的dev更改就会被重新加载 . 它看起来如下：
    update on reload

    这应该强制服务工作者每次重新加载 . 嗯，确实如此 . 但是，在这种情况下，它具有这种确切代码示例的副作用 . 它会导致每次都进行初始注册 . 但是，获取代码仅在第二次加载页面时运行 .

    这意味着如果此选项（ Update On Reload ）打开，它似乎注册服务工作者但从未点击获取代码 . 那个's how it behaves in the main console. So I tested it by turning off Update On Reload and I saw the fetch statements in my main console in Chrome now. This is a bit problematic however, if you are doing dev, because you'll必须知道来回切换 .

    这是一个快照：

    console works

    回复于

相关问题