forked from angular/angular-cli
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@angular-devkit/build-angular): add ability to serve service-wor…
…ker when using dev-server With this change we add the ability for the dev-server to serve service workers when configured in the browser builder. Closes angular#9869
- Loading branch information
1 parent
091ff40
commit 2bb2e06
Showing
4 changed files
with
266 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
171 changes: 171 additions & 0 deletions
171
..._devkit/build_angular/src/builders/dev-server/tests/behavior/serve_service-worker_spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,171 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| // eslint-disable-next-line import/no-extraneous-dependencies | ||
| import fetch from 'node-fetch'; | ||
| import { concatMap, count, take, timeout } from 'rxjs/operators'; | ||
| import { serveWebpackBrowser } from '../../index'; | ||
| import { executeOnceAndFetch } from '../execute-fetch'; | ||
| import { | ||
| BASE_OPTIONS, | ||
| BUILD_TIMEOUT, | ||
| DEV_SERVER_BUILDER_INFO, | ||
| describeBuilder, | ||
| setupBrowserTarget, | ||
| } from '../setup'; | ||
|
|
||
| describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => { | ||
| const manifest = { | ||
| index: '/index.html', | ||
| assetGroups: [ | ||
| { | ||
| name: 'app', | ||
| installMode: 'prefetch', | ||
| resources: { | ||
| files: ['/favicon.ico', '/index.html'], | ||
| }, | ||
| }, | ||
| { | ||
| name: 'assets', | ||
| installMode: 'lazy', | ||
| updateMode: 'prefetch', | ||
| resources: { | ||
| files: ['/assets/**', '/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)'], | ||
| }, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| describe('Behavior: "dev-server builder serves service worker"', () => { | ||
| it('works with service worker', async () => { | ||
| setupBrowserTarget(harness, { | ||
| serviceWorker: true, | ||
| assets: ['src/favicon.ico', 'src/assets'], | ||
| styles: ['src/styles.css'], | ||
| }); | ||
|
|
||
| await harness.writeFiles({ | ||
| 'ngsw-config.json': JSON.stringify(manifest), | ||
| 'src/assets/folder-asset.txt': 'folder-asset.txt', | ||
| 'src/styles.css': `body { background: url(./spectrum.png); }`, | ||
| }); | ||
|
|
||
| harness.useTarget('serve', { | ||
| ...BASE_OPTIONS, | ||
| }); | ||
|
|
||
| const { result, response } = await executeOnceAndFetch(harness, '/ngsw.json'); | ||
|
|
||
| expect(result?.success).toBeTrue(); | ||
|
|
||
| expect(await response?.json()).toEqual( | ||
| jasmine.objectContaining({ | ||
| configVersion: 1, | ||
| index: '/index.html', | ||
| navigationUrls: [ | ||
| { positive: true, regex: '^\\/.*$' }, | ||
| { positive: false, regex: '^\\/(?:.+\\/)?[^/]*\\.[^/]*$' }, | ||
| { positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*$' }, | ||
| { positive: false, regex: '^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$' }, | ||
| ], | ||
| assetGroups: [ | ||
| { | ||
| name: 'app', | ||
| installMode: 'prefetch', | ||
| updateMode: 'prefetch', | ||
| urls: ['/favicon.ico', '/index.html'], | ||
| cacheQueryOptions: { | ||
| ignoreVary: true, | ||
| }, | ||
| patterns: [], | ||
| }, | ||
| { | ||
| name: 'assets', | ||
| installMode: 'lazy', | ||
| updateMode: 'prefetch', | ||
| urls: ['/assets/folder-asset.txt', '/spectrum.png'], | ||
| cacheQueryOptions: { | ||
| ignoreVary: true, | ||
| }, | ||
| patterns: [], | ||
| }, | ||
| ], | ||
| dataGroups: [], | ||
| hashTable: { | ||
| '/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01', | ||
| '/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4', | ||
| '/index.html': 'cb8ad8c81cd422699d6d831b6f25ad4481f2c90a', | ||
| '/spectrum.png': '8d048ece46c0f3af4b598a95fd8e4709b631c3c0', | ||
| }, | ||
| }), | ||
| ); | ||
| }); | ||
|
|
||
| it('works in watch mode', async () => { | ||
| setupBrowserTarget(harness, { | ||
| serviceWorker: true, | ||
| watch: true, | ||
| assets: ['src/favicon.ico', 'src/assets'], | ||
| styles: ['src/styles.css'], | ||
| }); | ||
|
|
||
| await harness.writeFiles({ | ||
| 'ngsw-config.json': JSON.stringify(manifest), | ||
| 'src/assets/folder-asset.txt': 'folder-asset.txt', | ||
| 'src/styles.css': `body { background: url(./spectrum.png); }`, | ||
| }); | ||
|
|
||
| harness.useTarget('serve', { | ||
| ...BASE_OPTIONS, | ||
| }); | ||
|
|
||
| const buildCount = await harness | ||
| .execute() | ||
| .pipe( | ||
| timeout(BUILD_TIMEOUT), | ||
| concatMap(async ({ result }, index) => { | ||
| expect(result?.success).toBeTrue(); | ||
| const response = await fetch(new URL('ngsw.json', `${result?.baseUrl}`)); | ||
| const { hashTable } = await response.json(); | ||
| const hashTableEntries = Object.keys(hashTable); | ||
|
|
||
| switch (index) { | ||
| case 0: | ||
| expect(hashTableEntries).toEqual([ | ||
| '/assets/folder-asset.txt', | ||
| '/favicon.ico', | ||
| '/index.html', | ||
| '/spectrum.png', | ||
| ]); | ||
|
|
||
| await harness.writeFile( | ||
| 'src/assets/folder-new-asset.txt', | ||
| harness.readFile('src/assets/folder-asset.txt'), | ||
| ); | ||
| break; | ||
|
|
||
| case 1: | ||
| expect(hashTableEntries).toEqual([ | ||
| '/assets/folder-asset.txt', | ||
| '/assets/folder-new-asset.txt', | ||
| '/favicon.ico', | ||
| '/index.html', | ||
| '/spectrum.png', | ||
| ]); | ||
| break; | ||
| } | ||
| }), | ||
| take(2), | ||
| count(), | ||
| ) | ||
| .toPromise(); | ||
|
|
||
| expect(buildCount).toBe(2); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
packages/angular_devkit/build_angular/src/webpack/plugins/service-worker-plugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| import type { Compiler } from 'webpack'; | ||
| import { augmentAppWithServiceWorker } from '../../utils/service-worker'; | ||
|
|
||
| export interface ServiceWorkerPluginOptions { | ||
| projectRoot: string; | ||
| root: string; | ||
| outputPath: string; | ||
| baseHref?: string; | ||
| ngswConfigPath?: string; | ||
| } | ||
|
|
||
| export class ServiceWorkerPlugin { | ||
| constructor(private readonly options: ServiceWorkerPluginOptions) {} | ||
|
|
||
| apply(compiler: Compiler) { | ||
| compiler.hooks.done.tapPromise('angular-service-worker', async (_compilation) => { | ||
| const { projectRoot, root, baseHref = '', ngswConfigPath, outputPath } = this.options; | ||
|
|
||
| await augmentAppWithServiceWorker( | ||
| projectRoot, | ||
| root, | ||
| outputPath, | ||
| baseHref, | ||
| ngswConfigPath, | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| (compiler.inputFileSystem as any).promises, | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| (compiler.outputFileSystem as any).promises, | ||
| ); | ||
| }); | ||
| } | ||
| } |