と、振り返ってみると毎年綺麗に 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

Years ago, I did some research into how native applications responded to a lack of network connectivity. Whilst I've lost the link to the analysis (I could swear it was on Google+), the overarching narrative was that many native applications are inextricably tied to the internet that they just straight up refuse to function. Sounds like a lot of web apps, the thing that set them apart from the web

'use strict'; importScripts('./build/sw-toolbox.js'); self.toolbox.options.cache = { name: 'ionic-cache' }; self.toolbox.precache( [ './build/main.js', './build/vendor.js', './build/main.css', './build/polyfills.js', 'index.html', 'manifest.json' ] ); self.toolbox.router.any('/*', self.toolbox.fastest); self.toolbox.router.default = self.toolbox.networkFirst; 原因 クライアントがサーバーから動画を取得する際に、HTTP Rangeリク

日経電子版の最近の取り組みをマイクロフロントエンドとPWAに絡めて紹介します。（Developers Summit 2019でお話した内容です）

Learn Service Workers inside and out with the new game of Service Worker mastery A collaborative project by geddski &  Google Developers You Need a Progressive Web AppThe web doesn't have to be a second-class platform. Your site doesn't have to go down when the internet does. New tech built into all modern browsers enables a savvy dev like yourself to build reliable experiences for your users. All

Disclaimer: I’m not affiliated with Google Play, Chrome or any other company mentioned. This is not an official statement; usage of the logo and name is just for illustration.⚠️ Updated version of this article ⏩ firt.dev Chrome 72 for Android shipped the long-awaited Trusted Web Activity feature, which means we can now distribute PWAs in the Google Play Store! I played with the feature for a while

Service WorkerはWebブラウザ側で実行されるJavaScript（メインスレッド）とは別で実行されます。バックグラウンド処理に使うこともできますし、メインスレッドで行うと画面が固まってしまうような重たい処理を実行させることもできます。 そんなService Workerを活用していく中で、処理が肥大化していくならば別ファイルとして切り出していきましょう。その際に使えるのがimportScriptsです。 importScriptsの使い方 例えばメインスレッド側のJavaScriptでは次のように処理を書きます。 This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, ope

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

こちらのブログではご無沙汰しています。田中です。今週はサンフランシスコにて開催されたChrome Dev Summitに参加させていただいていました。今年はweb.devの発表や新しいPageSpeed Insightsなど、例年にも増して盛りだくさんの発表が行われましたが、特に「スピードの改善テクニック」が数多く披露されたように思います。 Chrome Dev Summitのプレゼンテーションはすべて濃厚で、しかも多くの内容は「web.dev」に詳しく説明されています。ここでは、2日間にわたって行われたセッションを振り返りながら、高速化に関する内容をざっくりと追っていきたいと思います。 以前と比べて、WebサイトのJavaScriptコード量は8倍に膨れ上がっている V8の言語機能を今後も最適化していく：Promise、Async & await、フレームワーク対応等 ReactのHoo

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Stay organized with collections Save and categorize content based on your preferences. We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.

iOSDC Japan 2018 に採択されたトーク「iOSエンジニアが知るべきProgressive Web Apps開発のエッセンス」のブログ版記事です。 CfP提出後に内容は二転三転しまして、当初は最新Web開発事情について技術的に突っ込んだ内容にしようと目論んでいたのですが、「iOSエンジニア」へ「伝えたいこと」という軸で作っているうちにこの内容に落ち着きました。 当日聞きに来てくださった方、声をかけていただいた方。このような場を下さったiOSDCスタッフの方々にはたいへん感謝しています。 Introduction📛 昨年末 SafariにService Workersが実装され「iOSがPWAをサポートした」というニュースが業界内で話題になりました。 (※Progressive Web Apps 以降 PWA という略称で話します) この時話題になっていたSafariのPWAサ

Why I made https://nedi.app

問題 iOS端末でPWA（プログレッシブウェブアプリ）のスプラッシュ画面が真っ白になり、アイコン、アプリ名などが表示されない。 バージョン iOS 11.3 詳細 manifest.jsonでName、background_color、iconを設定した場合、 Androidの場合は上記を組み合わせたスプラッシュ画面が表示される iOSの場合は真っ白な画面が表示される manifest.json { "name": "Weather PWA", "short_name": "Weather", "icons": [{ "src": "images/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icons/icon-144x144.png", "sizes": "144

https://blog.lai.so/entry/2018/09/18/iOS%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%8C%E7%9F%A5%E3%82%8B%E3%81%B9%E3%81%8DProgressive_Web_Apps%E9%96%8B%E7%99%BA%E3%81%AE%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9_%23iOSDC_2018 PWA - Progressive Web Apps はウェブサイトのショートカットをホーム画面に追加するだけの仕組みではありません。 技術・市場の側面からPWAムーブメントの全容を理解し、適切な活用法を知るとともに。 最新ブラウザAPIを使ったプレゼンテーションパターンやJavaScriptとフロントエンドエコシステムをフ

パシフィコ横浜にて8月22日～24日にわたって開催の「CEDEC 2018」。ここでは、8月24日に行われたセッション「モバイルブラウザ上で実現させた『アイドルマスター シャイニーカラーズ』の作り方」の内容をお届けする。