ジャンプPARTYはPWA(Progressive Web Apps)のお手本なのか！？次世代のWebアプリ技術が凄い！
ジャンプPARTY (JumpPARTY)がすごい！
web界隈、アプリ界隈にいる方々は
1年以上前から「PWA(Progressive Web Apps)」という
言葉・概念を耳にしていたのではないでしょうか。
そして耳にしながらも「結局、PWAってどれのこと？」
という気持ちになっていたのではないでしょうか。
PWA(Progressive Web Apps)とは
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja
プログレッシブ ウェブアプリはウェブとアプリの両方の利点を兼ね備えたアプリです。ブラウザのタブで表示してすぐに利用することができ、インストールの必要はありません。使い続けてユーザーとの関係性が構築されていくにつれ、より強力なアプリとなります。不安定なネットワークでも迅速に起動し、関連性の高いプッシュ通知を送信することができます。また、ホーム画面にアイコンを表示することができ、トップレベルの全画面表示で読み込むことができます。
一言でいえば「まるでネイティブアプリのようなwebページ」ということでしょう。
それがこのサイト、集英社公式の「ジャンプPARTY」(JumpPARTY)です。
機能はスマートフォンからのアクセス専用のようです。
safariから開くと普通のサイト
まず、普通にsafariから開くと一般的なwebページのようです。
フッターにタブバーも付いていますが、ボタンを押そうとすると
safariのフッターが表示されてしまい誤タップするため、非常に使いづらいです。
ホーム画面に追加する
彼の(PWA)の真価はここからでした。
まずはsafariフッターから「ホーム画面に追加」を選択します。
ホーム画面に追加されます。
ここから開くと
アプリ感が凄い！！
タブバーを押しても、スクロールしても、
ブラウザのナビゲーションバーやフッターは表示されません。
ホームアイコンから起動していると
iPhoneのアプリ切り替え時にも
safariとは別で「ジャンプ PARTY」として起動しています。
LighthouseでProgressive Web Apps度合いを調査してみる
LighthouseというWebアプリのパフォーマンス調査ツールがあります。
これはwebページがWebアプリ全般における
ベストプラクティスに沿っているか調査してくれるツールです。
https://developers.google.com/web/tools/lighthouse/?hl=ja
これを使ってProgressive Web Apps度合いを調査してみます。
pcからアクセスだとスマートフォンとページが異なるので
まずはスマートフォンからの表示に変更し、
Lighthouseを実行します
Progressive Web Apps度合い調査の結果は
「プログレッシブウェブアプリケーション：５５」
あれ。。。
「ページの読み込み速度」であったり、
「インストールを求めるメッセージが表示されないこと」（たしかに表示されない）などの理由で「Progressive Web Appsとしてのベストプラクティスに沿っているか」の度合いはあまり高くないようでした。
それでもホームアイコンから起動した時、
自分は久々に「新しい体験をした！」と感じるほど、
ある種の感動を覚えました。
まとめ
- ジャンプPARTYは、まるでアプリかのような体験をできるwebページ
- Progressive Web Appsの正解は未だ分からない・・・
