Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AMP & PWA

273 views

Published on

Outline of AMP & PWA

Published in: Engineering
  • Login to see the comments

AMP & PWA

  1. 1. AMP & PWA Ruby 舞鶴 18, June, 2017 Shigeru Kondou
  2. 2. AMP
  3. 3. 特徴 Accelerated Mobile Pages Google, Twitter が仕様を策定モバイル端末における⾼速表⽰プロジェクト
  4. 4. メリット サイトのレスポンス向上カルーセル表⽰で記事を読まれやすくなるSEO対策モバイルフレンドリーのため検索上位になる可能性がある
  5. 5. デメリット 標準とAMP HTML の⼆重管理既存ページの置き換えは難しい
  6. 6. 導⼊⽅法 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
  7. 7. GOOGLE I/O 2017 WEB-SIDE AMP & PWA の発表が⼤多数を占めるECサイトでAMP が使える(amp-bind, amp-form) amp-ad 改善
  8. 8. PWA
  9. 9. 特徴 Webアプリでネイティブアプリに近い操作性ServiceWorker, PushNotification, WebManifest
  10. 10. メリット 開発するアプリは1つ。ネイティブ⽤のコードを書く必要がないAppStore を通す必要がなく、不可解なルールに従ったり、⼿数料を払う必要がないユーザーにインストールを促し、ホーム画⾯にアイコンをおける必要なファイルをローカル保存することで、ネイティブアプリ以上に⾼速で応答できるオフラインで動作し、接続が回復時にデータを動悸できる
  11. 11. デメリット ServiceWorker のデバッグが⾟い
  12. 12. 導⼊⽅法 Web Starter Kit で環境構築HTTPS を有効にするWeb アプリのマニフェストを作成ServiceWorker の実装
  13. 13. PWAMP
  14. 14. PWA とAMP を組み合わせる⼿法 AMP as PWA AMP ページでPWA を動かすAMP to PWA モバイル検索でAMPページへ誘導AMP ページでServiceWorker のインストール(amp-install-serviceworker のJS を読ませる) 内部リンクから別の通常のPWA ベージへ誘導AMP in PWA PWA ページにAMP ページを埋め込む
  15. 15. まとめ
  16. 16. AMP はモバイル検索からの流⼊を促すPWA はネイティブアプリと同等の機能をWebアプリにもたらすPWAMP はEC 中⼼に主流の技術になりつつある

×