2020/01/14

Progressive Web Apps(PWA)ってどんな機能?概要と実装方法をまとめてみた

解説猫(仮)
解説猫(仮)SEO解説担当の猫さんです
元SEOディレクターで、現在は自社マーケティングやってるみたいです
・趣味:昼寝
・どんな人でもわかる優しい説明をこころがけているが、そんなにうまくはない
・冷静な判断で仲間からの信頼も厚い(自称)
唐澤
唐澤さんWebディレクターの唐澤さんです
webサイト制作に携わって12年超のベテランさんです
 ・特技:毎日うどんを食べる
 ・趣味:低音の研究
 ・備考:「私のキャリアパスは南国のジジイです」と発言したが、入社出来た強者
解説猫(仮)
こんにちは、こんばんは、解説の猫(仮)と申します。
この記事では、PWA(Progressive Web Apps)について解説しています。
よろしくお願いしますね。
唐澤さん
こんにちは!唐澤と申します。
いやー、大手でも対応するところが出てきましたね。
PWAはこれからの盛り上がりに期待です!

PWAとは?

PWAは「WebサイトやWebアプリをネイティブアプリのような感覚で使える仕組み」です。
と言われても、「Webアプリ」や「ネイティブアプリ」ってよくわからない方もいらっしゃるかと思います。
「ネイティブアプリ」と「webアプリ」は、下記のようなアプリのことを言います。

●ネイティブアプリ
端末にインストールして使用するアプリのこと。
ダウンロードした端末で処理され、機能する。

ゲームやイラストなど、みなさんも様々なアプリを使っていると思います。
AppStoreやGooglePlayからダウンロードして使っているアレですね。
iPhone用アプリやWindows用アプリといった、特定のプラットフォームで機能するアプリを指します。

●Webアプリ
ブラウザ上で機能するアプリ。
インターネットなどのネット環境上で機能する。

乗換案内や食べログ、TwitterやFacebookのようなSNSなどが該当します。
ブラウザで使用するのでダウンロードの必要がありません。

なお、PWAについてはGoogleDevelopersで、下記のように紹介されています。

プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。何より重要なのは、それらがどのブラウザでも動作するウェブアプリでることです。いまウェブアプリを構築しているのであれば、すでにプログレッシブウェブアプリを構築する準備は整っています。

では、PWAには具体的にどんな機能があるのでしょうか?
次のセクションでは実装可能な機能について、紹介します。

PWAで実装可能な機能(出来ること)

「PWAで何ができるか」をザックリ説明します。

ホーム画面にショートカットを設置

PWAホーム画面に追加イメージ

ホーム画面にアプリへのショートカットを設置、タップでアクセスできるようになります。
わざわざ検索しなくていいから楽ですね!

アプリやサイトの運営側は、一度インストールしてもらえれば、ユーザーとの使ってもらえる回数が増えそうです。
加えて、アップデート(情報の更新)も自動で行われます。
「情報が古いから再読み込み」みたいな手間は発生させずにすみます。

表示速度の改善 – キャッシュの利用

キャッシュ説明用イメージ

キャッシュというのは一度見たサイトやアプリのデータを一時的にとっておくことです。
2回目にアクセスしたときは、とっておいたデータを読み込むから早くなるわけですね。

表示速度が上がるので、ユーザーのストレスを減らすことができます。
人によっては2.3秒表示されないだけでストレスに感じることもありますので、ありがたい機能ですね!

プッシュ通知

「〇〇からの通知を許可しますか?」
この表示、アプリをダウンロードするとよく出てきますよね。

PWAでもプッシュ機能を使用できます。
基本webサイトやwebアプリは、ユーザーのアクセスを待つ受動的なものです。
運用側からユーザーに呼びかけができるのは、ありがたい機能ですね!

オフラインで使用可能

前述したようにPWAではキャッシュを保存します。
そのキャッシュのデータを使用することで、ネットに繋がっていなくても閲覧が可能です。

ネット環境が万全でない場合に便利ですね。

唐澤さん
「通知を送ってくるWebサイト」とか、これまでなかったですよね!
解説猫(仮)
確かに新しい…
でも私、ユーザーとしてPWAを使ったことはないですね。
唐澤さん
なんとまあ。
でもその指摘は的確で、浸透しないと良い仕組みも意味を成しません。
現状、意識しないと気づけないことが多いですね。
解説猫(仮)
ですね。
では次はメリット・デメリットを見てみましょう。
PWAさんの回し者ではありませんが、一人でも多くの方に知ってもらえたら良いですね。

PWA導入のメリット・デメリット

PWAの導入には、以下のようなメリット・デメリットがあります。

PWA導入のメリット

ユーザーエクスペリエンス(体験)の向上

サイトやアプリはストレスフリーであることが理想です。
表示速度の改善は、ユーザーの快適さに貢献してくれます。

ユーザーへのアプローチ

WebサイトやWebアプリは通常、ユーザーの意思でアクセスして使用します。
ですが、PWAならプッシュ通知で運営側からアプローチすることができます。
また、ホーム画面へのアイコン追加も、ユーザーとの接点を増やす手段になります。

アプリの審査が不要!

ほとんど全てのネイティブアプリが通るであろう、App StoreやGooglePlayの審査。
これに落ちる心配がありません。
そもそも受ける必要がありませんので!

OSごとの個別対応が不要

通常のアプリはiOSとAndroidの2種類に対応できるよう、別々に作るのが主流ですが、PWAはあくまでもWebサイトなので、OSや機種に左右されません!

大容量インストールがない

通常アプリとは違い、PWAのダウンロードは非常に情報が少なく、アイコン設置以外に時間がかからないため、ユーザー側での実装が非常にスムーズです。

解説猫(仮)
メリットだけ見ると素晴らしい機能にしか見えないですね。
ただ世の中、そんな甘い話ばかり転がってはいないもの…
では、次はデメリットを見てみましょう。

PWA導入のデメリット

そう、なかなか良いことずくめとはいきません…
PWAを導入する際は下記の点に注意しましょう。

AndroidとiOSで機能に差がある

結論から言うとiOSでのサポートが弱いのが現状です。
下の画像をご覧ください。

■iOS
pwaツール検証結果・iOS

■Android
pwaツール検証結果・Android

おわかりいただけたでしょうか…

iOSはAndroidで可能な多くの機能に対応していません。
※「ホーム画面に追加」はiOSでもsafariのみ対応しているようです。

この現状については、サポート範囲の拡張を望むばかりですね。
なお、上記はGoogleのThomas Steinerさんが作成したツールの検証結果になります。

自社開発でのアプリがある場合、管理の手間が増える

PWAで実装しているものと同じようなアプリを公開している場合、Webサイトの更新と同じ内容をアプリで更新しないといけないので、二重で手間がかかります。
コンテンツ差異の発生も気を付けないといけませんし、管理面は大変になります。

SSL化が必要になる

PWAの条件の一つに「SSL対応(httpsであること)」が含まれています。
SSL化未対応なサイトは、まずは取り入れるところからスタートしなければ実装できません。

新規ユーザーに接触できない

PWAは基本的に、訪問したサイトでユーザーに直接インストールしてもらう必要があります。
ネイティブアプリのように、アプリストアで見つけてもらうことはできません。
ユーザーに気づいてもらえるよう、サイト側に知らせる工夫をこらす必要があります。
※Androidのみ、アプリストアで配信する手段が提供されています。

唐澤さん
AndroidとiOSの対応状況の差は顕著で、iOSでは制限が多い状態です。
私もiPhoneユーザーとして、改善を求めるばかりです…

成功事例の紹介

実際に導入しているサイトを紹介します。
みなさんが使っているサイトがPWAに対応しているかもしれませんね!

日経電子版

日経電子版PWAイメージ

オフライン対応が可能となっているページです。
通信を遮断し、ネットやメールが使用できない「機内モード」でも読み込むことができます。
記事の詳細ページまでは流石に読み込めませんが、記事一覧だけでも凄いですね!

Rettyグルメニュース

RettyグルメニュースPWAイメージ

筆者も普段お世話になっている、Rettyさんのグルメニュースです。
やはり表示速度の速いメディアは快適ですね!

アイドルマスターシャイニーカラーズ

アイドルマスターシャイニーカラーズPWAイメージ

当メディアの竹内が密かに好きな(?)アイドルマスターでもまさかのPWA化が!?
初回ダウンロードが長いかもしれませんが、androidでは滑らかに動いていました。

解説猫(仮)
ほぉ…
試しに使ってみましたが、確かに快適です。
唐澤さん
早いし、思ったよりお手軽ですよね。
見知ったサイトに実装されてると、親近感わきますね!
竹内
ちょ!
アイドルマスターとかやめてくd…
解説猫(仮)
大変失礼いたしました、ノイズが入りました。
唐澤さん
ノイズは良くないですね。
とにかくみなさんも、是非1回試してください。
猫さんのように新しい驚きがあるかもしれませんよ!!

「ホーム画面に追加」してPWAを使ってみよう

試してみましょう!
と言われても、どうすればいいのかという話ですね。
ホーム画面へのアイコン追加は、とても簡単です。

PWAホーム追加手順1
PWA対応ページにアクセスして、下のメニューにある「共有」から…

PWAホーム追加手順2
ちょっと下にスクロールして、「ホーム画面に追加」をタップ

PWAホーム追加手順3
確認画面で右上に表示される「追加」をタップ

PWAホーム追加手順4
ホーム画面に追加されていれば完了です!
ね?簡単でしょう?

ちなみにAndroidだと、ページ下部からホーム画面への追加ボタンがヌルっと出てきたりします。
案内に従っていれば、追加できるはずですよ!

まとめ

ネイティブアプリを作る予算がなくてもPWAを実装すれば、満足の行くUIを提供できるのではないでしょうか?
サービスサイトや、ECサイトなど実装場面は多岐に渡りますね!

SEMジャーナルも何か対応できればと思いますので、今後の動向にご注目ください!

まずは無料調査・お見積もり