浏览器中的Ionic 3 PWA应用断点和源代码被弄乱了

Question

我无法将断点放在正确的位置，因为它似乎在浏览器中显示了较旧版本的源。

如何强制它更新浏览器中的源代码？

Answer 1

在开发过程中，最好利用chrome devtools>应用程序标签>服务工作者部分。 基本上，您可以设置“绕过”服务工作者缓存和其他设置，以帮助您使用最新的：

另一种方法是将缓存策略从默认策略修改为“网络优先”：

在服务人员中执行以下操作：

// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.networkFirst);

// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.networkFirst;

Answer 2

解决了。 这似乎是由装饰器占用多行引起的，如下所示：

@IonicPage({
    name: 'my-page',
    segment: 'my-page/:id',
    defaultHistory: ['my-other-page']
})
@Component({
    selector: 'my-page',
    templateUrl: 'my-page-cotacao.html',
    providers: [BrMaskerIonic3]
})

解决方案是将每个装饰器设置在一行中，如下所示：

@IonicPage({ name: 'my-page', segment: 'my-page/:id',    defaultHistory: ['my-other-page'] })
@Component({ selector: 'my-page', templateUrl: 'my-page.html', providers: [BrMaskerIonic3] })