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 ``` diff --git a/package.json b/package.json index 7f9ab90f8..fb428d4f5 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.2.0", 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.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' 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)); +};