前回はPWAとは何かということをまとめてみました。
今回はPWAを構成する４つのキーワードの１つ、Integratedについての話をまとめてみます。

Chapter2:Integrated Experiences

Integratedとは

Integratedとは、ここではWebを意識させないという意味になります。
つまり、Webアプリケーションをホーム画面に表示させることにより、ブラウザからページに接続するということをユーザに意識させずにWebアプリケーションを利用できるようにします。

ホーム画面の追加

現在、８０％のユーザがアプリをホーム画面に追加し、よく使うものをまとめたり、見た目を良くしたりというように好きなように配置しています。
Webアプリケーションもホーム画面にURLをブックマークするという利用はできましたが、名前を変えられない、オフラインでは使えないなどの制約がありました。
しかし、それらの問題を解決する手段としてWeb App Manifestがあります。

Web App Manifest

Webアプリケーションマニフェストは、各HTMLページからリンクしてブラウザにアプリケーションについての情報を伝えるJSONファイルです。
以下のようなコードをHTMLに埋め込みます。
<link rel="manifest" href="/manifest.json">

JSONファイルの内容は以下のようになっています。

{
    "name": "CNET Tech Today",　　　　 　　　　　　　　　　・・・　起動画面での名称
    "short_name": "Tech Today",　　　　　　　　　　　　　　・・・　ホーム画面での名称
    "icons": [{　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　・・・ ホーム上でのアイコン
    "src": "icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",　　　　　　　　　　　　　　　・・・ 開始するURL
    "display": "standalone",　　　　　　　　　　　　　　　　　　　　　・・・　表示プロパティ（例ではNative Appのように表示）
    "orientation": "portrait",　　　　　　　　　　　　　　　　　・・・ 画面の向き
    "background_color": "#FF0000",　　　　  　・・・ 起動画面の背景色
    "theme_color": "#FF0000"　　　　　　　　　　　　　　　　　　　　　・・・ マルチタスク画面の色
}

細かい仕様は以下のURLをご覧ください。

ホーム画面追加の通知

ホーム画面に追加をするときは、ブラウザ側からホーム画面に追加することを提案してくれます。
ブラウザから通知される基準は、サイトを何回訪れたか、何分使用したか等、ブラウザによって異なります。

※Google Chromeの場合の条件

Web App Manifest（name、short_name、start_url、192x192以上のアイコン、表示プロパティは必須）
Offline support(Service Workerがあること)
Engaged User(ユーザがサイトに関心があること(何度も訪れていること？)→スパムと間違われないように)

Web Payment

現在、Webショッピングは６６％がWebサイトから行われております。
しかし、モバイルからのコンバージョン率はPCからのコンバージョン率の３分の１となっております。
理由としては、モバイルから決済に必要な情報（名前、住所、電話番号、配送方法など）を入力するという手間の大変さが挙げられます。
そこで、モバイルからのコンバージョン率を上げるために、チェックアウトの流れや支払いを簡単にする必要があります。

Autofill

ブラウザ側で入力する要素を判断し、自動入力をします。
しかし、画面ごとに要素は異なるため、誤った入力をしてしまう可能性があります。
autocomplete属性を使うことで、ブラウザが要素を判断する必要がなくなります。
以下のように、属性を追加するだけで使用することができます。

<label for="frmNameCC">Name on card</label>
<input name="ccname" autocomplete="cc-name">

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" autocomplete="cc-number">

<label for="frmCCCVC">CVC</label>
<input name="cvc" autocomplete="cc-csc">

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" autocomplete="cc-exp">

その他のオートコンプリート属性は下のURLをご覧ください。
https://goo.gl/5mLti2

Payment API Request

Webショッピングの支払い情報の入力を標準化するためのAPIです。
Payment API Requestはブラウザから提供するもので、これを使用することでサイトは独自の入力フォームを用意する必要がなく、ユーザに入力フォームを提供することができます。
しかし、このAPIはあくまで入力フォームを提供するだけであり、決済処理を行うわけではありません。
決済処理は、APIから渡されるJSON形式の入力情報を使用して個別に実装する必要があります。

おわりに

ここでは、Webアプリをホーム画面に追加する方法とWebショッピングの支払い情報の入力に関する話をまとめさせていただきました。
ホーム画面に追加するというキモの部分が、１ファイルの用意と１文の埋め込みで実現できるというのは衝撃的です。
次はReliable（信頼性）の話をまとめたいと思います。

GoogleのPWA Roadshowの話(2)