と、振り返ってみると毎年綺麗に 300% 成長でこれていますね。 （流石に来年はきついと思います＾＾； 今回は、そんな サービスを拡大する上で欠かせない収益の話 と 成長したからこそ表面化したコストの話 をまとめていきたいと思います。 収益の話 参照：https://jp.freepik.com PWA は稼げない 昨年の Advent Calendar にて、私はたいそう嘆いておりました（ＴДＴ） Web 側の広告は MPA（マルチページアプリ）を前提にしているものがほとんど Web 側では広告の表示を最適化できない（MPA 前提の規約上バックグラウンドで読み込んでおけない それに加えて、SPA のページ遷移が早すぎて広告が表示される前に通過してしまう アプリ側にはインタースティシャル広告やリワード広告といった単価の高い広告商材が豊富に存在する そういった要因から、PWA におけるページ

はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul

はじめに 今だに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

AngularでPWAを進める 2018/06/16 ng-japan ToshiyaTanaka(TeaTwo)

Full-Stack Engineer at ForgeRock PWAngelist / trainer LondonPWA and OsloPWA meetups organizer ngVikings conference organizer Progressive web apps use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications.

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を用意する "

この記事は、「3分クッキング ServiceWorkerで阿部寛さんを超える」の続きです。 ng buildでServiceWorkerのリソースキャッシュが簡単にできることを説明しましたが、実際のキャッシュ戦略を考えるといろいろ不足があります。 ユーザーアップロード画像 CDNに配置しているコンテンツ XHRのレスポンス内容 これらはng buildでは生成されないものです。そのための設定方法を紹介します。 ngsw-config.json @angular/service-workerでは、ServiceWorkerのスクリプト自体はngsw-worker.jsになります。Angularのアプリ開発者はjsonとして用意されているインターフェースng-config.jsonを設定する形になります。 ng-config.jsonの設定項目の詳細は、Angularドキュメント（日本語版）の

(この記事は3分で読めます) ServiceWorkerは、ブラウザネットワークのプロキシであり、ブラウザの通信をインターセプトすることが主な目的です。 ServiceWorkerは、Push通知のためだけではありません。昨年秋に日経新聞1やdev.toで話題になったServiceWorkerは、リソースキャッシュの用途です。 既存のAngularアプリケーションにこのリソースキャッシュを導入します。 TL;DL ServiceWorkerのリソースキャッシュにフォーカスする。 既存のAngularアプリケーションを4ステップで調理する。 阿部寛さんのホームページ2と実食勝負する。 味の秘訣を解説する レシピ Angular-CLIで作成されたプロジェクト ×1 Angular5.0.0~ ×1 Angular-CLI1.6.0~3　×1 chrome49〜 ×1 (~00:30) Ser

はじめに この記事は Angular Advent Calendar 2017 17日目の記事です。 この記事では、Angular v5でリリースされた@angular/service-workerを、既存のAngularプロジェクトに導入していきます。 Angularプロジェクト （´-`）.｡oO(自分で用意する時間がなかったので、このいい感じのサンプルアプリを使って進めていきます) Service Workerを登録する前の状態で、Lighthouseで解析しておきましょう。

この記事では、Angular v5でリリースされた新しい @angular/service-worker（Angular Service Worker）を、Angular CLI v1.5のプロジェクトに導入するクイックスタートを紹介します。Angular Service Workerについての包括的な解説についてはMaxim Salnikov氏が投稿した以下の記事を参考にしてください。 A new Angular Service Worker — creating automatic progressive web apps . Part 1: theoryA new Angular Service Worker — creating automatic progressive web apps. Part 2: practiceこの記事は以下の動作環境を対象としています。 _ _ __

Announcement: I present about Angular Service Worker this Tuesday, November 7 at AngularConnect conference in London. If you wish to follow me at the live video stream, please mark your calendars: 11:20 am, GMT (right after the keynote), the main stage. There is some time left since the first part of this article was published, and this pause was taken intentionally — the functionality was ready t