PWAで表示速度が2倍に！ スピード改善を妥協しない日経電子版に学ぶ、PWAのメリット＆デメリット

PWA（Progressive Web Apps）は本当に「アリ」なのか――？

ネイティブアプリの開発にはWebとは異なる専門知識が必要であり、またAndroidやiOSなどOSごとでも異なるため、リソースが膨大にかかるという課題があります。そこで昨今は、XamarinやReact Nativeなどのクロスプラットフォーム開発ツールを使い、ネイティブアプリやWebの開発を一本化しようという動きが活発になっています。

一方で、ネイティブアプリに近い体験を簡単に提供できるとして注目を集めているのが、Googleを中心に策定されている技術「PWA」です。2018年3月にはSafariにもService Workerが実装され、より開発が盛り上がっています。

そんな中、日本経済新聞社が提供する「日経電子版」は、2016年ごろからいち早くPWAを利用した開発を進めてきました。その効果は絶大で、特定のページではネイティブアプリよりも速度がでるまでになったそうです。

そこで、日経電子版を担当するエンジニア・宍戸俊哉さん、安田竜さんのお二人に、開発のノウハウや課題、ネイティブアプリとの関係など、PWAを使った開発のノウハウをインタビューしました。

速度改善を追い求めていたら、PWAにたどり着いた

―― 日経電子版にPWAを導入した「きっかけ」を教えてください。

宍戸：2015年に会社がイギリスの経済紙『Financial Times』を買収したのですが、向こうの開発陣にWorld Wide Web Consortium（W3C）などで活躍している方がいたんです。彼らといろいろと議論する中で、2016年ごろから「アプリだけでなくWebも内製開発を進めて、先端的な仕組みや技術を採用していこう」となりました。

僕らのチームの一番大事なKPIは「速度をあげる」こと。当時そのKPIを達成しようと思うと、必然的にService Workerが選択肢として浮かんできて。2016年にサイトに導入したので、取り組みとしてはかなり速い方だと思います。

そもそも、開発当初は「PWAをやっていくぞ」という感じではなかったんです。「速度を上げるためにService Workerを使いましょう」というところから始まって、速度改善に取り組んでいたら、たまたま「PWAが良さそう」という潮流があって、これいいんじゃないと。

個人的に、PWA自体はリリース当初から注目していて、2015年のアドベントカレンダー記事で紹介したりしていました。学んでいた知識がチームで使えたのはよかったですね。

―― Service Worker周りの開発は、安田さんが中心となって行っていると伺いました。会社として導入する前に「Service Workerは良さそう」という感触はあったのでしょうか？

安田：少し触ってみてすぐ、AppCacheよりは扱いやすく、プログラマブルで良いなと思いました。ただ当時は「Workbox」などService Worker周りのライブラリがなかったので、ゼロからコードを書いて、フレームワークの再実装みたいなことをしていました（笑）

宍戸：あと、Service Workerを素で使っていると、キャッシュの状態管理が難しかったんです。今から開発するとしたら、絶対にWorkboxみたいな抽象化されたレイヤーから使えるライブラリを使うと思います。

ネイティブアプリに「近い」ところまできている

――ずばり、PWAを導入してみて実感したメリットは？