Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

WordCamp Kyoto 2017の登壇資料です。

Yosuke Onoue

June 24, 2017
Tweet

More Decks by Yosuke Onoue

Other Decks in Technology

Transcript

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

    Webフロントエンドフレームワークのこと • トランスパイラ、ビルドツールのこと
  2. • Webサイトの解析ツール (Chrome拡張 or コマンド) • Progressive Web App •

    Performance • Accessibility • Best Practices • Chrome 60から
 標準搭載
 (Audits panel) Lighthouse
  3. 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
  4. PWAでできること • オフライン化 • インターネット接続なしでの利用 • 表示の高速化 • Push通知 •

    アプリへの再訪を促進 • App Install Banner • ホーム画面へのショートカット追加 • 徐々にアプリのようになる!
  5. Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… •

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

    Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ パラダイムの壁 • 発想の違い • 開発方法の違い
  7. 関連キーワード • Service Worker, Web App Manifest • Responsive Design

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

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

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

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

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

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

    • 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 ホスティング関連
  14. なぜオフラインWebアプリ? • モバイル環境への対応 • 通信の不安定さ • 通信の効率化 • 光速度は不変!(約30万km/s) •

    火星と地球で通信したら? (最接近時約7500万km) • オフライン・ファーストの思想と実践 by 白石俊平
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
  15. 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) • …
  16. Service Worker • Webページ(メインスレッド、UIスレッド)とは
 独立してスクリプトを動作させる仕組み • ネットワークリクエストをフック • キャッシュを使ってレスポンス •

    リクエストを修正 • サーバーPushを受けて通知を表示 • postMessageでメインスレッドと通信 • HTTPSでのみ動作 (localhostを除く)
  17. 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' } } } ] }) ] }
  18. Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • ユーザ操作に対して100ms以内に応答

    • Animation • 10ms / フレーム • Idle • アイドル時間を長くする • Loading • 1000ms以内に初期画面表示
  19. 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>
  20. Webサイトの種類と更新頻度 • 静的Webサイト、個人ツール、ゲーム • アプリ = コンテンツ • 開発者がコンテンツを更新 •

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

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

    • クローラかどうかを判断しプリレンダリングと
 通常のレスポンスに振り分ける • nginx、apache、express、rails • 250ページまでは無料
  23. ホスティングの要件 • HTTPS • HTTPの無効化 • HTTP/2 • URL Redirects


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

    • URL Redirects、APIプロキシ、HTTPヘッダ操作 • Prerender.io互換のプリレンダリング (9 USD/月)
  25. まとめ • Webと一緒にWordPressも進化していく • Webの未来を見据えた技術選択をしよう • Web for All •

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