AMP & PWA

AMP & PWA
Ruby 舞鶴
18, June, 2017
Shigeru Kondou

特徴
Accelerated Mobile Pages
Google, Twitter が仕様を策定モバイル端末における⾼速表⽰プロジェクト

メリット
サイトのレスポンス向上カルーセル表⽰で記事を読まれやすくなるSEO対策モバイルフレンドリーのため検索上位になる可能性がある

デメリット
標準とAMP HTML の⼆重管理既存ページの置き換えは難しい

導⼊⽅法
AMP導⼊ガイド⽇本語版
<html> -> <html ⚡>
<script async
src="https://cdn.ampproject.org/v0.js">
</script>
<link rel="canonical" href="$SOME_URL">
https://www.ampproject.org/docs/tutorials

GOOGLE I/O 2017 WEB-SIDE
AMP & PWA の発表が⼤多数を占めるECサイトでAMP が使える(amp-bind, amp-form)
amp-ad 改善

特徴
Webアプリでネイティブアプリに近い操作性ServiceWorker, PushNotification, WebManifest

メリット
開発するアプリは１つ。ネイティブ⽤のコードを書く必要がないAppStore を通す必要がなく、不可解なルールに従ったり、⼿数料を払う必要がないユーザーにインストールを促し、ホーム画⾯にアイコンをおける必要なファイルをローカル保存することで、ネイティブアプリ以上に⾼速で応答できるオフラインで動作し、接続が回復時にデータを動悸できる

デメリット
ServiceWorker のデバッグが⾟い

導⼊⽅法
Web Starter Kit で環境構築HTTPS を有効にするWeb アプリのマニフェストを作成ServiceWorker の実装

PWA とAMP を組み合わせる⼿法
AMP as PWA
AMP ページでPWA を動かすAMP to PWA
モバイル検索でAMPページへ誘導AMP ページでServiceWorker のインストール(amp-install-serviceworker のJS を読ませる)
内部リンクから別の通常のPWA ベージへ誘導AMP in PWA
PWA ページにAMP ページを埋め込む

AMP はモバイル検索からの流⼊を促すPWA はネイティブアプリと同等の機能をWebアプリにもたらすPWAMP はEC 中⼼に主流の技術になりつつある

AMP & PWA

Recommended

Recommended

More Related Content

Similar to AMP & PWA

Similar to AMP & PWA (20)

AMP & PWA