Pro Yearly is on sale from $80 to $50! »

WordPressユーザーのためのProgressive Web Appsの話

WordPressユーザーのためのProgressive Web Appsの話

WordCamp Kyoto 2017の登壇資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

June 24, 2017
Tweet

Transcript

  1. WordPressユーザーのための Progressive Web Appsの話 尾上 洋介 2017年年6⽉月24⽇日 WordCamp Kyoto 2017

    このスライド:https://goo.gl/jmJsUA
  2. 自己紹介 • おのうえ • 京都大学 学際融合教育研究推進センター
 政策のための科学ユニット 特定助教 • ng-kyotoオーガナイザー、GDG神戸スタッフ

    • 可視化、最適化、アルゴリズムの研究 • WordPress初心者
  3. ng-kyoto • 京都を中心に活動するAngularのユーザーコミュニティ • https://ng-kyoto.github.io/

  4. 内容 • 話すこと • これからのWebサイトがどうあるべきか • 話さないこと • PHP、WordPressのこと •

    Webフロントエンドフレームワークのこと • トランスパイラ、ビルドツールのこと
  5. 良いWebサイトを作っていますか?

  6. 良いWebサイトってなんですか?

  7. 良いWebサイトの
 基準を持っていますか?

  8. 良いWebサイトの基準は
 定量的に測定できますか?

  9. • Webサイトの解析ツール (Chrome拡張 or コマンド) • Progressive Web App •

    Performance • Accessibility • Best Practices • Chrome 60から
 標準搭載
 (Audits panel) Lighthouse
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. Progressive Web Apps

  23. W3C Mission • “The W3C mission is to lead the

    World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.” • Design Principles • Web for All • Web on Everything
  24. Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • Webサイトとネイティブアプリの
 いいとこ取りをしたWebアプリ •

    Progressive Enhancement • 高いユーザビリティの実現 • ビジネスフレンドリー
  25. PWAでできること • オフライン化 • インターネット接続なしでの利用 • 表示の高速化 • Push通知 •

    アプリへの再訪を促進 • App Install Banner • ホーム画面へのショートカット追加 • 徐々にアプリのようになる!
  26. なぜPWA? • ユーザーがモバイルアプリを使用する時間は限られているが、 極一部の人気アプリに割かれる時間が多い
 → ほとんどのモバイルアプリの使用率は非常に低い
 → ユーザーがより多く利用するWebサイトに
  ネイティブアプリの利点を取り込む

  27. Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… •

    Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ
  28. Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… •

    Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ パラダイムの壁 • 発想の違い • 開発方法の違い
  29. App Shellアーキテクチャ Webページ
 (HTML/CSS/JS) サーバーサイド クライアントサイド DB コンテンツ HTML/CSS/JS (キャッシュ)

    従来のWebアプリ App Shell Template Webページ
  30. WP REST API • プログラムからWordPressを操作するインタフェース • 記事、カテゴリ、ユーザ、… • 取得、更新 •

    用途 • SPAの構築 • 他Webサービスへの組み込み • WordPress 4.7で導入
  31. なぜWP REST APIか? • 進化するWebへの追随 • マッシュアップ • より良いWebサイトの実現 •

    動的WebサイトからSPA、PWAへの転換
  32. PWAをつくる

  33. 関連キーワード • Service Worker, Web App Manifest • Responsive Design

    • RAIL Performance Model • Web Storage, IndexedDB • モジュールシステム • webpack、SystemJS、rollup.js、… • フロントエンドフレームワーク、ライブラリ • Angular、Polymer、React、…
  34. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL https://developers.google.com/web/progressive-web-apps/checklist ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 良いWebサイトの指針
  35. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 SPA設計関連
  36. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 オフライン関連
  37. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 パフォーマンス関連
  38. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 SEO関連
  39. PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 ホスティング関連
  40. 参考資料 • PWAハンズオン勉強会 @ GDG神戸 2016/7/30
 https://speakerdeck.com/likr/gdgshen-hu- progressive-web-apphanzuonmian-qiang-hui • Codelabs


    https://codelabs.developers.google.com/pwa-dev- summit
  41. オフラインWebアプリ

  42. なぜオフラインWebアプリ? • モバイル環境への対応 • 通信の不安定さ • 通信の効率化 • 光速度は不変!(約30万km/s) •

    火星と地球で通信したら? (最接近時約7500万km) • オフライン・ファーストの思想と実践 by 白石俊平
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
  43. Fetch戦略 • The offline cookbook
 https://jakearchibald.com/2014/offline-cookbook/ • Cache only •

    Network only • Cache, falling back to network (cache first) • Cache & network race (fastest) • Network falling back to cache (network first) • …
  44. Service Worker • Webページ(メインスレッド、UIスレッド)とは
 独立してスクリプトを動作させる仕組み • ネットワークリクエストをフック • キャッシュを使ってレスポンス •

    リクエストを修正 • サーバーPushを受けて通知を表示 • postMessageでメインスレッドと通信 • HTTPSでのみ動作 (localhostを除く)
  45. sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScriptまたは設定ファイルから
 Service Workerコードを生成 • よく使うFetch戦略が実装済み •

    networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
  46. sw-precache-webpack-plugin const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin') module.exports = { plugins: [

    new SWPrecacheWebpackPlugin({ maximumFileSizeToCacheInBytes: 10000000, staticFileGlobs: [ 'public/index.html', 'public/bundle.js', 'public/manifest.json' ], stripPrefix: 'public/', navigateFallback: '/index.html', runtimeCaching: [ { urlPattern: /https:\/\/public-api\.wordpress\.com\/rest\/v1 handler: 'networkFirst', options: { cache: { name: 'posts' } } } ] }) ] }
  47. パフォーマンス

  48. Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • ユーザ操作に対して100ms以内に応答

    • Animation • 10ms / フレーム • Idle • アイドル時間を長くする • Loading • 1000ms以内に初期画面表示
  49. 初期ローディングの高速化 • レスポンスを速くする • 良い性能のサーバを使う • HTTP/2 • 通信量を減らす •

    minify • 通信を減らす • キャッシュ • オフライン化 • CDNの利用
  50. bundleサイズを小さくする • bundle分割 • 共通部分 + ページ毎 • ライブラリ外部化 •

    scriptタグで読み込んだスクリプトを
 CommonJSスタイルで使用する • CDN利用 module.exports = { externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter' } } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.8.1/ReactRouter.min.js"></script>
  51. PWAとSEO

  52. インデックスとソーシャル共有 • Googleのクローラ • JavaScriptを処理する • ソーシャル共有 • Twitter、Facebook、… •

    OGP • JavaScriptを処理しない
  53. Webサイトの種類と更新頻度 • 静的Webサイト、個人ツール、ゲーム • アプリ = コンテンツ • 開発者がコンテンツを更新 •

    CMS、ブログ • アプリとコンテンツの分離 • 管理者がコンテンツを更新 • SNS、ユーザ参加コンテンツ • ユーザがコンテンツを更新 SPAでインデックス可能
 (ページ毎の変更は不可) クローラ対策が必要 オフライン化の工夫が必要
  54. クローラ対策 • Server Side Rendering • 初期描画をサーバ側で処理 • 初期ローディングの高速化 •

    Universalを意識したコーディング • プリレンダリング • クローラに対してレンダリング済みのHTMLを応答 • ユーザには通常のSPAとして動作 • プリレンダリングのためのミドルウェアが必要
  55. Prerender.io • https://prerender.io/ • PhantomJSでプリレンダリング • Headless WebKit • ミドルウェア

    • クローラかどうかを判断しプリレンダリングと
 通常のレスポンスに振り分ける • nginx、apache、express、rails • 250ページまでは無料
  56. PWAのホスティング

  57. ホスティングの要件 • HTTPS • HTTPの無効化 • HTTP/2 • URL Redirects


    (ページ毎のURL) • キャッシュ • CDN • 継続的デリバリー • カスタムドメイン
  58. Netlifyのススメ • https://www.netlify.com/ • ハイパフォーマンス • コマンドラインデプロイ • 無料HTTPS (カスタムドメイン対応)

    • URL Redirects、APIプロキシ、HTTPヘッダ操作 • Prerender.io互換のプリレンダリング (9 USD/月)
  59. デモ

  60. ブログ • https://blog.likr-lab.com/ • PWA Checklistのベースライン • オフラインでの記事閲覧 • SEO

    / OGP対応 • https://blog.likr-lab.com/posts/102
  61. 構成 • フロントエンド • React、React Helmet • ServiceWorker、AppManifest • バックエンド

    • wordpress.com API • Netlify
  62. None
  63. まとめ

  64. まとめ • Webと一緒にWordPressも進化していく • Webの未来を見据えた技術選択をしよう • Web for All •

    Web on Everything • 良いWebサイトとは何かの指針を持とう • Progressive Web App Checklist • Lighthouse