标签: workbox-webpack-plugin

我正在尝试为我的应用程序构建 PWA；并且花了将近 48 小时试图弄清楚如何在 Laravel Mix 中使用 Workbox。具有讽刺意味的是，谷歌说 Workbox 旨在让事情变得简单！

呸！

好的，到目前为止我已经想通了——

1. 我将需要使用 ，InjectManifest Plugin因为我想在我的 Service Worker 中集成推送通知服务

2. 我不知道如何specifiy这些路径swSrc和swDest。

3. 什么代码应该进入我的webpack.mix.js，我是否应该在我的resources/js文件夹中有一个临时的 service-worker 来在文件夹中创建一个新的 service worker public/。

有人可以帮忙吗？

PS：我几乎阅读了所有博客和帮助文章；但没有人谈论可靠地将 Workbox 与 Laravel 混合使用。真的很感激这里的一些帮助。

我从 webpack-workbox-plugin v4 迁移到 v5，但是当我尝试构建时，出现错误：

ERROR in Can't find self.__WB_MANIFEST in your SW source.
Child InjectManifest:
    Asset     Size  Chunks             Chunk Names
    sw.js  1.5 KiB       0  [emitted]  InjectManifest
Child html-webpack-plugin for "index.html":
     1 asset

是否__WB_MANIFEST会像 v4 一样创建 precach-manifest 文件并自动导入？

Webpack配置：

new WorkboxPlugin.InjectManifest({
      swSrc: 'sw.js',
      chunks: ['*.chunk.js'],
      exclude: [/\.(?:png|jpg|jpeg|svg)$/, /\.map$/, /manifest\.json$/, /service-worker\.js$/, /sw\.js$/],
      include: [path.resolve(process.cwd(), 'build')],
    }),

我的 sw.js：

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

/* eslint-disable no-undef */

if (workbox) {
  workbox.core.skipWaiting();
  workbox.core.clientsClaim();
  workbox.precaching.cleanupOutdatedCaches();

  // eslint-disable-next-line no-restricted-globals,no-underscore-dangle
  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

  // java-script files cache
  workbox.routing.registerRoute( …

编辑：这看起来像此未解决问题的重复。我是否将此标记为已回答或删除？

我正在Vue CLI 3应用程序内的workbox-webpack-plugin中使用InjectManifest。我要注入的自定义服务人员已经处理了Firebase Cloud Messaging（FCM）。我需要根据我的环境（本地，暂存和生产）来侦听来自不同发件人的消息。

理想情况下，service-worker.js将如下所示：

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    'messagingSenderId': process.env.VUE_APP_FCM_SENDER_ID
});

但是，webpack似乎未触及此代码，因为输出服务工作者仍在读取process.env.VUE_APP_FCM_SENDER_ID而不是硬编码的密钥。

如何通过webpack运行服务工作者，以解决环境变量？

我有一个使用apollo作为grapql客户端的反应应用程序.该应用程序现在需要离线支持子集/子应用程序.有一个服务工作者(感谢工作箱和webpack),它可以预先缓存应用程序的资产并且运行良好.现在需要添加对数据的支持.该应用程序需要在离线模式下工作,如在线.这意味着,用户应该能够查看数据并执行一些突变,这些突变需要在应用再次联机时进行同步.

我有以下方法作为可能的解决方案:*使用服务工作者:添加一个触发一组查询的按钮,以检索离线工作所需的所有数据.使用服务工作者(工作箱runtimeCaching)缓存这些查询的所有响应.当应用程序脱机时,服务工作人员将"提供"查询的响应,以便应用程序"就像在线"一样工作,正常执行查询,服务工作者充当"代理".为突变设置"乐观ui"方法,并使用workboxbackgroundSync同步更改(当浏览器再次联机时,基本上将突变操作发送回端点).*使用一些apollo本机方法(如apollo-cache-persist)将查询缓存存储在localStorage中.触发应用程序的所有必需查询,保留该缓存,如果应用程序不在线,则在进一步加载时从缓存中重新水化应用程序.

什么是一个更好,更简单的离线网络应用程序方法=

在开发模式下（本地）使用 Workbox Webpack 插件时，我收到以下服务工作者错误：

PrecacheController.mjs:62 未捕获的 add-to-cache-list-conflicting-entries：传递给“workbox-precaching.PrecacheController.addToCacheList()”的两个条目的 URL 未定义，但修订详细信息不同。Workbox 无法正确缓存和版本化资产。请删除其中一项。

我相信这是因为，当 webpack 重新构建时，它似乎向 precache 调用添加了两次静态资产。一次在service-worker.js文件中，另一个在precache-manifest.XXX.js文件中。查看这两个文件，我可以看到在两个地方都添加了块和入口脚本，包括service-worker.js.

这在生产中不是问题，因为每个构建都会从头开始擦除和重建。

这是我的 Workbox Webpack 插件配置：

new GenerateSW({
  swDest: '../service-worker.js',
  globDirectory: 'priv/static',
  globPatterns: ['**/*.{js,css,png,jpg,gif,woff2}'],
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/js.intercomcdn.com\/[a-zA-Z0-9-/_.]*(js|woff)/,
      handler: 'NetworkFirst'
    }, {
      urlPattern: /^https:\/\/fonts\.googleapis\.com/,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'google-fonts-stylesheets'
      }
    },
    {
      urlPattern: /^https:\/\/fonts\.gstatic\.com/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'google-fonts-webfonts',
        cacheableResponse: {
          statuses: [0, 200]
        },
        expiration: {
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 365, …

在 Service Worker 中，我尝试使用 importScripts 导入另一个帮助程序脚本，但是我不断收到 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:5000/src/js/utility.js' failed to load.

我在 Service Worker 中有以下代码：

importScripts('../src/js/utility.js');

workbox.routing.registerRoute(/.*(?:jsonplaceholder\.typicode)\.com.*$/, function(args){
    console.log('Json placeholder being called');
    // Send request to the server.
    return fetch(args.event.request)
        .then(function(res){
            // Clone the response obtained from the server.
            var clonedRes = res.clone();
            // Clear data stored in the posts store.
            clearAllData('posts') // Function from helper file
                .then(function(){
                    return clonedRes.json()
                })
                .then(function(data){
                    for(var key in data){
                        // Write the updated …

我按照https://developers.google.com/web/tools/workbox/guides/using-bundlers 上的步骤操作，但是dist/sw.js构建后的文件根本没有被 Webpack 处理。所有的导入语句仍然保持原样，注释没有被删除，并且没有被 Terser 丑化。

我做错了什么？应该sw.js先构建为单独的条目，然后将输出传递给插件吗？

dist/sw.js（实际输出，除了第一行被注入之外，没有任何处理）

importScripts("/dist/precache-manifest.f26179340acee9ac29fc6c689e5cb0c5.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

/* global clients */

import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { StaleWhileRevalidate } from 'workbox-strategies'
import { setConfig, skipWaiting, clientsClaim } from 'workbox-sw'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'

./src/sw.js

/* global clients */

import { registerRoute } …

我包括

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

在我的 webpack 配置的插件中，但在我的网站上运行 lighthouse 时收到此警告。

Web 应用程序清单或 Service Worker 不满足可安装性要求 1 个原因

Service Worker 是一项技术，使您的应用程序能够使用许多渐进式 Web 应用程序功能，例如离线、添加到主屏幕和推送通知。通过正确的 Service Worker 和清单实施，浏览器可以主动提示用户将您的应用添加到他们的主屏幕，这可以带来更高的参与度

失败原因--未检测到匹配的服务工作线程。您可能需要重新加载页面，或者检查当前页面的 Service Worker 范围是否包含清单中的范围和起始 URL。

不注册控制页面和 start_url 的 Service Worker Service Worker 是一项使您的应用程序能够使用许多渐进式 Web 应用程序功能的技术，例如离线、添加到主屏幕和推送通知。

我可以看到服务工作人员正在我的控制台中运行，因为它打印

LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i>         108 URLs, totaling 10.4 MB.

我可以在这次讨论中找到有关编辑sw.js文件或其他内容的所有解决方案。我认为GenerateSW函数的要点是我不必担心创建一个sw.js或任何东西

我也在使用WebpackPWAManifest

    new GenerateSW({
        maximumFileSizeToCacheInBytes: 6000000
    }),

更新：我可以通过将其添加到我的App.jsx

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function …

语境

我有一个使用webpack，vueJS和Workbox的SPA。在服务人员中，我有以下几行（）：

workbox.precaching.precache([
  '/index.html'
])

workbox.routing.registerNavigationRoute('/index.html', {
  blacklist: [
    /.*\.css/,
    /.*\.(?:png|jpg|jpeg|svg|gif)/,
    /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/
  ]
})

问题

首次构建该应用程序时，该app.js文件现在已命名app.xxxxxxxx.js（例如）。因此，当客户端使用服务工作者时，它将index.html使用以下行预缓存文件：

<script type=text/javascript src=/js/app.xxxxxxxx.js></script>

当我更新应用程序并对其进行重建时，该app.js文件将被命名app.yyyyyyyy.js，但客户端仍会index.html使用旧app.xxxxxxxx.js文件缓存该文件，因此该应用程序将无法工作（显然...）

预期行为

服务工作者似乎index.html使用CacheFirst策略获取了预缓存的文件。我猜如果它使用NetworkFirst策略，它将起作用。

有可能做到吗？

-编辑-

我忘了精确：每个.js文件都使用NetworkFirst策略进行缓存：

workbox.routing.registerRoute(
  /.*\.(?:js|woff|woff2|otf|ttf)(?:$|\?)/,
  workbox.strategies.networkFirst({
    cacheName: 'assets-cache',
    plugins: [
      new workbox.expiration.Plugin({})
    ],
  })
)

我有一个带有自签名SSL的快递服务器，该服务器仅为SPA前端提供资产。当我访问https://localhost:8433应用程序统计信息并成功获取所有需要的资产时。但是，与此同时，应用程序的服务工作者（工作箱）也会发送其请求以缓存相同的资产。这些请求随机失败，并带有TypeError: Failed to fetch

网络标签：

似乎有些请求被服务工作者随机取消。

我已经尝试寻找类似的问题，但是没有发现。有些建议玩弄CORS，没有帮助，交换localhost的127.0.0.1或改变缓存策略有同样的效果，最后我不得不用预先缓存只（不运行缓存）的很小的配置，可惜的是没有什么帮助。

我很确定这应该是一个普遍的问题，我只是想念它:)有人有什么想法吗？

顺便说一句，当从不安全的地方提供应用程序时http-完全没有错误。