webpack - 如何将自定义代码附加到生成的 Service Worker 文件中

标签 webpack sw-precache

我正在使用 Webpack 和 swPrecache。 swPrecache 为我生成了一个 service-worker.js 文件,我现在想将自定义代码附加到生成的文件中。

我创建了一个 Webpack 插件,将 babel 转换后的代码附加到 service-worker.js 文件中,如下所示:

swPrecache.write(filePath, options, (function(err) {

  // If we want to append an additional file.
  if (options.appendFile) {
    var sync = fs.readFile(options.appendFile, (error, code) => {
      if (error) {
        throw error;
      }
      let transformed = babel.transform(code, options.babelConfig || {});
      fs.appendFile(filePath, transformed.code);
    });
  }

  callback(err);
}));

然而,这不包括制作 require() 的代码。在我附加的文件中工作。我相信我需要使用 Webpack 来生成 service-worker.js 文件,但我不确定如何做到这一点,可能是通过自定义入口点?

最佳答案

要将您的自定义脚本包含到生成的 serviceWorker 中,recommended方法是使用importScripts sw-precache 中的选项config.You可以找到更多详细信息here .

关于webpack - 如何将自定义代码附加到生成的 Service Worker 文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39198050/

相关文章:

javascript - sw-precache 推送通知监听器

angularjs - 将 sw-precache 与客户端 URL 路由一起用于单页应用程序

javascript - Lodash 不是 TreeShaking with Webpack 和 Webpack 4?

javascript - 外部 React 组件库 JSX Babel 无法编译

node.js - 将Webpack应用程序部署到Heroku时出现"Web process failed to bind to $PORT within 60 seconds of launch"

javascript - 在扩展 Controller (ES6)中注入(inject)模块导致未知提供者错误

progressive-web-apps - 使用 Service Worker 进行预缓存,为什么重要?我错过了什么?

angular - url-loader 不适用于 angular 8 的自定义 webpack

javascript - 用谷歌的sw-precache搭建的service worker真的能做到networkFirst吗?

progressive-web-apps - 不会被预缓存。配置 maximumFileSizeToCacheInBytes 以更改此限制 (PWA)