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

ネイティブアプリに近い体験を簡単に提供できるとして注目を集めている「PWA」。実際に導入し、表示速度が2倍になったという日経新聞電子版の開発者に「PWA」のメリットとデメリットを伺いました。

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

PWA(Progressive Web Apps)は本当に「アリ」なのか――?

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

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

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

1

日経電子版をホームに追加するとネイティブアプリのような体感が得られる。タブもChromeなどのブラウザとは別になる

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

宍戸俊哉(ししど・しゅんや/@sisidovski)(写真右)
2012年に新卒でドワンゴに入社し、2016年の4月に日本経済新聞社入社。ドワンゴではニコニコ静画などのサービスに携わり、フロントからサーバサイドまで幅広く業務を担当。現在は、日経電子版のCDN周りなどを担当し、新卒向けの研修など若手エンジニアの土台づくりにも従事している。
安田 竜(やすだ・りょう)(写真左)
2015年、新卒でNTTに入社し翌年に日本経済新聞社入社。大学ではセキュリティソフトウェアの実装などを行い、NTT在籍時はDockerなどのコンテナ仮想技術関連を研究していた。現在はPWA周りのService Worker開発などを担当するほか、機械学習関連の業務にも着手している。

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

2

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

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

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

Service Worker
PWAの根幹にある技術で、通常のWebページとは別のバックグラウンドで独立して動くスクリプト。オフラインでの操作やプッシュ通知などが行える。

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

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

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

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

Workbox
Service Workerのキャッシュ管理などを自動で行なってくれるライブラリ

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

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

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

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録ボタンを押すと、利用規約プライバシーポリシーに同意したことになります。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く