アニメイトラボ開発者ブログ

株式会社アニメイトラボの開発者ブログです


アニメイトラボ開発者ブログ

developer.animatelab.com


NEW GAME!!のキャンペーンサイトにPWAを使ってみた

エンジニアのsugicyanです。

会社でNEW GAME!!楽しいですねって言ってたら、NEW GAME!!の仕事が来ました。
会社でPWAやってみたいですねって言ってたらPWAの仕事が来ました。

と、いうことでアニメイトタイムズで新しいキャンペーンページをリリースしました。 リリースしたキャンペーンページはコチラです。

TVアニメ『NEW GAME!!』×アニメイトタイムズコラボキャンペーン! www.animatetimes.com

昨年も実施させて頂いたキャンペーンのパワーアップ版になります。

前回実施の中から何点か改善した部分もありますが、今回一番力を入れた部分はProgressive Web Apps (PWA)の導入です。

PWAとは

簡単に言うと、ウェブアプリをネイティブアプリのように扱うための方法です。

Progressive Web Apps  |  Web  |  Google Developers

ウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。*1

厳密にはPWAではない物もありますが、今回は

  • ホーム画面へアイコンの追加
  • ServiceWorkerによるキャッシュ
  • オフラインでの表示
  • push通知

を導入しています。

今回はリリースしたキャンペーンページを使って、PWAを体験できる方法を説明したいと思います。

PWAを体験するには

※ 今回試験的に導入しているので、まだまだ理解が及んでいない部分もあります。

十分に体験するにはAndroid端末が必要となります。 Android端末にて TVアニメ『NEW GAME!!』×アニメイトタイムズコラボキャンペーン! にアクセスしてください。

f:id:sugicyan:20170821202305p:plain

現在は 5分以上の間隔を開けて2回目以降にサイトを訪れた場合 にホーム画面に追加するかの確認が画面下から出てきます。
正直このあたりの仕様を詳しく追えていないので1回目でも出たといったことも起きるかも知れません。

f:id:sugicyan:20170821202322p:plain

追加ボタンを押すと、ホーム画面にアイコンが追加されます。

f:id:sugicyan:20170821202350p:plain

アイコンタップにて本キャンペーンページにアクセス可能です。
アイコンタップで起動した場合は、画面上に表示されるURLバーが無いことがわかると思います。

f:id:sugicyan:20170821202407p:plain

ホームに追加する通知が出ない・無視してしまった

一度ホーム画面に追加するという通知を逃してしまうと、以降はホームに追加するか聞かれることはなくなります。
その場合は、画面右上のメニューから「ホーム画面に追加」をタップしてください。
ここからホーム画面への追加が可能になります。

f:id:sugicyan:20170821203142p:plain

f:id:sugicyan:20170821203153p:plain

以上がPWAの説明となります。

最後になりますが、PWAをきっかけにこのサイトにたどり着いた人、アニメが好きな人など、一人でも多くの方にNEW GAME!!の事を知って頂けたらなと思います。