いまさら聞けないPWAとAMP

## 概要

- PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの
  - ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: [PWAs: building bridges to mobile, desktop, and native (Google I/O '18)](https://www.youtube.com/watch?v=NITk4kXMQDw)
- AMP = モバイルのWEBページを高速化するためのもの

どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。

## 1. PWAとは

Progressive Web Appsの略。WebアプリケーションのUX向上を目的とした、WEBページ／WEBアプリケーションとネイティブアプリの利点をいいとこ取りできる仕組み。モバイル端末でページを表示する時にネイティブアプリのような挙動をさせることが出来る。Google（Android Chrome）を中心に策定・展開されており、ユーザーとのエンゲージメントの向上やコンバージョン・リテンションの改善に効果があるとされる。

**例1**

[Google I/O 2016 公式ページ](https://events.google.com/io2016/)

<div>
<img src="https://qiita-image-store.s3.amazonaws.com/0/36524/39558b75-d0a2-eefc-4c8e-ebd8078df120.jpeg" width=300>
<img src="https://qiita-image-store.s3.amazonaws.com/0/36524/9ed19aa6-510e-005f-0c7f-cb05c8198b05.jpeg" width=300>
</div>

**例2**

Chrome Dev Summitのページ。2度目にページを開いたときに、Chromeがページをホーム画面に追加するよう促しているのが分かる。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36524/8980bf15-6d57-dd19-80de-57ee6792f45d.gif" width="400">


*上記gif画像は [The Business Case for Progressive Web Apps](https://cloudfour.com/thinks/the-business-case-for-progressive-web-apps/) より引用

### PWAのメリット

1. ページの読み込みや表示が速い
- オフラインでも動く
  - 画面遷移をともなう操作もオフライン時に可能
- プッシュ通知の受信が可能
- インストール不要
- ストアの審査なくアップデートが可能
- GPSを使った現在地取得と利用が可能
- ネイティブアプリのようなUIを実現できる
  - ブラウザデフォルトのUI（上部のメニューバー）を非表示にするなどのカスタマイズが可能
  - 「ホームに追加」ボタンを表示でき、ホームに追加されたページはインストールされたアプリのように扱える
  - ホーム画面のアイコンが設定できる
  - 起動時のスプラッシュ画面が設定できる

### WEBページをPWAにするには

PWAを開発するのに、特定のフレームワークやライブラリを利用する必要はない。以下に列挙するブラウザAPIを利用し、Googleが策定した[Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)に沿ったWEBページ／サービスを開発すれば、そのページ／サービスはPWAであると言える。ネイティブアプリ開発の知識や技術を必要とせず、一般的なWEBサイト／サービス開発に利用される技術を使ってPWAは作成できる。

- [Service Workers] (https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)（オフライン対応、プッシュ通知）
    - [Push API](https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/)
    - Notification API
- localStorage / IndexedDB（オフライン対応）
- History API（オフライン対応）
- Geolocation API（現在地取得）

Googleが提供する[Web Starter Kit](https://developers.google.com/web/tools/starter-kit/) を使えば、PWAに必要なファイルやテンプレートの雛形を用意してくれ、PWAにおおむね沿った簡易的なページはすぐに作れる。大規模なサイトをPWAにするのはそれなりに時間がかかる。

### ブラウザベンダのPWA対応状況

- Chrome:  
    - Desktop Chrome, Android ChromeでPWA対応可能。
- Safari: 
    - Safari Technology Preview Release 46にてService Workerが提供されることに[*1](#list-item-1)。2017/12/21時点ではPush APIなどはまだ提供されていないため、一部機能が利用可能に。
- Firefox: 
    - 一部の機能を除いてPWA対応可能。Web App Manifestに依存する機能は利用不可。
- Internet Explorer/Edge:
    - IEでは対応不可。Edgeでは次のメジャーバージョンでService Workerが利用可能になるため、一部の機能が利用可能に。 [*2](#list-item-2)

### PWAの利用状況

国内サイト・サービスのPWA対応率をいくつか見てみたところ [*3](#list-item-3)、おおむねPWA対応率は高くないものの、suumo.jpなど一部のサイトでは非常に高い数字が出ていた。[A selection of PWA](https://pwa.rocks/) から見れるように、海外ECサービスやメディアサイトで活用事例があるものの、PWA対応しているサイトのシェアなどの数字は見つからず、活用事例はまだまだ少ないことが窺える。

### 補足

- Google Analyticsの情報はオフライン間でも取得可能。オンラインになったときにまとめてデータを送信する仕組みがある [*4](#list-item-4)
- ServiceWorkerを利用するため、ページはHTTPSであることが必須
  - HTTPで取得されるコンテンツはmixed-contentとなりブロックされる [*5](#list-item-5)

## 2. AMPとは

Accelerated Mobile Pagesの略。アンプと読むのが一般的。GoogleとTwitterが共同で策定したモバイルページの高速化プロジェクト、およびその実現に必要な技術。PWAと同様に、WEBページ／サービス提供者のコンバージョンやリテンション改善に効果があるとされている。[*6](#list-item-6)

### AMPのメリット

1. ページの表示が速くなる
1. データ通信量が少ない
1. AMP対応に必要な技術を採用することで、結果的にSEOにもなる可能性がある [*7](#list-item-7)

### WEBページをAMP対応するには

[AMPの仕様](https://www.ampproject.org/learn/about-amp/)に沿ってモバイル向けページを構成／変更する。ページのコンテンツを大きく変える必要はなく、ページのメタ情報を書き換えたりスタイルを追加するだけなので、いちからAMPサイトを作成するのは簡単。大規模なサイトを丸ごとAMP対応するのは地道な努力が必要そう。

### AMP対応状況
「[Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました](https://webmaster-ja.googleblog.com/2016/01/accelerated-mobile-pages.html)」によると

- New York Times や BBCが世界的に参加を表明
- 朝日新聞、産経新聞、日刊スポーツ、毎日新聞、株式会社イード、マイナビニュース、BLOGOSがAMP への対応を準備中
- Ameba や LINE を含むサービスが、サービス内のコンテンツ ページを AMP に対応させる

とのこと。実際にモバイル端末から  http://g.co/ampdemo にアクセスしてGoogleから検索すると、AMP対応のページには「AMP」とラベルがつく。ページの表示は確かに速い。

<img src="https://img.esa.io/uploads/production/attachments/2285/2017/02/26/6313/2b5a6501-0802-43cf-974e-3f74a12dd4ef.jpg" width=300>

## 3. PWA/AMPの今後

#### PWA

- Webを主軸に展開されるサービスが、UX向上や、ネイティブアプリ開発の代替としてコスト削減のためにPWAを開発することは十分考えられる
- 一方で、すでにアプリとしてリリースされているものをPWAに置き換える、といったことは考えにくい

#### AMP

- 採用ハードルも低く、モバイル系の大手メディアやECサイトのAMP対応はどんどん進むと予測される

## 脚注

<ol>
<li id="list-item-1"><a href="https://developer.apple.com/safari/technology-preview/release-notes/">Safari Technology Preview Release Notes</a></li>
<li id="list-item-2"><a target="_blank" href="http://caniuse.com/#search=service%20worker">Can I Use? – Service Worker</a></li>
<li id="list-item-3">Googleが提供する <a target="_blank" href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> というツールを利用して測定。PWAの対応状況やパフォーマンスを調査／計測し点数化してくれる。</li>
<li id="list-item-4"><a target="_blank" href="https://developers.google.com/web/updates/2016/07/offline-google-analytics">Offline Google Analytics Made Easy</a></li>
<li id="list-item-5"><a target="_blank" href="https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content">Preventing Mixed Content</a></li>
<li id="list-item-6"><a target="_blank" href="https://webmaster-ja.googleblog.com/2016/01/accelerated-mobile-pages.html">Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました</a></li>
<li id="list-item-7"><a target="_blank" href="https://seo-hacker.com/accelerated-mobile-pages-amp-important-implement/">How Accelerated Mobile Pages (AMP) Affects SEO – Why it’s Important and How to Implement it</a></li>
</ol>


## 参考

PWA

- [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/)
- [Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？](https://www.webprofessional.jp/what-is-the-attention-project-pwa-by-google/)
- [PWAについて](http://qiita.com/uryyyyyyy/items/dc805940d699af72c3ec)
- [アプリは必要？PWA・AMPに見る次世代モバイルサイト](http://uxmilk.jp/53561)
- [Progressive Web Appを作ってみる](http://qiita.com/kawakami-kazuyoshi/items/551f23ecee6c3d396c2a)
- [Progressive Web App Libraries in Production](https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34)

AMP

- [AMP、3つのメリットとデメリット](http://ascii.jp/elem/000/001/149/1149797/)
- [サイト運営者向け AMP 導入ガイド](https://drive.google.com/file/d/0BxvWUiBQ8jznNXhISW4zRFF0eW8/view)
- [AMP Project](https://www.ampproject.org/)
- [いよいよ導入されるAMP（Accelerated Mobile Pages）の基礎知識から対応方法まで！まとめ](https://webkikaku.co.jp/blog/seo/accelerated-mobile-pages/)