带webpack的Angular服务工作者(不带CLI)

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文件夹.

导入并注册服务工作者.请参阅本教程Angular Service Worker入门中的步骤3 .

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，但是，让我在这里重点介绍一些常见的场景：

I.缓存非Webpack资产

如果要预缓存不受webpack管理的资产，请使用globDirectory和globPatterns选项查找它们，例如：

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

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

二。预先缓存服务器生成的资产

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

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

templateUrl指定要预缓存的路由，以及用于查找将用于修订从此URL检索到的响应的资源的全局模式。确保您已globDirectory指定，否则插件将因混乱的错误而失败。如在workbox / issues / 763中所述，指定文件的md5哈希值将用于修订检索的资产，只要/templates/Index.html不更改，该资产就将有效。通常，如果HtmlWebpackPlugin用于将捆绑软件（带有哈希）注入Index.html模板，service-worker.js则预缓存清单修订将根据需要进行更改。

三，在运行时缓存API响应

您可能经常还想缓存一些API响应，并说出出现在网站动态内容中的用户个人资料图标。这样，我们可以对网络使用API​​的网络优先策略，以便始终从网络中获取（如果有），对配置文件图标使用缓存优先策略，如下所示：

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