如何根据Nuxt中的初始请求将项目动态地预加载到工作箱缓存中

Question

我正在将Nuxt与PWA模块一起使用。我想将在nuxt-client-init-module中触发的初始axios请求预加载到缓存工作箱中使用。

我尝试了等待工作箱，但似乎这还不够。 我已经尝试使用工作箱文档（例如https://developers.google.com/web/tools/workbox/modules/workbox-core）中所示的缓存名称列表，如下所示，但这会导致错误“无法读取未定义的属性cacheNames”

import GenerateChannelInfo from '../generateChannelInfo.js';

class CreateChannelForm extends Component {
  constructor(props){
    super(props);

    this.state = {
      modalOpen: false
    }
  }

  onSubmitClick = () => {
    this.setState({modalOpen: true})
    // add the rest of the submit functionality here
  }
            return (
              <React.Fragment>
                { this.state.modalOpen && <GenerateChannelInfo /> }
                <Form>
                  <Button.Group floated='right'>
                    <Button disabled={!this.isFormValid()}  onClick={this.onSubmitClick}>
                      Submit
                     </Button>
                   </Button.Group>
                </Form> 
              </React.Fragment>
          )
    }




export default CreateChannelForm

预期结果是服务工作者缓存了请求结果。但是，我取得的最好成绩是没有缓存的普通请求。