Angular 9 で PWA を作る
はじめに
iOS 13.4 の safari から getUserMedia() でカメラデバイスの操作が可能になったという Tweet があったので、せっかくなので Angular9 の Progressive Web Apps (PWA) で検証しました。
{{< githubcard repo="nao50/angular9-pwa" >}}
Angular 9 で PWA
Angular の PWA は以下の記事を参考に進めます。
Angular Project の作成
Angular CLI で angular9-pwa という名前のプロジェクトを作成しました。
$ ng new angular9-pwa --routing --style=scss $ cd angular9-pwa
Service Worker の導入
project を指定して Service Worker を導入します。
ngsw-config.json に書かれている内容がキャッシュされオフラインで動作できるファイルになります。
manifest.webmanifest はアプリケーションのiconの情報などが設定されます。
$ ng add @angular/pwa --project=angular9-pwa Installing packages for tooling via npm. Installed packages for tooling via npm. CREATE ngsw-config.json (620 bytes) CREATE src/manifest.webmanifest (1348 bytes) CREATE src/assets/icons/icon-128x128.png (1253 bytes) CREATE src/assets/icons/icon-144x144.png (1394 bytes) CREATE src/assets/icons/icon-152x152.png (1427 bytes) CREATE src/assets/icons/icon-192x192.png (1790 bytes) CREATE src/assets/icons/icon-384x384.png (3557 bytes) CREATE src/assets/icons/icon-512x512.png (5008 bytes) CREATE src/assets/icons/icon-72x72.png (792 bytes) CREATE src/assets/icons/icon-96x96.png (958 bytes) UPDATE angular.json (3983 bytes) UPDATE package.json (1366 bytes) UPDATE src/app/app.module.ts (604 bytes) UPDATE src/index.html (479 bytes)
残念ながら iOS はホーム画面に追加する際のアイコンや statusbar の表示をindex.htmlのhead要素内に書く必要がありました。
<!doctype html> <html lang="en"> <head> ~ 略 ~ <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Angular9 PWA"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-icon" href="assets/icons/icon-72x72.png" sizes="72x72"> <link rel="apple-touch-icon" href="assets/icons/icon-96x96.png" sizes="114x114"> <link rel="apple-touch-icon" href="assets/icons/icon-128x128.png" sizes="120x120"> <link rel="apple-touch-icon" href="assets/icons/icon-144x144.png" sizes="144x144"> <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png" sizes="180x180"> ~ 略 ~ </head>
App Shell の導入
App Shell はアプリケーションの読み込み中に表示する画面です。
project を指定して Angular CLI で導入できます。
パスは何も指定しないと /shell になりますが --route を指定することで変更できます。
$ ng g app-shell --client-project=angular9-pwa CREATE src/main.server.ts (298 bytes) CREATE src/app/app.server.module.ts (590 bytes) CREATE tsconfig.server.json (308 bytes) CREATE src/app/app-shell/app-shell.component.scss (0 bytes) CREATE src/app/app-shell/app-shell.component.html (24 bytes) CREATE src/app/app-shell/app-shell.component.spec.ts (643 bytes) CREATE src/app/app-shell/app-shell.component.ts (287 bytes) UPDATE package.json (1408 bytes) UPDATE angular.json (5149 bytes) UPDATE src/main.ts (432 bytes) UPDATE src/app/app.module.ts (715 bytes)
これも残念ながら2020年4月時点では iOS で機能しないようです。
Angular でカメラの起動
以前Angular で jsQR を使ってQRCodeを読み取るという記事を書いていたのでこちらのコードを流用します。
$ npm install jsqr --save
コードは stackblitz にも載せています。
typescript 側で getUserMedia を読んでカメラデバイスを取得しています。
これが iOS にインストールした PWA からも利用できることを確認します。
Angular で Github Pages にアップロード
PWA を検証するには HTTPS の環境が必要です。
今回は以下の記事を参考に Github Pages へのアップロードを行います。
$ ng add angular-cli-ghpages $ ng run angular9-pwa:app-shell --configuration=production $ ng deploy --base-href=/angular9-pwa/ --noBuild
以下の URL で今回作った PWA をアップロードすることができました。
iOS で確認したところ問題なくカメラの起動と QRコードの検知ができました。
まとめ
Angular 9 で PWA を作る方法をまとめました。
iOS 13.4 では getUserMedia からカメラデバイスの利用が可能となっていました。
