标签: workbox-webpack-plugin

我正在使用workbox-sw和workbox-webpack-plugin src sw.js文件位于根文件夹（与.env文件处于同一级别）

如何获取环境变量并将其访问到我的src sw.js文件中

这是我的 webpack.config.js

new workboxPlugin({
    globDirectory: 'dist',
    globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'],
    swSrc: './sw.js',
    swDest: path.join('public', 'sw.js')
})

每一个帮助将不胜感激！感谢大家！

我正在使用Workbox 3.0 (webpack-plugin) 和Laravel Mix (5.6) 来自动生成一个 ServiceWorker 文件。

在运行 webpack 编译器时，Workbox 为预缓存资产生成的清单文件如下所示：

self.__precacheManifest = [
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "//css/app.css"
  }
];

显然，URL 字符串是错误的，会导致实际网页出现错误。

这是我的webpack.mix.js :(相关部分）

const {InjectManifest} = require('workbox-webpack-plugin')
mix.webpackConfig({
  plugins: [
    new InjectManifest({
      swSrc: './resources/assets/js/sw.js'
    })
  ]
})

虽然这里使用InjectManifest 进行预缓存以及我自己的动态缓存，但使用GenerateSW插件时也会发生同样的情况。

和我的源代码sw.js：

workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

知道如何解决这个问题吗？如果我手动修改precacheManifest，它工作正常：

self.__precacheManifest = [
  {
    "revision": "89c25ce71806a695a25e",
    "url": "./js/app.js"
  },
  {
    "revision": "89c25ce71806a695a25e",
    "url": "./css/app.css"
  } …

我正在尝试在我的Angular Application中使用service-worker。它是使用webpack构建的。

我使用workbox-webpack-plugin。我想为我的GET API调用提供表单缓存，并在后台更新数据。

为此，我将选项runtimeCaching与处理程序一起使用staleWhileRevalidate（有关GenerateSW插件的更多详细信息，请参见此处）

这是我在webpack.config.js中的配置：

  new GenerateSW({
    // importWorkboxFrom: 'local',
    clientsClaim: true,
    skipWaiting: true,
    navigateFallback: '/index.html',
    runtimeCaching: [
      {
        // Match any same-origin request that contains 'api'.
        urlPattern: /https:\/\/api.*/,
        handler: 'staleWhileRevalidate',
        options: {
          cacheName: 'api',
          broadcastUpdate: {
            channelName: 'api-updates',
          },
          // Add in any additional plugin logic you need.
          plugins: [],
        },
      }
    ]
  }),

根据本文档，当缓存更新时，我应该能够收到一个事件（我想向用户显示某些内容，以便他可以刷新数据）。

接收数据的代码如下所示：

export class AppComponent implements OnInit {

  public ngOnInit() {
    console.log( 'AppComponent - ngOnInit' ); …

我们有一个信号页应用程序，它已安装并处于活动状态。

现在我们的服务器重建了应用程序，服务端文件正在服务器端更新。

我们的客户对这个新的Service Worker文件一无所知，并且仍在使用旧的Service Worker文件。

什么时候有效？ 如果我刷新/重新加载该应用程序，则正在安装新的Service Worker。

如果正在服务器上更新服务工作者文件并且未重新加载客户端，我们如何刷新客户端？

可能的解决方案：我认为，我需要在1小时左右之后进行轮询。

我收到此警告：

未检测到匹配的 Service Worker。您可能需要重新加载页面，或者检查当前页面的 service worker 是否也控制了清单中 URL 的开头。

我的服务人员正在工作的东西。

我什至尝试使用其他两个 URL，它们都使用 HTTP。

现在我将向您展示代码，我正在使用：

site.webmanifest

{
    ...
    "start_url": "/",
    "display": "standalone"
    ...
}

为了创建我的 service-worker，我使用了 webpack 插件：WorkboxPlugin 结合 Laravel Mix：

webpack.mix.js

mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
        new WorkboxPlugin.GenerateSW({
            // these options encourage the ServiceWorkers to get in there fast
            // and not allow any straggling "old" SWs to hang around
            clientsClaim: true,
            skipWaiting: true,
        }),
    ],
    output: {
        publicPath: '/assets/build/', // fixes the output bug
    }, …

在生成的precache-manifest.*.js文件中，当我需要绝对路径时，URL 都引用相对路径，因为我的应用程序也会有一些子目录。

生成文件的示例：

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "1d94d834b7044ec6d4e9",
    "url": "js/app.js"
  },
  {
    "revision": "632f09e6ed606bbed1f1",
    "url": "css/app.css"
  },
  ...
}

当我需要它看起来像这样时：

self.__precacheManifest = (self.__precacheManifest || []).concat([
  {
    "revision": "1d94d834b7044ec6d4e9",
    "url": "/js/app.js"
  },
  {
    "revision": "632f09e6ed606bbed1f1",
    "url": "/css/app.css"
  },
  ...
}

我正在使用webpack4.41.0 并且workbox-webpack-plugin4.3.1

任何帮助将不胜感激！如果需要的话我也可以添加更多细节。

这是我的 webpack 配置：

let config = {
  entry,

  stats: {
    hash: false,
    version: false,
    timings: false,
    children: false,
    errorDetails: false,
    entrypoints: false,
    performance: inProduction,
    chunks: false,
    modules: false,
    reasons: …

帮我。运行“npm run dev”警告后出现问题：

css/app.css 中的警告为 4.13 MB，并且不会被预缓存。配置 MaximumFileSizeToCacheInBytes 以更改此限制。

警告是什么意思？谁能解释一下吗？以及如何解决呢？谢谢好心人^^

Workbox无法在Chrome上运行，但在其他任何地方都可以使用，具有讽刺意味的是，由于我认为这是Google图书馆，因此显示的错误是：

Uncaught (in promise) DOMException : sw.js line 1

铬：

歌剧

火狐浏览器

我正在使用workbox-webpack-plugin

webpack.config.js

    const workbox = require('workbox-webpack-plugin'); 

    module.exports = {
        plugins: [
            new workbox.GenerateSW({
                swDest: './service-worker.js',
                skipWaiting: true,
                clientsClaim: true
            })
        ]  
 }

index.ts（条目）

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/js/app/dist/service-worker.js');
  }); 
}

编辑：这是引发错误的代码行

编辑2：它实际上在icognito模式下工作，删除浏览器数据仍然无济于事。

编辑3：更新到最新的beta 1甚至更糟，因为除了最后一个错误，它将显示另一个错误，但是，此版本也可以在Chrome的icognito模式和其他浏览器中使用。

我正在使用带有 vue cli 3 的工作箱 webpack 插件，我想排除文件夹中的文件被添加到预缓存清单。

在下面查看我当前的文件结构

/src
 /assets
  /css
  /shell
    file1.svg
    file2.svg
    file3.svg
  /svg
    file4.svg
    file5.svg
    file6.svg

我想将 shell 文件夹中的文件包含在我的预缓存清单中，但我不想将这些文件包含在 svg 文件夹中。

我已经使用尝试globIgnores和排除的选项workboxOptions在vue.config.js文件，但我没有得到期望的结果。

当我尝试时globIgnores: ['src/assets/svg/*']，没有发生任何事情，因为所有文件都包含在内

当我尝试时 exclude: [/\.svg$/]，它排除了两个文件夹中的 svg 文件。

我试图改变下面的排除选项的匹配模式，但它也不起作用：

exclude: [/^file4.*\.svg$/,
          /^file5.*\.svg$/,
          /^file6.*\.svg$/]

在 v4 中，我们可以precacheManifestFilename与 workbox webpack 插件一起使用，在清单名称中放置一个版本，该版本被导入到 SW 中，从而对其进行版本控制。既然清单已内联并且选项已删除，那么对软件进行版本控制的新方法是什么？我可以想到一些可以在缩小后幸存下来的方法，但它们看起来很老套。我们应该对缓存名称进行版本控制吗？

我决定尝试使用 workbox，但我看到的所有指南都讨论了与 React 制作的 Service Worker 集成。

但是当我安装 CRA 时，我不再获得为我定制的 Service Worker。我需要做什么才能在这里集成工作箱？

这是我当前的代码：

应用程序.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import swDev from './swDev'
     
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    swDev()

swDev.js

    export default function swDev(){
      let swURL = `${process.env.PUBLIC_URL}/sw.js`;
      if('serviceWorker' in navigator){
        navigator.serviceWorker.register(swURL).then(res => {
          console.log('Service worker has been registered');
        }).catch(err => console.log('Service worker was not registered'))
      }
    }

那么这就是公共文件中的 Service Worker

const cacheVersion = 'v1'


self.addEventListener('install', ()=>{
  console.log('Service worker has been …