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
Summary
- Angular Mobile Toolkit
- App Shell Pre-rendering
- Angular on Node.js
- Full-Managed Service Worker
- App Shell Pre-rendering
-
Angular supports PWA officially
Thanks!
Angular PWA
By Suguru Inatomi
Angular PWA
Node学園 #26 LT
- 5,950