fix, 优化 service worker

ngsw-manifest.json

-{
-  "routing": {
-    "index": "/mobile/index.html",
-    "routes": {
-      "/mobile/": {
-        "match": "exact"
-      },
-      "/mobile/?": {
-        "match": "prefix"
-      },
-      "/mobile/ygopro/": {
-        "match": "prefix"
-      }
-    }
-  }
-}

package.json

@@ -4,41 +4,44 @@
   "license": "UNLISENCED",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --base-href /mobile/ --deploy-url /mobile/ --locale zh-CN --output-path mobile --open",
-    "build": "ng build --base-href /mobile/ --locale zh-CN --aot --build-optimizer --extract-css --prod",
-    "build:dev": "ng build --base-href /mobile2/ --locale zh-CN --aot --build-optimizer --extract-css",
-    "lint": "ng lint --type-check --fix"
+    "start": "ng serve --locale zh-CN --aot",
+    "build": "ng build --locale zh-CN --base-href /mobile/ --prod --build-optimizer",
+    "build:dev": "ng build --locale zh-CN --base-href /mobile2/ --prod --build-optimizer && npm run fuck",
+    "fuck": "patch dist/ngsw-worker.js service-worker.patch",
+    "lint": "ng lint"
   },
+  "private": true,
   "dependencies": {
-    "@angular/animations": "5.2.10",
+    "@angular/animations": "^5.2.10",
     "@angular/cdk": "^5.2.5",
-    "@angular/common": "5.2.10",
-    "@angular/compiler": "5.2.10",
-    "@angular/core": "5.2.10",
-    "@angular/forms": "5.2.10",
-    "@angular/http": "5.2.10",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
     "@angular/material": "^5.2.5",
-    "@angular/platform-browser": "5.2.10",
-    "@angular/platform-browser-dynamic": "5.2.10",
-    "@angular/router": "5.2.10",
-    "core-js": "^2.5.5",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
+    "@angular/service-worker": "^5.2.0",
+    "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "lodash": "^4.17.10",
     "material-design-icons": "^3.0.1",
-    "rxjs": "^5.5.10",
+    "rxjs": "^5.5.6",
     "webdav": "^1.5.2",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.8.19"
   },
   "devDependencies": {
-    "@angular/cli": "1.7.4",
-    "@angular/compiler-cli": "5.2.10",
-    "@angular/language-service": "5.2.10",
-    "@angular/service-worker": "5.2.10",
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
     "@types/lodash": "^4.14.108",
     "@types/node": "^9.6.6",
-    "codelyzer": "^4.3.0",
-    "tslint": "^5.9.1",
-    "typescript": "2.6.2"
+    "codelyzer": "^4.0.1",
+    "prettier": "^1.12.1",
+    "tslint": "~5.9.1",
+    "typescript": "^2.6.2"
   }
 }

service-worker.patch

+2112c2112
+<         if (clientId !== null) {
+---
+>         if (clientId) {

src/app/app-routing.module.ts

@@ -18,15 +18,14 @@ const routes: Routes = [
       { path: 'ygopro/rooms', component: RoomListComponent },
       { path: 'ygopro/lobby', component: LobbyComponent },
       { path: 'ygopro/windbot', component: WindbotComponent },
-      { path: 'ygopro/watch', component: WatchComponent },
+      { path: 'ygopro/watch', component: WatchComponent }
     ]
-  },
+  }
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
-  providers: [AuthGuard, LoginService],
+  providers: [AuthGuard, LoginService]
 })
-export class AppRoutingModule {
-}
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -21,9 +21,10 @@ import {
 } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import 'hammerjs';
-import 'rxjs/Rx';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
+import 'hammerjs';
+import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { LobbyComponent } from './lobby/lobby.component';
@@ -51,6 +52,7 @@ import { YGOProService } from './ygopro.service';
   ],
   imports: [
     BrowserModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     FormsModule,
     HttpModule,
     AppRoutingModule,

src/app/lobby/lobby.component.ts

@@ -7,6 +7,13 @@ import { routerTransition2 } from '../router.animations';
 import { StorageService } from '../storage.service';
 import { YGOProService } from '../ygopro.service';
 
+import 'rxjs/add/operator/filter';
+import 'rxjs/add/operator/mergeMap';
+
+
+
+
+
 @Component({
   selector: 'app-lobby',
   templateUrl: 'lobby.component.html',
@@ -22,7 +29,7 @@ export class LobbyComponent {
   build: BuildConfig;
 
   searchCtrl = new FormControl();
-  suggestion = this.searchCtrl.valueChanges.filter(name => name).flatMap(name => this.jsonp.get('http://www.ourocg.cn/Suggest.aspx', {
+  suggestion = this.searchCtrl.valueChanges.filter(name => name).mergeMap(name => this.jsonp.get('http://www.ourocg.cn/Suggest.aspx', {
     params: {callback: 'JSONP_CALLBACK', key: name}
   }).map(response => response.json().result));
 

src/app/match/match.component.ts

@@ -4,6 +4,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { LoginService } from '../login.service';
+import 'rxjs/add/observable/timer';
 
 const second = 1000;
 const offset = new Date().getTimezoneOffset() * 60 * second;

src/app/room-list/room-list.component.css

@@ -26,9 +26,10 @@
   flex: 2
 }
 
-mat-table {
+#container {
   flex: 1;
   padding-bottom: 36px;
+  position: relative;
 }
 
 form {

src/app/room-list/room-list.component.html

 <app-toolbar>房间列表</app-toolbar>
 
-<div class="hint" *ngIf="dataSource.loading"><mat-spinner></mat-spinner></div>
-<div class="hint" *ngIf="dataSource.empty">现在没有等待中的游戏，可以自行创建一个房间或者去匹配</div>
-<div class="hint" *ngIf="dataSource.error">网络错误</div>
-
-<mat-table #table [dataSource]="dataSource">
-
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on room row definition" -->
-
-  <!-- ID Column -->
-  <ng-container matColumnDef="title">
-    <mat-header-cell class="game-title" *matHeaderCellDef>游戏标题</mat-header-cell>
-    <mat-cell class="game-title" *matCellDef="let room">{{room.title}}</mat-cell>
-  </ng-container>
-
-  <!-- Progress Column -->
-  <ng-container matColumnDef="users">
-    <mat-header-cell *matHeaderCellDef>玩家</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
-    </mat-cell>
-  </ng-container>
-
-  <!-- Name Column -->
-  <ng-container matColumnDef="mode">
-    <mat-header-cell *matHeaderCellDef>决斗模式</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <span *ngIf="room.options.mode === 0">单局模式</span>
-      <span *ngIf="room.options.mode === 1">比赛模式</span>
-      <span *ngIf="room.options.mode === 2">TAG</span>
-    </mat-cell>
-  </ng-container>
-
-  <!-- Color Column -->
-  <ng-container matColumnDef="extra">
-    <mat-header-cell *matHeaderCellDef>额外选项</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <span *ngIf="room.options.rule != ygopro.default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
-      <span *ngIf="room.options.start_lp != ygopro.default_options.start_lp">{{room.options.start_lp}} LP</span>
-      <span *ngIf="room.options.start_hand != ygopro.default_options.start_hand">{{room.options.start_hand}} 初始</span>
-      <span *ngIf="room.options.draw_count != ygopro.default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
-      <span *ngIf="room.options.enable_priority != ygopro.default_options.enable_priority">旧规则</span>
-      <span *ngIf="room.options.no_check_deck != ygopro.default_options.no_check_deck">不检查</span>
-      <span *ngIf="room.options.no_shuffle_deck != ygopro.default_options.no_shuffle_deck">不洗卡</span>
-    </mat-cell>
-  </ng-container>
-
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let room; columns: displayedColumns;" (click)="ygopro.join_room(room)"></mat-row>
-</mat-table>
+<div id="container">
+
+  <div class="hint" *ngIf="dataSource.loading">
+    <mat-spinner></mat-spinner>
+  </div>
+  <div class="hint" *ngIf="dataSource.empty">现在没有等待中的游戏，可以自行创建一个房间或者去匹配</div>
+  <div class="hint" *ngIf="dataSource.error">网络错误</div>
+
+  <mat-table #table [dataSource]="dataSource">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on room row definition" -->
+
+    <!-- ID Column -->
+    <ng-container matColumnDef="title">
+      <mat-header-cell class="game-title" *matHeaderCellDef>游戏标题</mat-header-cell>
+      <mat-cell class="game-title" *matCellDef="let room">{{room.title}}</mat-cell>
+    </ng-container>
+
+    <!-- Progress Column -->
+    <ng-container matColumnDef="users">
+      <mat-header-cell *matHeaderCellDef>玩家</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
+      </mat-cell>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="mode">
+      <mat-header-cell *matHeaderCellDef>决斗模式</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <span *ngIf="room.options.mode === 0">单局模式</span>
+        <span *ngIf="room.options.mode === 1">比赛模式</span>
+        <span *ngIf="room.options.mode === 2">TAG</span>
+      </mat-cell>
+    </ng-container>
+
+    <!-- Color Column -->
+    <ng-container matColumnDef="extra">
+      <mat-header-cell *matHeaderCellDef>额外选项</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <span *ngIf="room.options.rule != ygopro.default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
+        <span *ngIf="room.options.start_lp != ygopro.default_options.start_lp">{{room.options.start_lp}} LP</span>
+        <span *ngIf="room.options.start_hand != ygopro.default_options.start_hand">{{room.options.start_hand}} 初始</span>
+        <span *ngIf="room.options.draw_count != ygopro.default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
+        <span *ngIf="room.options.enable_priority != ygopro.default_options.enable_priority">旧规则</span>
+        <span *ngIf="room.options.no_check_deck != ygopro.default_options.no_check_deck">不检查</span>
+        <span *ngIf="room.options.no_shuffle_deck != ygopro.default_options.no_shuffle_deck">不洗卡</span>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let room; columns: displayedColumns;" (click)="ygopro.join_room(room)"></mat-row>
+  </mat-table>
+
+</div>
 
 <form (submit)="ygopro.join_private(joinPassword.value)" ngNativeValidate>
   <input #joinPassword placeholder="在这输入你朋友的私密房间密码就可以进去了哦!" required>

src/app/router.animations.ts

 import { animate, state, style, transition, trigger } from '@angular/animations';
 
 export const routerTransition = trigger('routerTransition', [
-  state('void', style({position: 'absolute', width: '100%'})),
-  state('*', style({position: 'absolute', width: '100%'})),
-  transition(':enter', [  // before 2.1: transition('void => *', [
-    style({transform: 'translateX(100%)'}),
-    animate('.5s ease-in-out', style({transform: 'translateX(0%)'}))
+  state('void', style({ position: 'absolute', width: '100%' })),
+  state('*', style({ position: 'absolute', width: '100%' })),
+  transition(':enter', [
+    // before 2.1: transition('void => *', [
+    style({ transform: 'translateX(100%)' }),
+    animate('.4s', style({ transform: 'translateX(0%)' }))
   ]),
-  transition(':leave', [  // before 2.1: transition('* => void', [
-    style({transform: 'translateX(0%)'}),
-    animate('.5s ease-in-out', style({transform: 'translateX(100%)'}))
+  transition(':leave', [
+    // before 2.1: transition('* => void', [
+    style({ transform: 'translateX(0%)' }),
+    animate('.4s', style({ transform: 'translateX(100%)' }))
   ])
 ]);
 export const routerTransition2 = trigger('routerTransition2', [
-  state('void', style({position: 'absolute', width: '100%'})),
-  state('*', style({position: 'absolute', width: '100%'})),
-  transition(':enter', [  // before 2.1: transition('void => *', [
-    style({transform: 'translateX(-100%)'}),
-    animate('.5s ease-in-out', style({transform: 'translateX(0%)'}))
+  state('void', style({ position: 'absolute', width: '100%' })),
+  state('*', style({ position: 'absolute', width: '100%' })),
+  transition(':enter', [
+    // before 2.1: transition('void => *', [
+    style({ transform: 'translateX(-100%)' }),
+    animate('.4s', style({ transform: 'translateX(0%)' }))
   ]),
-  transition(':leave', [  // before 2.1: transition('* => void', [
-    style({transform: 'translateX(0%)'}),
-    animate('.5s ease-in-out', style({transform: 'translateX(-100%)'}))
+  transition(':leave', [
+    // before 2.1: transition('* => void', [
+    style({ transform: 'translateX(0%)' }),
+    animate('.4s', style({ transform: 'translateX(-100%)' }))
   ])
 ]);

src/app/watch/watch.component.css

@@ -26,3 +26,6 @@
   flex: 2
 }
 
+#container {
+  position: relative;
+}

src/app/watch/watch.component.html

 <app-toolbar>观战</app-toolbar>
 
-<div class="hint" *ngIf="dataSource.loading"><mat-spinner></mat-spinner></div>
-<div class="hint" *ngIf="dataSource.empty">现在没有进行中的游戏</div>
-<div class="hint" *ngIf="dataSource.error">网络错误</div>
-
-<mat-table #table [dataSource]="dataSource">
-
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on room row definition" -->
-
-  <!-- ID Column -->
-  <ng-container matColumnDef="mode">
-    <mat-header-cell *matHeaderCellDef>游戏模式</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <span i18n *ngIf="room.id.startsWith('AI#')">单人模式</span>
-      <span i18n *ngIf="room.arena === 'athletic'">竞技匹配</span>
-      <span i18n *ngIf="room.arena === 'entertain'">娱乐匹配</span>
-      <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 0">单局模式</span>
-      <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 1">比赛模式</span>
-      <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 2">TAG</span>
-    </mat-cell>
-  </ng-container>
-
-  <!-- ID Column -->
-  <ng-container matColumnDef="title">
-    <mat-header-cell class="game-title" *matHeaderCellDef>游戏标题</mat-header-cell>
-    <mat-cell class="game-title" *matCellDef="let room">
-      <span *ngIf="room.private">{{room.users[0] && room.users[0].username}}的私密房间</span>
-      <span i18n *ngIf="room.arena || room.id.startsWith('AI#')">{{room.users[0] && room.users[0].username}} Vs. {{room.users[1] && room.users[1].username}}</span>
-      <span *ngIf="!(room.arena || room.id.startsWith('AI#') || room.private)">{{room.title}}</span>
-    </mat-cell>
-  </ng-container>
-
-  <!-- Progress Column -->
-  <ng-container matColumnDef="users">
-    <mat-header-cell *matHeaderCellDef>玩家</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
-    </mat-cell>
-  </ng-container>
-
-  <!-- Color Column -->
-  <ng-container matColumnDef="extra">
-    <mat-header-cell *matHeaderCellDef>额外选项</mat-header-cell>
-    <mat-cell *matCellDef="let room">
-      <span *ngIf="room.options.rule != ygopro.default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
-      <span *ngIf="room.options.start_lp != ygopro.default_options.start_lp">{{room.options.start_lp}} LP</span>
-      <span *ngIf="room.options.start_hand != ygopro.default_options.start_hand">{{room.options.start_hand}} 初始</span>
-      <span *ngIf="room.options.draw_count != ygopro.default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
-      <span *ngIf="room.options.enable_priority != ygopro.default_options.enable_priority">旧规则</span>
-      <span *ngIf="room.options.no_check_deck != ygopro.default_options.no_check_deck">不检查</span>
-      <span *ngIf="room.options.no_shuffle_deck != ygopro.default_options.no_shuffle_deck">不洗卡</span>
-    </mat-cell>
-  </ng-container>
-
-  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let room; columns: displayedColumns;" (click)="ygopro.join_room(room)"></mat-row>
-</mat-table>
+<div id="container">
+  <div class="hint" *ngIf="dataSource.loading">
+    <mat-spinner></mat-spinner>
+  </div>
+  <div class="hint" *ngIf="dataSource.empty">现在没有进行中的游戏</div>
+  <div class="hint" *ngIf="dataSource.error">网络错误</div>
 
+  <mat-table #table [dataSource]="dataSource">
+
+    <!--- Note that these columns can be defined in any order.
+          The actual rendered columns are set as a property on room row definition" -->
+
+    <!-- ID Column -->
+    <ng-container matColumnDef="mode">
+      <mat-header-cell *matHeaderCellDef>游戏模式</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <span i18n *ngIf="room.id.startsWith('AI#')">单人模式</span>
+        <span i18n *ngIf="room.arena === 'athletic'">竞技匹配</span>
+        <span i18n *ngIf="room.arena === 'entertain'">娱乐匹配</span>
+        <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 0">单局模式</span>
+        <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 1">比赛模式</span>
+        <span i18n *ngIf="!(room.arena || room.id.startsWith('AI#')) && room.options.mode === 2">TAG</span>
+      </mat-cell>
+    </ng-container>
+
+    <!-- ID Column -->
+    <ng-container matColumnDef="title">
+      <mat-header-cell class="game-title" *matHeaderCellDef>游戏标题</mat-header-cell>
+      <mat-cell class="game-title" *matCellDef="let room">
+        <span *ngIf="room.private">{{room.users[0] && room.users[0].username}}的私密房间</span>
+        <span i18n *ngIf="room.arena || room.id.startsWith('AI#')">{{room.users[0] && room.users[0].username}} Vs. {{room.users[1] && room.users[1].username}}</span>
+        <span *ngIf="!(room.arena || room.id.startsWith('AI#') || room.private)">{{room.title}}</span>
+      </mat-cell>
+    </ng-container>
+
+    <!-- Progress Column -->
+    <ng-container matColumnDef="users">
+      <mat-header-cell *matHeaderCellDef>玩家</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
+      </mat-cell>
+    </ng-container>
+
+    <!-- Color Column -->
+    <ng-container matColumnDef="extra">
+      <mat-header-cell *matHeaderCellDef>额外选项</mat-header-cell>
+      <mat-cell *matCellDef="let room">
+        <span *ngIf="room.options.rule != ygopro.default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.options.rule]}}</span>
+        <span *ngIf="room.options.start_lp != ygopro.default_options.start_lp">{{room.options.start_lp}} LP</span>
+        <span *ngIf="room.options.start_hand != ygopro.default_options.start_hand">{{room.options.start_hand}} 初始</span>
+        <span *ngIf="room.options.draw_count != ygopro.default_options.draw_count">{{room.options.draw_count}} 抽卡</span>
+        <span *ngIf="room.options.enable_priority != ygopro.default_options.enable_priority">旧规则</span>
+        <span *ngIf="room.options.no_check_deck != ygopro.default_options.no_check_deck">不检查</span>
+        <span *ngIf="room.options.no_shuffle_deck != ygopro.default_options.no_shuffle_deck">不洗卡</span>
+      </mat-cell>
+    </ng-container>
+
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let room; columns: displayedColumns;" (click)="ygopro.join_room(room)"></mat-row>
+  </mat-table>
+
+</div>

src/app/ygopro.service.ts

+import { DataSource } from '@angular/cdk/collections';
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
+import { MatDialog } from '@angular/material';
 import { sortBy } from 'lodash';
+import 'rxjs/add/observable/combineLatest';
+import 'rxjs/add/observable/dom/webSocket';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/scan';
 import { Observable } from 'rxjs/Observable';
 import { LoginService } from './login.service';
 import { MatchDialogComponent } from './match/match.component';
 import { ResultDialogComponent } from './result/result.dialog';
 import { StorageService } from './storage.service';
-import { MatDialog } from '@angular/material';
-import { DataSource } from '@angular/cdk/collections';
 
 export interface User {
   admin: boolean;

src/index.html

@@ -3,9 +3,10 @@
 <head>
   <meta charset="utf-8">
   <title>MyCard Mobile</title>
-  <base href="/mobile/">
+  <base href="/">
   <meta name="theme-color" content="#673ab7">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
 <app-root>

src/ngsw-config.json

+{
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": ["/favicon.ico", "/index.html"],
+        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": ["/assets/**"],
+        "versionedFiles": ["/fontawesome-webfont.*", "/MaterialIcons-Regular.*"]
+      }
+    }
+  ],
+  "dataGroups": [
+    {
+      "name": "api-freshness",
+      "urls": ["https://ygobbs.com/top/quarterly.json", "https://mycard.moe/ygopro/api/history", "https://api.mycard.moe/ygopro/arena/user"],
+      "cacheConfig": {
+        "maxSize": 100,
+        "maxAge": "3d",
+        "timeout": "1m",
+        "strategy": "freshness"
+      }
+    },
+    {
+      "name": "api-performance",
+      "urls": ["https://api.mycard.moe/apps.json", "https://cdn01.moecube.com/avatars/*", "https://ygobbs.com/user_avatar/*", "https://ygobbs.com/uploads/**"],
+      "cacheConfig": {
+        "maxSize": 100,
+        "maxAge": "3d",
+        "timeout": "1m",
+        "strategy": "performance"
+      }
+    }
+  ]
+}

src/polyfills.ts

@@ -37,22 +37,38 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** Evergreen browsers require these. **/
+/** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect';
 
-import 'core-js/shim';
 
 /**
- * Required to support Web Animations `@angular/animation`.
+ * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
 
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
 
 /***************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
@@ -61,13 +77,3 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-
-/**
- * Date, curm -rf node_modules/rrency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';

src/tsconfig.app.json

@@ -4,12 +4,6 @@
     "outDir": "../out-tsc/app",
     "baseUrl": "./",
     "module": "es2015",
-    "types": [
-      "node"
-    ]
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
+    "types": ["node"]
+  }
 }

tsconfig.json

@@ -7,15 +7,10 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "downlevelIteration": true,
-    "target": "es5",
-    "strict": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noImplicitAny": false,
+    "target": "es2016",
     "typeRoots": [
       "node_modules/@types"
     ],
-    "skipLibCheck": true,
     "lib": [
       "esnext",
       "dom.iterable"

tslint.json

@@ -11,11 +11,15 @@
       "check-space"
     ],
     "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
     "eofline": true,
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs"
+      "rxjs",
+      "rxjs/Rx"
     ],
     "import-spacing": true,
     "indent": [
@@ -103,7 +107,6 @@
         "variable-declaration": "nospace"
       }
     ],
-    "typeof-compare": true,
     "unified-signatures": true,
     "variable-name": false,
     "whitespace": [
@@ -126,6 +129,7 @@
       "app",
       "kebab-case"
     ],
+    "no-output-on-prefix": true,
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,
@@ -134,9 +138,6 @@
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
+    "directive-class-suffix": true
   }
 }