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

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.

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

36.

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

37.

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

38.

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

39.

• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎の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

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

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

Want more?

Transcript