TechFeedを1ソースで全デバイス対応＆Progressive Web Apps化した話

TechFeed

·

Follow

7 min read

·

Nov 9, 2016

--

Share

大変ご無沙汰しております。TechFeedの白石です。

前回の記事でお伝えしたとおり、先日2016/11/7、TechFeed初回リリース（7月26日）以来初めてのメジャーバージョンアップを果たしました。

コードベースを大幅に書き換え、Webアプリとモバイルアプリを全て一つのソースコードで実現するようにしました（実際には、一部以前のコードも残っていますが）。ついでにService Workerによるプッシュ通知やオフラインキャッシュ（現在無効化していますが近々有効化）、Web App Manifestの配置なども行い、Progressive Web Apps化も果たしました。

Progressive Web Appsの定義もあいまいな気がしていますが、ぼくらとしては、対応ブラウザ（Android Chromeなど）でWebサイトにアクセスした際に「ホーム画面に追加しますか？」と言ったインストールバナーが表示され、プッシュ通知などのService Workerが提供する機能を持つ、っていうくらいのふわっとした解釈をしています。

Progressive Web Apps対応と言いましたが、そこへの対応には実はそれほど時間は掛かっていません。

というのもぼくらは最初からCordovaをベースとしたモバイルアプリをリリースしていたので、プッシュを送信するコードもありましたし、アプリケーションが必要とする全ての静的リソースを一つのアプリにパッケージングするようにもなっていました。なので、既存のコードに多少手を加えるだけでProgressive Web Apps化できました。

以下に、PWAっぽい機能の、TechFeedでの実現方法を軽くご紹介しておきます。（と言っても、至ってフツーです）

・Webプッシュ…Node.jsで書かれたWebプッシュ用ライブラリ「web-push」を使用しました。これを使用することにより、少し前までは不可能だったペイロード付きWebプッシュメッセージが可能になります。これにより、現在TechFeedにログインすると、「ブラウザからプッシュ通知の許可を求められる」という、今はまだまだ馴染みがないであろう体験をすることになります（馴染みがなさすぎるのか、ブロックする人が多くて困っているのはまた別の話ですw）。

・オフラインキャッシュ…Service Workerで静的リソースのオフラインキャッシュを実現するためのライブラリ「sw-precache」を使用しました。これを使用すると、今はもうレガシー扱いとなってしまったHTML5 Application Cacheとそれほど変わらない（しかしより多機能）感覚で、オフラインキャッシュを実現できます。

ちなみに、Service Workerに対応していないブラウザでは当然ながらオフラインキャッシュが効きません。TechFeedでは、iOSは特に重視しているので、iOS Safariでもオフラインキャッシュを可能にすべくApplication Cacheの使用も検討しました。が、Application CacheはURLルーティングと相性が悪く（特にディープリンクURLでリロードを行った場合にキャッシュが利用されない）、泣く泣く断念しました。

所感

で、このようなバージョンアップを行ってみての所感ですが、Progressive Web Apps対応は「そこまで難しくはない」と言えると思います。正直、作業としてはmanifest.jsonを用意するだけなので、全然です。Service Workerのコードを書く必要もありますが、必要最小限でいいなら、ほとんど何もしないService Workerを追加するだけで構いません。

それよりもやはりPWAの肝は、「モバイルアプリに比肩するUXを持つアプリを設計・開発する」「できればそのWebアプリはレスポンシブに開発し、デスクトップでも動作するようにする」というあたりを実現することのほうが難しい。

そういうアプリを作るにあたって、今回Angular2を採用したのですが、Angular2すごいということだけは言えると思います。

Angular2のすごさ

現在のTechFeedはかなり大きなアプリケーションになっていますが、型付き言語であるTypeScriptをベースとしたコンポーネント指向のフレームワークであるおかげで、未だにコードの見通しの良さは保てていると思います。

そして何より、その完成度。Angular2のサイトで「One Framework」を謳っているとおり、外部ライブラリを必要とするシーンがあまりありません（現在使っている外部ライブラリはlodashとmomentくらいです）。それでいながら、フレームワークのサイズはかなり小さく、高速。特にAoTビルドを行ったときの、アプリケーションのパフォーマンスと成果物のサイズの小ささは目をみはるものがあります（AoTビルドについてはまた別途記事を書きます）。

JavaScriptアプリ、特にSPAは実現すべき要件が多岐にわたり、それら全てをカバーしたアプリを作っていくのは至難の業でした。しかしAngular2は、そうした要件をうまく解きほぐし、高い生産性と速いパフォーマンス、そしてあらゆるユースケースに対応できる多機能性を兼ね備えている気がします。

そしてAngular2をベースに開発されているUIコンポーネントフレームワーク「Ionic2」も、なかなかのものです。今はまだ正式リリース前で、いろいろなバグに悩まされることもありますが、以下のような点ではやはり便利です。

・汎用UIコンポーネントの利用による生産性の高さ
・環境に応じて自動的にUIが切り替わる柔軟性
・モバイル／Progressive Web Appsを前提としたUI部品群

つらみ

ただ、ここまでAngular2やIonic2を褒めてばかりでしたが、PWA開発（というかWeb技術によるクロスプラットフォーム開発）には、以下のような点では非常なつらみもあります。。

・クロスプラットフォーム開発そのものがつらい。対象とするデバイス・プラットフォームが多く、テストしきれない。ブラウザでの動作確認、エミュレータでの動作確認、実機での動作確認など、テスト環境の切り替えにかなり時間がかかり、ミスも生じやすい

・開発環境周りをメンテナンスし続けるのがつらい。ぼくらはAngular2がβ版の頃から利用しており、その頃に作った開発環境（WebpackとかGulpとか）をメンテナンスし続けながら開発を進めています。ただ、AoTに対応するためビルド環境を手直ししたら、開発フローへの配慮が足りず、開発速度が落ちてしまったり…今なんか、コードを少し修正するだけでビルドが完了するまでに10秒くらいかかったりします。。

今から始める人は、angular-cliとか使うと幸せになれるのかもしれません（ただ、angular-cliで出力されるプロジェクトのビルド環境はかなり複雑なので、ビルドプロセスに手を入れる場合とかにハマりそうな気もしますが）。

と、つらいところも多々ありますが、Angular2での開発は「Web開発の集大成」感があってなかなか楽しくもあります。オヌヌメ。あれ？Angular2マンセーっていう結論でいいんだっけ、この記事。まあいいか。