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

@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!

Angular PWA

By Suguru Inatomi

Angular PWA

Node学園 #26 LT

  • 5,950