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

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

WordCamp Kyoto 2017の登壇資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

June 24, 2017
Tweet

Transcript

  1. 4.

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

    Webフロントエンドフレームワークのこと • トランスパイラ、ビルドツールのこと
  2. 9.

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

    Performance • Accessibility • Best Practices • Chrome 60から
 標準搭載
 (Audits panel) Lighthouse
  3. 10.
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 15.
  9. 16.
  10. 17.
  11. 18.
  12. 19.
  13. 20.
  14. 21.
  15. 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
  16. 25.

    PWAでできること • オフライン化 • インターネット接続なしでの利用 • 表示の高速化 • Push通知 •

    アプリへの再訪を促進 • App Install Banner • ホーム画面へのショートカット追加 • 徐々にアプリのようになる!
  17. 27.

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

    Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ
  18. 28.

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

    Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ パラダイムの壁 • 発想の違い • 開発方法の違い
  19. 33.

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

    • RAIL Performance Model • Web Storage, IndexedDB • モジュールシステム • webpack、SystemJS、rollup.js、… • フロントエンドフレームワーク、ライブラリ • Angular、Polymer、React、…
  20. 34.

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

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

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

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

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

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

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

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

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

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

    PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 ホスティング関連
  26. 42.

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

    火星と地球で通信したら? (最接近時約7500万km) • オフライン・ファーストの思想と実践 by 白石俊平
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
  27. 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) • …
  28. 44.

    Service Worker • Webページ(メインスレッド、UIスレッド)とは
 独立してスクリプトを動作させる仕組み • ネットワークリクエストをフック • キャッシュを使ってレスポンス •

    リクエストを修正 • サーバーPushを受けて通知を表示 • postMessageでメインスレッドと通信 • HTTPSでのみ動作 (localhostを除く)
  29. 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' } } } ] }) ] }
  30. 48.

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

    • Animation • 10ms / フレーム • Idle • アイドル時間を長くする • Loading • 1000ms以内に初期画面表示
  31. 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>
  32. 51.
  33. 53.

    Webサイトの種類と更新頻度 • 静的Webサイト、個人ツール、ゲーム • アプリ = コンテンツ • 開発者がコンテンツを更新 •

    CMS、ブログ • アプリとコンテンツの分離 • 管理者がコンテンツを更新 • SNS、ユーザ参加コンテンツ • ユーザがコンテンツを更新 SPAでインデックス可能
 (ページ毎の変更は不可) クローラ対策が必要 オフライン化の工夫が必要
  34. 54.

    クローラ対策 • Server Side Rendering • 初期描画をサーバ側で処理 • 初期ローディングの高速化 •

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

    Prerender.io • https://prerender.io/ • PhantomJSでプリレンダリング • Headless WebKit • ミドルウェア

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

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


    (ページ毎のURL) • キャッシュ • CDN • 継続的デリバリー • カスタムドメイン
  37. 58.

    Netlifyのススメ • https://www.netlify.com/ • ハイパフォーマンス • コマンドラインデプロイ • 無料HTTPS (カスタムドメイン対応)

    • URL Redirects、APIプロキシ、HTTPヘッダ操作 • Prerender.io互換のプリレンダリング (9 USD/月)
  38. 59.
  39. 62.
  40. 63.
  41. 64.

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

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