share facebook facebook twitter menu hatena pocket slack

2017.07.31 MON

ユーザーエクスペリエンスを向上させる『PWA』の導入にチャレンジ!

篠田 俊之

WRITTEN BY 篠田 俊之

ここ『cloudpack.media』は、「AWSクラウドを使って、もっと世界を楽しくしたい」を意気込みとして掲げつつ、cloudpackの取り組みやクラウドをテーマに情報発信するオウンドメディアという側面と、cloudpackのエンジニアが書く技術情報ブログという2つの顔を持ったメディアです。

『cloudpack.media』の公開時におけるチャレンジの1つが「Accelerated Mobile Pages(AMP)」の導入でした。導入効果については、AMPで爆速になったらアレが47%も改善してしまったでも紹介しているとおりで、なかなかの結果を得ることができました。

次の新たにチャレンジとして取り組んだのは、「PWA(Progressive Web Apps)」の導入です。

PWA(Progressive Web Apps)の導入

PWAってなに? 導入するメリットはなに?

PWAをひと言で表現すると、ネイティブアプリとWebページの良いところを集めたWebアプリケーションになります。代表的な特長は以下のとおりです。

Webページをネイティブアプリのようにインストールできる

Webページをスマートフォンのホーム画面に追加するだけならPWAを導入する必要はありませんが、『スマホアプリ』としてインストールできるのがPWAの良いところです。

スマホアプリになることで、起動時のスプラッシュ画面やアプリ起動時のバーなども自由に設定することができますので、ユーザー体験にブランドの結びつきを演出したりが可能になります。

しかも、あくまでWebページであることから、Playストアの審査は不要だったりします。

Webページをネイティブアプリのようにインストールできる

オフラインで閲覧が可能

PWAはコンテンツをキャッシュする機能があります。オフライン時のアクセスはもちろん、ページの読み込みがAMPのように高速なので、利用者はストレスなくコンテンツにアクセスすることができます。

オフラインで閲覧が可能

プッシュ通知を受信可能

プッシュ通知は、割と普通のWebサイトでも利用されているので割愛しますが、伝えたい!と考えている情報を、特定のユーザーに的確に届けることができるのは、メリットですね。

プッシュ通知を受信可能

ただし、プッシュ通知を送り過ぎると、拒否されちゃうのでほどほどに…。

Webサイト運営をしている筆者のような立場では、メリットしかないのがPWAです。

cloudpack.mediaへのPWA導入の背景と期待する効果

『cloudpack.media』に掲載する記事を、少しでも多くの方に、「ストレスなく、たくさんの記事を読んでいただきたい」「役立つ情報を的確にお届けしたい」と考えています。

そのために、PWAを活用してユーザー体験を向上させることで、ユーザーの滞在時間を増やす(たくさんの記事を読んでもらう)ことができるのではないかと考えました。

そこで、プロジェクトを進める上で同時進行することになったのは、AMPページのリニューアルです。先に導入していたAMPは、実はプロトタイプとして考えていたのが原因です。

PWAとAMPページとのマッチング

Webページ(レスポンシブ)およびPWAで表示させるコンテンツとAMPページのUIは、可能な限り近づけるべきだと考えました。

同じサイトなのに急にデザインが変わると違和感が残りますし、視覚的差異をなくせれば、ストレス軽減につながりますからね。

PWAの導入パターンは大きく分けると3つあります。導入パターンの詳細は、Smashing Magazineの記事でご確認ください。

cloudpack.mediaではAMPとPWAの組み合わせパターンを「AMP to PWA」にし、PWA内で表示されるコンテンツはブラウザで見るのと同じデザインにしています。

PWAのインストール方法

この記事の執筆時点では、PWAのインストールにひと手間が必要です。

「ホーム画面に追加(改訂版)」機能を有効にする

まずは、Google Chromeの設定です。検索バーに次のURLを入力してアクセスしてください。

chrome://flags/#enable-improved-a2hs

現時点の最新バージョン(59.0.3071.125)では英語になってしまいますが、アクセスすると、”「ホーム画面に追加(改訂版)」機能を有効にする”が表示されますので、プルダウンを「有効(Enable)」にしてください。

提供元不明アプリの有効化

次はスマホの設定です。「設定」アイコンをタップして、「セキュリティ」を開きます。「提供元不明アプリ」の項目があるので有効化すれば、インストール前の準備は完了です。

この2つの設定さえ完了すれば、PWAを組み込んでいるサイトをアプリとしてインストールすることが可能です。ぜひ、cloudpack.mediaのPWAもインストールしてみてくださいね。(インストールが終わったら、提供元不明アプリを無効化に戻した方がいいかもしれません。)

このPWA導入物語にはまだ続きがあります。ご期待ください!