TechFeed 10.2 リリース！ServiceWorkerによるオフラインキャッシュ化で起動が爆速化！

こんにちは、TechFeedの白石です。

先日、TechFeed 10.2をリリースしました！今回のリリースの目玉はServiceWorkerによる起動時間高速化です。

論より証拠で、TechFeedのサイトをまずはご覧ください。二回目以降のアクセスは、キャッシュからの読み出しとなるので、かなりの速度でページが表示されます（PCで見ると顕著に速いです）。

開発者ツールで確認すると、ほとんどのリソースがServiceWorkerのキャッシュから取得されています。気持ちいいですね。

この改善を行ってくれたのは、Angularエキスパートとして著名な、弊社のエンジニア きゃない さんです。以降はきゃないさんから聞いた、TechFeed×ServiceWorkerによる高速化の実際を記します。

そもそもServiceWorkerによるキャッシュとは何か？

そもそものご説明（ServiceWorkerはすでに広く知られているので不要とは思いますが）をしますと、ServiceWorkerというのは、Webサイトによってインストールされるプログラム（バックグラウンドプロセス）です。一度インストールされたServiceWorkerは、Webサイトが閉じられたとしても裏で動作し続け、プッシュ通知を処理したり、バックグラウンドで動作し続けることが可能です。

ServiceWorkerを使用すると、Webサイトが必要としているリソースを事前にキャッシュしておき、オフライン時でも利用できるようになります。また、そうしたキャッシュを行うことで、リソースをサーバーにリクエストせずに表示できるため、高速化が期待できます。

なぜ今までServiceWorker対応をしてこなかったか？

そもそも、TechFeedでは数年前からServiceWorkerによる高速化は何度も課題に上がっていました。実際に実装してリリース一歩手前まで言ったこともありましたが、ついに今まで実現しませんでした。その理由は、キャッシュの仕組みを構築し、メンテナンスし続けるコストが半端なく高かったからです。

リソースを増やしたり減らしたりするたびに、ServiceWorkerのキャッシュについても考慮しなくてはなりません。以前の記事でお伝えしたようなモジュール分割を実施するとすると、分割されたファイル全てに対してキャッシュの可否を検討しなければなりません。

また、サーバ上でリソースを更新したときに、クライアントがきちんとキャッシュしなおしてくれるかも不安があります。下手をすると、アプリをリリースしてもそれがなかなか反映されない（Webアプリなのに）ということにもなりません。

Angular CLIの力を借りる

そして「なぜ今、ServiceWorkerによるオフラインキャッシュ化」に踏み切ったかと言うと、AngularによるServiceWorkerサポートを利用できる体制が整ったからです（TechFeedは最近、Ionicのバージョンを4に上げたことで利用できるようになったのですが、それはまた別のお話）。

AngularによるServiceWorkerのサポートは、公式の日本語ドキュメントがありますので、詳しくはそちらを参照してください。

とりあえずTechFeedチームで行ったこととしては、

1. @angular/service-workerパッケージのインストールとプロジェクトのセットアップ（ ng add @angular/pwa —-project *project-name* ）
2. Angular ServiceWorkerの設定ファイルである ngsw-config.jsonを編集
3. プロダクション用のビルドを行う（ ng build --prod ）と、Angular ServiceWorkerが使用する形式の設定ファイル ngsw.json が生成される
4. Angular ServiceWorkerのソース（ ngsw-worker.js ）を読み込むと、自動的にキャッシュが行われる

と、これだけです。要は最初のセットアップを除けば ngsw-config.json を編集するだけ。Angularチームが開発した堅牢なキャッシュ処理を、たったこれだけでプロジェクトに導入することができました！🎉

TechFeed固有の工夫や苦労話

と、ここまでは公式ドキュメント読めば書いてある話なので、最後にTechFeedというサービスで利用したときの工夫や苦労話（きゃないさんに聞いたやつ）をメモしておきます。今後誰かの役に立つといいな。

・TechFeedではすでにServiceWorkerを利用した自前のコードが存在しました（Webプッシュ通知を処理するため）。そのため、@angular/service-worker が提供するServiceWorkerのコードとのマージが必要でした。ビルド時にファイルを node_modules/@angular/service-worker/ngsw-worker.js から読み出して、ファイル結合を行っています。

・TechFeedでは、テスト用のステージング環境をBasic認証で保護しています。が、ServiceWorkerがキャッシュの際に用いる fetch() （ XMLHttpRequest に代わるHTTPクライアントAPI）が、Basic認証との相性が悪く、ステージング環境で動作しない原因の追求と対応にかなりの時間がかかってしまいました。詳しく言うと、 URLに認証情報を書く形式でのアクセス（ http://user:password@www.hoge.com/ ）がChromeでは動かず、Firefoxではフィッシング扱いされるときもあります😓

・ローカル環境での動作確認が難しい。Angular CLIは、プロダクションビルド時にのみServiceWorkerを有効化するよう動作するため、開発環境で動かすのに一手間必要です。「プロダクションビルドを行ってローカルで動かす」というのが公式に推奨されている方法なのですが、TechFeedではプロダクションビルドをローカルで動かすことを想定していないため、ちょっとした工夫が必要でした（ダミーでもいいので ngsw.json を出力するようにする）。

と、Angular CLIを利用してもなかなかリリースにこぎつけるのには苦労したServiceWorkerによるオフラインキャッシュ対応ですが、本番サイトの速さを体感すると、やってよかったなあという気持ちでいっぱいです。

皆様のテック情報収集体験がより良いものになりますことを！フィードバックはいつでもお待ちしております。

また、AngularやServiceWorker、TypeScriptなどをフル活用したスタートアップに興味がある方、お気軽にご連絡ください！↓↓↓

株式会社テックフィード エンジニア募集

・募集職種: Webエンジニア（特にTypeScriptに関心のある方）。弊社はWeb技術でフルスタックを開発していますので、全領域でご活躍いただけます。

・勤務地: フルリモートワーク。インターネットに繋がってさえいれば、どこで働いていただこうと問題ありません。Slack, GitHub, ZenHubを活用して、フルリモートワークを前提としたアジャイルプロセスを組み立て、実践しています。オフィスを持たないまま上場することも目標の1つです😊

・勤務形態: 正社員／契約社員／業務委託／副業など、ご希望に合わせた働き方が可能です。また、別の会社で社員として働きつつの副業もOKです。

・応募方法: recruit@techfeed.co.jp までお気軽にご連絡ください。Twitterアカウント @techfeedapp までメンションとか、Facebookページにメッセージしていただくだけでも結構です😊まずは軽くお茶かお食事でも…というくらいの気軽さで、こちらも対応させていただきます。