Skip to content

Commit 6ecd4d6

Browse files
alxhubalxhub
committed
feat(@angular/cli): support 5.0.0+ builds of @angular/service-worker
1 parent b7c9533 commit 6ecd4d6

10 files changed

Lines changed: 239 additions & 62 deletions

File tree

‎package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
"@angular/compiler": "^5.0.0-rc.8",
107107
"@angular/compiler-cli": "^5.0.0-rc.8",
108108
"@angular/core": "^5.0.0-rc.8",
109+
"@angular/service-worker": "^5.0.0-rc.8",
109110
"@types/common-tags": "^1.2.4",
110111
"@types/copy-webpack-plugin": "^4.0.0",
111112
"@types/denodeify": "^1.2.30",

‎packages/@angular/cli/commands/build.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,14 @@ export const baseBuildCommandOptions: any = [
188188
default: 'none',
189189
description: 'Available on server platform only. Which external dependencies to bundle into '
190190
+ 'the module. By default, all of node_modules will be kept as requires.'
191+
},
192+
{
193+
name: 'service-worker',
194+
type: Boolean,
195+
default: true,
196+
aliases: ['sw'],
197+
description: 'Generates a service worker config for production builds, if the app has '
198+
+ 'service worker enabled.'
191199
}
192200
];
193201

‎packages/@angular/cli/models/build-options.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,5 @@ export interface BuildOptions {
3131
namedChunks?: boolean;
3232
subresourceIntegrity?: boolean;
3333
forceTsCommonjs?: boolean;
34+
serviceWorker?: boolean;
3435
}

‎packages/@angular/cli/models/webpack-configs/production.ts‎

Lines changed: 57 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@ import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
1010
import { WebpackConfigOptions } from '../webpack-config';
1111
import { readTsconfig } from '../../utilities/read-tsconfig';
1212
import { requireProjectModule } from '../../utilities/require-project-module';
13+
import { NEW_SW_VERSION } from '../../utilities/service-worker';
1314

1415
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
1516

17+
const OLD_SW_VERSION = '>= 1.0.0-beta.5 < 2.0.0';
18+
1619
/**
1720
* license-webpack-plugin has a peer dependency on webpack-sources, list it in a comment to
1821
* let the dependency validator know it is used.
@@ -44,63 +47,69 @@ export function getProdConfig(wco: WebpackConfigOptions) {
4447

4548
// Read the version of @angular/service-worker and throw if it doesn't match the
4649
// expected version.
47-
const allowedVersion = '>= 1.0.0-beta.5 < 2.0.0';
4850
const swPackageJson = fs.readFileSync(`${swModule}/package.json`).toString();
4951
const swVersion = JSON.parse(swPackageJson)['version'];
50-
if (!semver.satisfies(swVersion, allowedVersion)) {
52+
53+
const isLegacySw = semver.satisfies(swVersion, OLD_SW_VERSION);
54+
const isModernSw = semver.satisfies(swVersion, NEW_SW_VERSION);
55+
56+
if (!isLegacySw && !isModernSw) {
5157
throw new Error(stripIndent`
5258
The installed version of @angular/service-worker is ${swVersion}. This version of the CLI
53-
requires the @angular/service-worker version to satisfy ${allowedVersion}. Please upgrade
59+
requires the @angular/service-worker version to satisfy ${OLD_SW_VERSION}. Please upgrade
5460
your service worker version.
5561
`);
5662
}
5763

58-
// Path to the worker script itself.
59-
const workerPath = path.resolve(swModule, 'bundles/worker-basic.min.js');
60-
61-
// Path to a small script to register a service worker.
62-
const registerPath = path.resolve(swModule, 'build/assets/register-basic.min.js');
63-
64-
// Sanity check - both of these files should be present in @angular/service-worker.
65-
if (!fs.existsSync(workerPath) || !fs.existsSync(registerPath)) {
66-
throw new Error(stripIndent`
67-
The installed version of @angular/service-worker isn't supported by the CLI.
68-
Please install a supported version. The following files should exist:
69-
- ${registerPath}
70-
- ${workerPath}
71-
`);
64+
if (isLegacySw) {
65+
// Path to the worker script itself.
66+
const workerPath = path.resolve(swModule, 'bundles/worker-basic.min.js');
67+
68+
// Path to a small script to register a service worker.
69+
const registerPath = path.resolve(swModule, 'build/assets/register-basic.min.js');
70+
71+
// Sanity check - both of these files should be present in @angular/service-worker.
72+
if (!fs.existsSync(workerPath) || !fs.existsSync(registerPath)) {
73+
throw new Error(stripIndent`
74+
The installed version of @angular/service-worker isn't supported by the CLI.
75+
Please install a supported version. The following files should exist:
76+
- ${registerPath}
77+
- ${workerPath}
78+
`);
79+
}
80+
81+
// CopyWebpackPlugin replaces GlobCopyWebpackPlugin, but AngularServiceWorkerPlugin depends
82+
// on specific behaviour from latter.
83+
// AngularServiceWorkerPlugin expects the ngsw-manifest.json to be present in the 'emit' phase
84+
// but with CopyWebpackPlugin it's only there on 'after-emit'.
85+
// So for now we keep it here, but if AngularServiceWorkerPlugin changes we remove it.
86+
extraPlugins.push(new GlobCopyWebpackPlugin({
87+
patterns: [
88+
'ngsw-manifest.json',
89+
{ glob: 'ngsw-manifest.json',
90+
input: path.resolve(projectRoot, appConfig.root), output: '' }
91+
],
92+
globOptions: {
93+
cwd: projectRoot,
94+
optional: true,
95+
},
96+
}));
97+
98+
// Load the Webpack plugin for manifest generation and install it.
99+
const AngularServiceWorkerPlugin = require('@angular/service-worker/build/webpack')
100+
.AngularServiceWorkerPlugin;
101+
extraPlugins.push(new AngularServiceWorkerPlugin({
102+
baseHref: buildOptions.baseHref || '/',
103+
}));
104+
105+
// Copy the worker script into assets.
106+
const workerContents = fs.readFileSync(workerPath).toString();
107+
extraPlugins.push(new StaticAssetPlugin('worker-basic.min.js', workerContents));
108+
109+
// Add a script to index.html that registers the service worker.
110+
// TODO(alxhub): inline this script somehow.
111+
entryPoints['sw-register'] = [registerPath];
72112
}
73-
74-
// CopyWebpackPlugin replaces GlobCopyWebpackPlugin, but AngularServiceWorkerPlugin depends
75-
// on specific behaviour from latter.
76-
// AngularServiceWorkerPlugin expects the ngsw-manifest.json to be present in the 'emit' phase
77-
// but with CopyWebpackPlugin it's only there on 'after-emit'.
78-
// So for now we keep it here, but if AngularServiceWorkerPlugin changes we remove it.
79-
extraPlugins.push(new GlobCopyWebpackPlugin({
80-
patterns: [
81-
'ngsw-manifest.json',
82-
{ glob: 'ngsw-manifest.json', input: path.resolve(projectRoot, appConfig.root), output: '' }
83-
],
84-
globOptions: {
85-
cwd: projectRoot,
86-
optional: true,
87-
},
88-
}));
89-
90-
// Load the Webpack plugin for manifest generation and install it.
91-
const AngularServiceWorkerPlugin = require('@angular/service-worker/build/webpack')
92-
.AngularServiceWorkerPlugin;
93-
extraPlugins.push(new AngularServiceWorkerPlugin({
94-
baseHref: buildOptions.baseHref || '/',
95-
}));
96-
97-
// Copy the worker script into assets.
98-
const workerContents = fs.readFileSync(workerPath).toString();
99-
extraPlugins.push(new StaticAssetPlugin('worker-basic.min.js', workerContents));
100-
101-
// Add a script to index.html that registers the service worker.
102-
// TODO(alxhub): inline this script somehow.
103-
entryPoints['sw-register'] = [registerPath];
104113
}
105114

106115
if (buildOptions.extractLicenses) {

‎packages/@angular/cli/tasks/build.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { NgCliWebpackConfig } from '../models/webpack-config';
88
import { getWebpackStatsConfig } from '../models/webpack-configs/utils';
99
import { CliConfig } from '../models/config';
1010
import { statsToString, statsWarningsToString, statsErrorsToString } from '../utilities/stats';
11+
import { augmentAppWithServiceWorker, usesServiceWorker } from '../utilities/service-worker';
1112

1213
const Task = require('../ember-cli/lib/models/task');
1314
const SilentError = require('silent-error');
@@ -69,7 +70,15 @@ export default Task.extend({
6970
if (stats.hasErrors()) {
7071
reject();
7172
} else {
72-
resolve();
73+
if (!!app.serviceWorker && runTaskOptions.target === 'production' &&
74+
usesServiceWorker(this.project.root) && runTaskOptions.serviceWorker !== false) {
75+
const appRoot = path.resolve(this.project.root, app.root);
76+
augmentAppWithServiceWorker(this.project.root, appRoot, path.resolve(outputPath),
77+
runTaskOptions.baseHref || '/')
78+
.then(() => resolve(), (err: any) => reject(err));
79+
} else {
80+
resolve();
81+
}
7382
}
7483
};
7584

‎packages/@angular/cli/utilities/service-worker/index.ts‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { Filesystem } from '@angular/service-worker/config';
2+
import { stripIndent } from 'common-tags';
3+
import * as crypto from 'crypto';
4+
import * as fs from 'fs';
5+
import * as path from 'path';
6+
import * as semver from 'semver';
7+
8+
export const NEW_SW_VERSION = '>= 5.0.0-rc.0';
9+
10+
class CliFilesystem implements Filesystem {
11+
constructor(private base: string) {}
12+
13+
list(_path: string): Promise<string[]> {
14+
return Promise.resolve(this.syncList(_path));
15+
}
16+
17+
private syncList(_path: string): string[] {
18+
const dir = this.canonical(_path);
19+
const entries = fs.readdirSync(dir).map(
20+
(entry: string) => ({entry, stats: fs.statSync(path.posix.join(dir, entry))}));
21+
const files = entries.filter((entry: any) => !entry.stats.isDirectory())
22+
.map((entry: any) => path.posix.join(_path, entry.entry));
23+
24+
return entries.filter((entry: any) => entry.stats.isDirectory())
25+
.map((entry: any) => path.posix.join(_path, entry.entry))
26+
.reduce((list: string[], subdir: string) => list.concat(this.syncList(subdir)), files);
27+
}
28+
29+
read(_path: string): Promise<string> {
30+
const file = this.canonical(_path);
31+
return Promise.resolve(fs.readFileSync(file).toString());
32+
}
33+
34+
hash(_path: string): Promise<string> {
35+
const sha1 = crypto.createHash('sha1');
36+
const file = this.canonical(_path);
37+
const contents: Buffer = fs.readFileSync(file);
38+
sha1.update(contents);
39+
return Promise.resolve(sha1.digest('hex'));
40+
}
41+
42+
write(_path: string, contents: string): Promise<void> {
43+
const file = this.canonical(_path);
44+
fs.writeFileSync(file, contents);
45+
return Promise.resolve();
46+
}
47+
48+
private canonical(_path: string): string { return path.posix.join(this.base, _path); }
49+
}
50+
51+
export function usesServiceWorker(projectRoot: string): boolean {
52+
const nodeModules = path.resolve(projectRoot, 'node_modules');
53+
const swModule = path.resolve(nodeModules, '@angular/service-worker');
54+
if (!fs.existsSync(swModule)) {
55+
return false;
56+
}
57+
58+
const swPackageJson = fs.readFileSync(`${swModule}/package.json`).toString();
59+
const swVersion = JSON.parse(swPackageJson)['version'];
60+
61+
return semver.satisfies(swVersion, NEW_SW_VERSION);
62+
}
63+
64+
export function augmentAppWithServiceWorker(projectRoot: string, appRoot: string,
65+
outputPath: string, baseHref: string): Promise<void> {
66+
const nodeModules = path.resolve(projectRoot, 'node_modules');
67+
const swModule = path.resolve(nodeModules, '@angular/service-worker');
68+
69+
// Path to the worker script itself.
70+
const workerPath = path.resolve(swModule, 'ngsw-worker.js');
71+
const configPath = path.resolve(appRoot, 'ngsw-config.json');
72+
73+
if (!fs.existsSync(configPath)) {
74+
throw new Error(stripIndent`Expected to find an ngsw-config.json configuration file in the
75+
application root. Either provide one or disable Service Worker
76+
build support in angular-cli.json.`);
77+
}
78+
const config = fs.readFileSync(configPath, 'utf8');
79+
80+
const Generator = require('@angular/service-worker/config').Generator;
81+
const gen = new Generator(new CliFilesystem(outputPath), baseHref);
82+
return gen
83+
.process(JSON.parse(config))
84+
.then((output: Object) => {
85+
const manifest = JSON.stringify(output, null, 2);
86+
fs.writeFileSync(path.resolve(outputPath, 'ngsw.json'), manifest);
87+
// Copy worker script to dist directory.
88+
const workerCode = fs.readFileSync(workerPath);
89+
fs.writeFileSync(path.resolve(outputPath, 'ngsw-worker.js'), workerCode);
90+
});
91+
}

‎scripts/publish/validate_dependencies.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const REQUIRE_RE = /\brequire\('[^)]+?'\)/g;
1414
const IGNORE_RE = /\s+@ignoreDep\s+\S+/g;
1515
const NODE_PACKAGES = [
1616
'child_process',
17+
'crypto',
1718
'fs',
1819
'https',
1920
'os',

‎tests/e2e/tests/build/legacy-service-worker.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {join} from 'path';
2+
import {getGlobalVariable} from '../../utils/env';
3+
import {expectFileToExist, expectFileToMatch, writeFile, moveFile} from '../../utils/fs';
4+
import {ng, silentNpm} from '../../utils/process';
5+
6+
export default function() {
7+
// Skip this in ejected tests.
8+
if (getGlobalVariable('argv').eject) {
9+
return Promise.resolve();
10+
}
11+
12+
const rootManifest = join(process.cwd(), 'ngsw-manifest.json');
13+
14+
// Can't use the `ng` helper because somewhere the environment gets
15+
// stuck to the first build done
16+
return silentNpm('remove', '@angular/service-worker')
17+
.then(() => silentNpm('install', '@angular/service-worker@1.0.0-beta.16'))
18+
.then(() => ng('set', 'apps.0.serviceWorker=true'))
19+
.then(() => ng('build', '--prod'))
20+
.then(() => expectFileToExist(join(process.cwd(), 'dist')))
21+
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw-manifest.json')))
22+
.then(() => ng('build', '--prod', '--base-href=/foo/bar'))
23+
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw-manifest.json')))
24+
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /"\/foo\/bar\/index.html"/))
25+
.then(() => writeFile(rootManifest, '{"local": true}'))
26+
.then(() => ng('build', '--prod'))
27+
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /\"local\"/))
28+
.then(() => moveFile(rootManifest, join(process.cwd(), 'src/ngsw-manifest.json')))
29+
.then(() => ng('build', '--prod'))
30+
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /\"local\"/))
31+
.then(() => ng('set', 'apps.0.serviceWorker=false'));
32+
}

‎tests/e2e/tests/build/service-worker.ts‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,46 @@
11
import {join} from 'path';
22
import {getGlobalVariable} from '../../utils/env';
3-
import {expectFileToExist, expectFileToMatch, writeFile, moveFile} from '../../utils/fs';
3+
import {expectFileNotToExist, expectFileToExist, expectFileToMatch, writeFile} from '../../utils/fs';
44
import {ng, silentNpm} from '../../utils/process';
55

6+
const MANIFEST = {
7+
index: '/index.html',
8+
assetGroups: [{
9+
name: 'cli',
10+
resources: {
11+
files: [
12+
'/**/*.html',
13+
'/**/*.js',
14+
'/**/*.css',
15+
'/assets/**/*',
16+
'!/ngsw-worker.js',
17+
],
18+
urls: [
19+
'http://test.com/foo/bar',
20+
],
21+
},
22+
}],
23+
};
24+
625
export default function() {
726
// Skip this in ejected tests.
827
if (getGlobalVariable('argv').eject) {
928
return Promise.resolve();
1029
}
1130

12-
const rootManifest = join(process.cwd(), 'ngsw-manifest.json');
13-
1431
// Can't use the `ng` helper because somewhere the environment gets
1532
// stuck to the first build done
16-
return silentNpm('install', '@angular/service-worker')
33+
return silentNpm('remove', '@angular/service-worker')
34+
.then(() => silentNpm('install', '@angular/service-worker@5.0.0-rc.2'))
1735
.then(() => ng('set', 'apps.0.serviceWorker=true'))
36+
.then(() => writeFile('src/ngsw-config.json', JSON.stringify(MANIFEST, null, 2)))
1837
.then(() => ng('build', '--prod'))
1938
.then(() => expectFileToExist(join(process.cwd(), 'dist')))
20-
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw-manifest.json')))
39+
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw.json')))
2140
.then(() => ng('build', '--prod', '--base-href=/foo/bar'))
22-
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw-manifest.json')))
23-
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /"\/foo\/bar\/index.html"/))
24-
.then(() => writeFile(rootManifest, '{"local": true}'))
25-
.then(() => ng('build', '--prod'))
26-
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /\"local\"/))
27-
.then(() => moveFile(rootManifest, join(process.cwd(), 'src/ngsw-manifest.json')))
28-
.then(() => ng('build', '--prod'))
29-
.then(() => expectFileToMatch('dist/ngsw-manifest.json', /\"local\"/));
41+
.then(() => expectFileToExist(join(process.cwd(), 'dist/ngsw.json')))
42+
.then(() => expectFileToMatch('dist/ngsw.json', /"\/foo\/bar\/index.html"/))
43+
.then(() => ng('build', '--prod', '--service-worker=false'))
44+
.then(() => expectFileNotToExist('dist/ngsw.json'))
45+
.then(() => ng('set', 'apps.0.serviceWorker=false'));
3046
}

0 commit comments

Comments
 (0)