Question

我使用webpack构建了一个非常大的角度项目（我正在使用Microsoft的ASP.NET核心模板）。有什么方法可以使用@ angular / service-worker吗？

我已经尝试添加软件包并导入它，但服务工作者永远不会构建。没有错误，但我一无所获。使用该标志构建的新CLI项目按预期工作。

Answer 1

我也在努力解决这个问题，因为我没有使用CLI。我设法通过在npm脚本中包含这些脚本来实现它。

    "ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
    "ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
    "build-ngsw": "npm run ngsw-config && npm run ngsw-copy"

在生产构建脚本中包含“build-ngsw”。

第一个脚本通过读取ngsw-config.json（您必须创建）在dist文件夹中创建ngsw.json文件。第二个脚本将实际的角度服务工作者从@ angular / service-worker复制到dist文件夹。

导入并注册服务工作者。请参阅本教程中的第3步Angular Service Worker Getting Started。

Answer 2

对于使用webpack构建的非cli项目，您可能根本不需要使用Angular Service Worker。 Workbox是用于生成服务工作者的很好的库，它具有一个不错的webpack插件。

npm install --save-dev workbox-webpack-plugin

webpack.config：

import { GenerateSW } from 'workbox-webpack-plugin'
// const {GenerateSW} = require('workbox-webpack-plugin')

默认情况下，它会生成使用

预先缓存webpack输出的服务工作者

plugins: [
    // other webpack plugins
    new GenerateSW()
]

然后，您可以在引导角度应用程序后安装此生成的服务工作程序，如：

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {

    if( !('serviceWorker' in navigator) ){
        console.warn('Too bad, Service worker is not supported in current browser')
        return
    }

    window.navigator.serviceWorker
        .register(`/service-worker.js`, { scope: '/' })
        .then(registration => console.log(`Service worker registration succeeded`))
        .catch(error => console.log(`Service worker registration failed`))  
})

如果您的服务器是从webpack的publicPath提供的。有关更复杂的方案，请参阅其文档：workbox-webpack-plugin，但是，让我在此强调一些常见方案：

<强>予。预先处理非webpack资产

如果您想预先缓存不受webpack管理的资产，请使用globDirectory和globPatterns选项查找以下内容：

new GenerateSW({
     globDirectory: '.',
     globPatterns: ['assets/**/*.{svg, png}']
})

生成的glob资产网址（您可以在service-worker.js self .__ precacheManifest 中找到）将针对glob目录进行解析，这意味着您的服务器应该提供/assets/。

<强> II。预先缓存服务器生成的资产

您的index.html可能很常见，因为您的index.html是服务器生成的，在这种情况下，您可能希望使用templatedUrl来指定要预先缓存的路由以及如何修改检索到的资产。这与navigateFallback一起使用非常方便，以确保我们在访问非预先缓存的路径时优雅地回退到index.html。

new GenerateSW({
    globDirectory: '.',
    globPatterns: [],
    templatedUrls: {
        '/': ['templates/Index.html']
    }
    navigateFallback: '/'
})

templateUrl 指定要预先缓存的路由，并使用glob-pattern查找将用于修订从此URL检索到的响应的资源。确保指定了globDirectory，否则插件将因混淆错误而失败。如workbox/issues/763中所述，指定文件的md5哈希值将用于修订检索到的资产，只要/templates/Index.html未更改，该资产就会生效。通常，如果您使用HtmlWebpackPlugin将捆绑（带哈希）注入Index.html模板，service-worker.js预先缓存清单修订版将根据需要更改。

<强> III。缓存API运行时响应

您可能经常要缓存一些API响应，并说出您网站动态内容中显示的用户个人资料图标。在这种情况下，我们可以使用网络优先策略为我们的API提供始终从网络获取（如果可用）和缓存优先策略的配置文件图标，如下所示：

new GenerateSW({
    runtimeCaching: [{
        urlPattern: /^http[s]*:\/{2}[\w.:-]+\/api\//,
        handler: 'networkFirst'
    }, {
        urlPattern: /^http[s]*:\/{2}[\w.:-]+\/profile_icons\//,
        handler: 'cacheFirst'
    }]
})

带webpack的Angular服务工作者（不带CLI）

2 个答案: