Tweet
Tweet

Slide 1

Slide 1 text

WordPressユーザーのための Progressive Web Appsの話 尾上 洋介 2017年年6⽉月24⽇日 WordCamp Kyoto 2017 このスライド：https://goo.gl/jmJsUA

Slide 2

Slide 2 text

自己紹介 • おのうえ • 京都大学 学際融合教育研究推進センター
 政策のための科学ユニット 特定助教 • ng-kyotoオーガナイザー、GDG神戸スタッフ • 可視化、最適化、アルゴリズムの研究 • WordPress初心者

Slide 3

Slide 3 text

ng-kyoto • 京都を中心に活動するAngularのユーザーコミュニティ • https://ng-kyoto.github.io/

Slide 4

Slide 4 text

内容 • 話すこと • これからのWebサイトがどうあるべきか • 話さないこと • PHP、WordPressのこと • Webフロントエンドフレームワークのこと • トランスパイラ、ビルドツールのこと

Slide 5

Slide 5 text

良いWebサイトを作っていますか？

Slide 6

Slide 6 text

良いWebサイトってなんですか？

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

• Webサイトの解析ツール (Chrome拡張 or コマンド) • Progressive Web App • Performance • Accessibility • Best Practices • Chrome 60から
 標準搭載
 (Audits panel) Lighthouse

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Progressive Web Apps

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • Webサイトとネイティブアプリの
 いいとこ取りをしたWebアプリ • Progressive Enhancement • 高いユーザビリティの実現 • ビジネスフレンドリー

Slide 25

Slide 25 text

PWAでできること • オフライン化 • インターネット接続なしでの利用 • 表示の高速化 • Push通知 • アプリへの再訪を促進 • App Install Banner • ホーム画面へのショートカット追加 • 徐々にアプリのようになる！

Slide 26

Slide 26 text

なぜPWA？ • ユーザーがモバイルアプリを使用する時間は限られているが、 極一部の人気アプリに割かれる時間が多い
 → ほとんどのモバイルアプリの使用率は非常に低い
 → ユーザーがより多く利用するWebサイトに
 　ネイティブアプリの利点を取り込む

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… • Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ パラダイムの壁 • 発想の違い • 開発方法の違い

Slide 29

Slide 29 text

App Shellアーキテクチャ Webページ
 (HTML/CSS/JS) サーバーサイド クライアントサイド DB コンテンツ HTML/CSS/JS (キャッシュ) 従来のWebアプリ App Shell Template Webページ

Slide 30

Slide 30 text

WP REST API • プログラムからWordPressを操作するインタフェース • 記事、カテゴリ、ユーザ、… • 取得、更新 • 用途 • SPAの構築 • 他Webサービスへの組み込み • WordPress 4.7で導入

Slide 31

Slide 31 text

なぜWP REST APIか？ • 進化するWebへの追随 • マッシュアップ • より良いWebサイトの実現 • 動的WebサイトからSPA、PWAへの転換

Slide 32

Slide 32 text

PWAをつくる

Slide 33

Slide 33 text

関連キーワード • Service Worker, Web App Manifest • Responsive Design • RAIL Performance Model • Web Storage, IndexedDB • モジュールシステム • webpack、SystemJS、rollup.js、… • フロントエンドフレームワーク、ライブラリ • Angular、Polymer、React、…

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

参考資料 • 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

Slide 41

Slide 41 text

オフラインWebアプリ

Slide 42

Slide 42 text

なぜオフラインWebアプリ？ • モバイル環境への対応 • 通信の不安定さ • 通信の効率化 • 光速度は不変！(約30万km/s) • 火星と地球で通信したら？ (最接近時約7500万km) • オフライン・ファーストの思想と実践 by 白石俊平
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first

Slide 43

Slide 43 text

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) • …

Slide 44

Slide 44 text

Service Worker • Webページ(メインスレッド、UIスレッド)とは
 独立してスクリプトを動作させる仕組み • ネットワークリクエストをフック • キャッシュを使ってレスポンス • リクエストを修正 • サーバーPushを受けて通知を表示 • postMessageでメインスレッドと通信 • HTTPSでのみ動作 (localhostを除く)

Slide 45

Slide 45 text

sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScriptまたは設定ファイルから
 Service Workerコードを生成 • よく使うFetch戦略が実装済み • networkFirst • cacheFirst • fastest • cacheOnly • networkOnly

Slide 46

Slide 46 text

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' } } } ] }) ] }

Slide 47

Slide 47 text

パフォーマンス

Slide 48

Slide 48 text

Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • ユーザ操作に対して100ms以内に応答 • Animation • 10ms / フレーム • Idle • アイドル時間を長くする • Loading • 1000ms以内に初期画面表示

Slide 49

Slide 49 text

初期ローディングの高速化 • レスポンスを速くする • 良い性能のサーバを使う • HTTP/2 • 通信量を減らす • minify • 通信を減らす • キャッシュ • オフライン化 • CDNの利用

Slide 50

Slide 50 text

bundleサイズを小さくする • bundle分割 • 共通部分 + ページ毎 • ライブラリ外部化 • scriptタグで読み込んだスクリプトを
 CommonJSスタイルで使用する • CDN利用 module.exports = { externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter' } }

Slide 51

Slide 51 text

PWAとSEO

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Webサイトの種類と更新頻度 • 静的Webサイト、個人ツール、ゲーム • アプリ = コンテンツ • 開発者がコンテンツを更新 • CMS、ブログ • アプリとコンテンツの分離 • 管理者がコンテンツを更新 • SNS、ユーザ参加コンテンツ • ユーザがコンテンツを更新 SPAでインデックス可能
 (ページ毎の変更は不可) クローラ対策が必要 オフライン化の工夫が必要

Slide 54

Slide 54 text

クローラ対策 • Server Side Rendering • 初期描画をサーバ側で処理 • 初期ローディングの高速化 • Universalを意識したコーディング • プリレンダリング • クローラに対してレンダリング済みのHTMLを応答 • ユーザには通常のSPAとして動作 • プリレンダリングのためのミドルウェアが必要

Slide 55

Slide 55 text

Prerender.io • https://prerender.io/ • PhantomJSでプリレンダリング • Headless WebKit • ミドルウェア • クローラかどうかを判断しプリレンダリングと
 通常のレスポンスに振り分ける • nginx、apache、express、rails • 250ページまでは無料

Slide 56

Slide 56 text

PWAのホスティング

Slide 57

Slide 57 text

ホスティングの要件 • HTTPS • HTTPの無効化 • HTTP/2 • URL Redirects
 (ページ毎のURL) • キャッシュ • CDN • 継続的デリバリー • カスタムドメイン

Slide 58

Slide 58 text

Netlifyのススメ • https://www.netlify.com/ • ハイパフォーマンス • コマンドラインデプロイ • 無料HTTPS (カスタムドメイン対応) • URL Redirects、APIプロキシ、HTTPヘッダ操作 • Prerender.io互換のプリレンダリング (9 USD/月)

Slide 59

Slide 59 text

デモ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

構成 • フロントエンド • React、React Helmet • ServiceWorker、AppManifest • バックエンド • wordpress.com API • Netlify

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

まとめ

Slide 64

Slide 64 text

まとめ • Webと一緒にWordPressも進化していく • Webの未来を見据えた技術選択をしよう • Web for All • Web on Everything • 良いWebサイトとは何かの指針を持とう • Progressive Web App Checklist • Lighthouse