From 4e0af8f9f502944940eaec1ea238b20524a37796 Mon Sep 17 00:00:00 2001 From: Trey Richards Date: Fri, 10 Mar 2017 12:29:38 -0800 Subject: [PATCH 1/3] Added Support for Angular Mobile Toolkit Service Worker --- package.json | 1 + src/client/app/main-prod.ts | 4 ++-- src/client/app/main.ts | 14 ++++++++++++++ src/client/ngsw-manifest.json | 18 ++++++++++++++++++ tools/config/seed.tasks.json | 16 ++++++++++------ tools/tasks/seed/build.assets.dev.ts | 2 +- tools/tasks/seed/build.assets.prod.ts | 1 + tools/tasks/seed/sw.manifest.static.ts | 13 +++++++++++++ 8 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 src/client/ngsw-manifest.json create mode 100644 tools/tasks/seed/sw.manifest.static.ts diff --git a/package.json b/package.json index 0d7deed1d..2d57c7689 100644 --- a/package.json +++ b/package.json @@ -141,6 +141,7 @@ "@angular/platform-browser": "^4.0.0-rc.2", "@angular/platform-browser-dynamic": "^4.0.0-rc.2", "@angular/router": "^4.0.0-rc.2", + "@angular/service-worker": "^1.0.0-beta.6", "core-js": "^2.4.1", "intl": "^1.2.5", "rxjs": "~5.1.1", diff --git a/src/client/app/main-prod.ts b/src/client/app/main-prod.ts index 428e22959..0a121a14e 100644 --- a/src/client/app/main-prod.ts +++ b/src/client/app/main-prod.ts @@ -11,12 +11,12 @@ enableProdMode(); platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); -// In order to start the Service Worker located at "./worker.js" +// In order to start the Service Worker located at "/worker-basic.min.js" // uncomment this line. More about Service Workers here // https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers // // if ('serviceWorker' in navigator) { -// (navigator).serviceWorker.register('./worker.js').then((registration: any) => +// (navigator).serviceWorker.register('/worker-basic.min.js').then((registration: any) => // console.log('ServiceWorker registration successful with scope: ', registration.scope)) // .catch((err: any) => // console.log('ServiceWorker registration failed: ', err)); diff --git a/src/client/app/main.ts b/src/client/app/main.ts index f470074a5..7958e065c 100644 --- a/src/client/app/main.ts +++ b/src/client/app/main.ts @@ -19,3 +19,17 @@ if (String('<%= BUILD_TYPE %>') === 'prod') { enableProdMode(); } // const options: any = { providers }; platformBrowserDynamic().bootstrapModule(AppModule/*, options*/); // }); + +// In order to start the Service Worker located at "/worker-basic.[min.]js" +// uncomment this line. More about Service Workers here +// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers +// +// if ('serviceWorker' in navigator) { +// let workerScript = '/worker-basic'; +// if (String('<%= BUILD_TYPE %>') === 'prod') { workerScript = workerScript + '.min'; } +// workerScript = workerScript + '.js'; +// (navigator).serviceWorker.register(workerScript).then((registration: any) => +// console.log('ServiceWorker registration successful with scope: ', registration.scope)) +// .catch((err: any) => +// console.log('ServiceWorker registration failed: ', err)); +// } diff --git a/src/client/ngsw-manifest.json b/src/client/ngsw-manifest.json new file mode 100644 index 000000000..a7d0b4515 --- /dev/null +++ b/src/client/ngsw-manifest.json @@ -0,0 +1,18 @@ +{ + "static": { + "urls": { + } + }, + "routing": { + "index": "/index.html", + "routes": { + "/": { + "prefix": false + } + } + }, + "push": { + "showNotifications": true, + "backgroundOnly": false + } +} diff --git a/tools/config/seed.tasks.json b/tools/config/seed.tasks.json index 8d4c20ec0..b8d26162d 100644 --- a/tools/config/seed.tasks.json +++ b/tools/config/seed.tasks.json @@ -9,7 +9,8 @@ "build.assets.dev", "build.html_css", "build.js.dev", - "build.index.dev" + "build.index.dev", + "sw.manifest.static" ], "build.dev.watch": [ @@ -36,7 +37,8 @@ "build.bundles", "build.bundles.app", "minify.bundles", - "build.index.prod" + "build.index.prod", + "sw.manifest.static" ], "build.prod.aot": [ @@ -52,7 +54,8 @@ "build.bundles", "build.bundles.app.aot", "minify.bundles", - "build.index.prod" + "build.index.prod", + "sw.manifest.static" ], "build.prod.rollup.aot": [ @@ -69,7 +72,8 @@ "build.bundles.app.rollup.aot", "transpile.bundles.rollup.aot", "minify.bundles", - "build.index.prod" + "build.index.prod", + "sw.manifest.static" ], "build.test": [ @@ -79,7 +83,8 @@ "build.html_css", "build.js.dev", "build.js.test", - "build.index.dev" + "build.index.dev", + "sw.manifest.static" ], "test.watch": [ @@ -123,4 +128,3 @@ "karma.run" ] } - diff --git a/tools/tasks/seed/build.assets.dev.ts b/tools/tasks/seed/build.assets.dev.ts index aab2c6f68..421e508df 100644 --- a/tools/tasks/seed/build.assets.dev.ts +++ b/tools/tasks/seed/build.assets.dev.ts @@ -13,6 +13,7 @@ export = run(done: any) { let paths: string[] = [ join(Config.APP_SRC, '**'), + join(Config.NPM_BASE, '@angular', 'service-worker', 'bundles', 'worker-basic.js'), '!' + join(Config.APP_SRC, '**', '*.ts'), '!' + join(Config.APP_SRC, '**', '*.scss'), '!' + join(Config.APP_SRC, '**', '*.sass') @@ -22,4 +23,3 @@ export = .pipe(gulp.dest(Config.APP_DEST)); } }; - diff --git a/tools/tasks/seed/build.assets.prod.ts b/tools/tasks/seed/build.assets.prod.ts index a5ed57133..5c9956c27 100644 --- a/tools/tasks/seed/build.assets.prod.ts +++ b/tools/tasks/seed/build.assets.prod.ts @@ -22,6 +22,7 @@ export = () => { let es: any = require('event-stream'); return gulp.src([ join(Config.APP_SRC, '**'), + join(Config.NPM_BASE, '@angular', 'service-worker', 'bundles', 'worker-basic.min.js'), '!' + join(Config.APP_SRC, 'tsconfig.json'), '!' + join(Config.APP_SRC, '**', '*.ts'), '!' + join(Config.APP_SRC, '**', '*.css'), diff --git a/tools/tasks/seed/sw.manifest.static.ts b/tools/tasks/seed/sw.manifest.static.ts new file mode 100644 index 000000000..156e8f623 --- /dev/null +++ b/tools/tasks/seed/sw.manifest.static.ts @@ -0,0 +1,13 @@ +import * as gulp from 'gulp'; +import { gulpAddStaticFiles } from '@angular/service-worker/build/gulp'; +import Config from '../../config'; +import { join } from 'path'; + +export = () => { + return gulp.src([join(Config.APP_SRC, 'ngsw-manifest.json')]) + .pipe(gulpAddStaticFiles(gulp.src([ + join(Config.APP_DEST, '**', '*'), + '!' + join(Config.APP_DEST, 'ngsw-manifest.json') + ], { nodir: true }))) + .pipe(gulp.dest(Config.APP_DEST)); +}; From fe68ad92cc7ae34aff2782d38ba183c5bfdc77ba Mon Sep 17 00:00:00 2001 From: Trey Richards Date: Fri, 10 Mar 2017 12:36:44 -0800 Subject: [PATCH 2/3] Added service worker package to config. --- tools/config/seed.config.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tools/config/seed.config.ts b/tools/config/seed.config.ts index 62c4cfbad..95e7f0edf 100644 --- a/tools/config/seed.config.ts +++ b/tools/config/seed.config.ts @@ -456,6 +456,10 @@ export class SeedConfig { main: 'bundles/router.umd.js', defaultExtension: 'js' }, + '@angular/service-worker': { + main: 'bundles/service-worker.umd.js', + defaultExtension: 'js' + }, 'rxjs': { main: 'Rx.js', defaultExtension: 'js' From 6716c33965181bd66573855471878299bec4627c Mon Sep 17 00:00:00 2001 From: Trey Richards Date: Fri, 10 Mar 2017 13:38:12 -0800 Subject: [PATCH 3/3] Updated README to include support for Angular Mobile Toolkit --- README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 0bec3d5b2..ec39f427d 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ Provides fast, reliable and extensible starter for the development of Angular pr - Manager of your type definitions using @types. - Has autoprefixer and css-lint support. - Provides full Docker support for both development and production environment +- Support for Angular Mobile Toolkit # How to start @@ -86,7 +87,7 @@ $ npm run build.prod.aot This application provides full support for tree-shaking your production builds with Rollup, which can drastically reduce the size of your application. This is the highest level of optimization currently available. -To run this optimized production build, use: +To run this optimized production build, use: ```bash # prod build with AoT compilation and Rollup tree-shaking, will output the production application in `dist/prod` @@ -96,7 +97,7 @@ $ npm run build.prod.rollup.aot Your project will be compiled ahead of time (AOT), and then the resulting bundle will be tree-shaken and minified. During the tree-shaking process Rollup statically analyses your code, and your dependencies, and includes the bare minimum in your bundle. -**Notes** +**Notes** - Beware of non-static/side-effectful imports. These cannot be properly optimized. For this reason, even though tree-shaking is taking place the developer still needs to be careful not to include non-static imports that are unnecessary, as those referenced imports will always end up in final bundle. Special attention should be given to RxJs, which makes heavy use of non-static/side-effectful imports: make sure you only add the operators you use, as any added operators will be included in your final production bundle. - UMD modules result in code that cannot be properly optimized. For best results, prefer ES6 modules whenever possible. This includes third-party dependencies: if one is published in both UMD and ES6 modules, go with the ES6 modules version. - During a production build, CommonJs modules will be automatically converted to ES6 modules. This means you can use them and/or require dependencies that use them without any issues. @@ -105,7 +106,7 @@ Your project will be compiled ahead of time (AOT), and then the resulting bundle The application provides full Docker support. You can use it for both development as well as production builds and deployments. -## How to build and start the dockerized version of the application +## How to build and start the dockerized version of the application The Dockerization infrastructure is described in the `docker-compose.yml` (respectively `docker-compose.production.yml`. The application consists of two containers: @@ -279,7 +280,7 @@ Forks of this project demonstrate how to extend and integrate with other librari - https://github.com/UIUXEngineering/angular2-jspm-typescript-seed - integration with [JSPM](http://jspm.io/). - http://ngbot.io - a chat bot built with angular-seed. - [angular-seed-inspinia](https://github.com/DmitriyPotapov/angular-seed-inspinia) - integration with custom design template - + # Directory Structure ```