はてなブックマーク

はじめに 今だにAngularPWA関連でポチポチいいね貰うのでアップデート記事を書いておきます。 @angular/pwaについて push通知について @angular/pwaについて Angular6で投入されたng addの話 AngularCLIはschematicsというコード生成ツールを用いてcomponentやserviceの生成をしてくれます。ng generate component hogeとかですね。v6で追加されたng addでは、そのschematicsを用いてnpm packageのインストールからNgModuleなどへのコード追加をやってくれます。 @angular/pwaはng add専用のコード生成補助パッケージです 何をやってくれるのか npm i @angular/service-workerを肩代わりして、さらにconfigファイルやngModul

iOS11.3とMacOS10.13.4アップデートを実施したメモです。 なお、筆者はiPhone歴9年目で、Androidは個人購入したことありません。 動作確認 アップデートが終わると、iPhoneの設定のsafariからいける実験的な機能一覧でServiceWorkerのトグルがデフォルトでONになっています。 Mac上から確認すると、確かにServiceWorkerから供給されていることが確認できます。Cool! 開発ツール 上記の動作確認で気づいた方がいらっしゃるかもしれませんが、serviceworker.js（workerスクリプト）やmanifest.jsonが一覧に出てきていません。 通常なら、iPhoneをMacに繋いでSafariの開発メニューの対象デバイスをクリックすると、iPhoneで動かしているwebサイトのコンソールが見られるわけですが、ServiceWork

試したこと AppShellモデルでモジュール構成を組み直す。1 そのために共有リソースをCoreModuleとSharedModuleに分割する。2 main.bundleのファイルサイズ削減を計測する。 環境 Angular:5.2.6 Angular-CLI:1.7.1 モジュール構成の戦略 AppModuleをAppShellモデルにする AppShellモデルのために、AppModuleは以下の役目だけを持たせます。 application shell 各content（LazyLoadingModule）へのルーティング DIコンテナの最上位ルート これにより初回ロードに必要なmain.bundleは、AppShellだけになります。 アプリ全体だと次のようになります。 各contentはLazyLoadingModuleへ回して、できるだけ共有リソースもAppModuleから

Angularアプリで必要になる項目 個々のアプリ実装状況に依るところもありますが、Angular-CLIで作成している標準的なアプリなら、大きく3つの実装機能になるはずです。 ServiceWorkerを導入する "Register a service worker" "Respond with a 200 when offline" "User can be prompted to install the web app"（※serviceWorkerも必要になります。） WebManifestを作る "User can be prompted to install the web app" "Configured for a custom splash screen" "Address bar matches brand colors" NoScript環境でのviewを用意する "

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? タイトルは「ビートルズがやって来るヤァ!ヤァ!ヤァ!」のパロディです。 @angular/elementsとは何か？ @angular/elementsは、AngularコンポーネントをWeb Componentsにするためのパッケージです。9/29にPullRequestが起こされ10/28にLGTMが出てlabsブランチに移されました。まだexperimental=実験ステータスのできたてほやほや新機能です。 これは言い訳なんですが、@angular/elementsの方向性もまだ流動的ですし、筆者もまだ全然知識が追いついてません。

v4.3で追加されたHttpClientの中で、特にHttpInterceptorについて、ユースケースを挙げていきます。 対象はHttpClientの初級〜中級レベルの想定です。やるよねえからやるかもしれないなあくらいを取り上げたつもりです。また、できないよというのも拾ってみました。 HttpInterceptorについて HttpInterceptorは、appが発行する全てのhttpリクエストやレスポンスに処理を追加できる仕組みです。 angularJSでもあったようなので古参のかたはお馴染みのようです。自分のような2以降に入った人にとっての説明としては、概念では、javaで言うAOPや、railsのcallback、reduxのmiddlewareなどが近いです。仕組みはそれぞれ違いますが、フックでしょ、フック。 HttpInterceptor、およびHttpClientの基本につ

やったこと safariからiPhoneのカメラを起動する canvasで写真撮る box保存とサーバ送信する angularでやってるけど、ほとんど標準のJS使った処理なのでtypescriptをヴァニラJSに置き換えれば何でもいける気がします。 ただし、reactだと魂を震えさせるアイツが一転して抵抗勢力となりもろもろツライ感じになるのでご注意ください。 https://github.com/facebook/react/pull/9146#issuecomment-319629271 環境 カメラついてるマシン 筆者はMBP（mac book pro）のフロントカメラでざっと作りながら、iPhone7で実機確認する手順でやっています。 mediaStream API対応 ブラウザ 中核です。カメラやスクリーンシェアリング、マイクのようなビデオやオーディオ入力装置を扱うAPIです。 s