Angular PWA

Node学園 26時限目

about me

• @laco0416
• Angular Japan User Group
• Angular Contributor

Angular PWA

Progressive Web Apps

• Progressive

• Responsive

• Connectivity Independent

• App-like

• Fresh

• Safe

• Discoverable

• Re-engageable

• Installable

• Linkable

Angular PWA

• Progressive

• Responsive

• Connectivity Independent => Cache

• App-like => App Shell

• Fresh => Cache Strategy

• Safe

• Discoverable

• Re-engageable => Push

• Installable

• Linkable

App Shell

Pre-rendering

@angular/platform-server

• Node.js上でAngularアプリケーションを実行

• 実行結果をHTML文字列として取得できる

• index.htmlの代わりに配信

Server-Side Rendering

import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './app/app.module.server';

renderModule(AppServerModule, {
  document: readFileSync(resolve('dist/index.html'), 'utf8'),
  url: '/'
}).then(result => {
  writeFileSync(resolve('dist/index.html'), result);
});

Server-Side Rendering

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

@NgModule({
  imports: [ AppModule, ServerModule ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Angular Mobile Toolkit

Angular Mobile Toolkit

• https://mobile.angular.io

• AngularでPWAを構築するためのツール群

  • @angular/app-shell

  • @angular/service-worker

@angular/app-shell

• App Shellのレンダリングを補助するライブラリ

• App Shellに含める / 含めない要素を指定できる

  • *shellRender

  • *shellNoRender

Install AppShellModule

import { AppShellModule } from '@angular/app-shell';

@NgModule({
  imports: [ AppModule, ServerModule, AppShellModule.prerender() ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

Use in Template

<header appHeader></header>

<main appContent *shellNoRender></main>

<main *shellRender>
  <md-progress-bar mode="indeterminate"></md-progress-bar>
</main>

@angular/service-worker

• ServiceWorkerのJSを生成するツール
  • ng build --prod

• Automatic PWAs

Summary

• Angular Mobile Toolkit
  • App Shell Pre-rendering
    • Angular on Node.js
  • Full-Managed Service Worker

• Angular supports PWA officially

Thanks!