Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressユーザーのためのProgressive Web Appsの話
Search
Yosuke Onoue
June 24, 2017
Technology
1
2k
WordPressユーザーのためのProgressive Web Appsの話
WordCamp Kyoto 2017の登壇資料です。
Yosuke Onoue
June 24, 2017
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
Think About Front-end Web Development with Rust
likr
2
470
Yewにおけるoff-the-main-thread
likr
1
700
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
190
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.5k
Introduction to Graph Drawing
likr
0
450
20190707Ionic_Meetup.pdf
likr
0
370
About the end of the web
likr
2
470
Rust + WebAssemblyで広がるWebの未来
likr
16
6.6k
Other Decks in Technology
See All in Technology
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
3
630
AIチャットボット開発への生成AI活用
ryomrt
0
170
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
150
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.5k
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
180
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
100
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
AGIについてChatGPTに聞いてみた
blueb
0
130
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9.1k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
It's Worth the Effort
3n
183
27k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Designing for Performance
lara
604
68k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Agile that works and the tools we love
rasmusluckow
327
21k
Gamification - CAS2011
davidbonilla
80
5k
What's in a price? How to price your products and services
michaelherold
243
12k
Documentation Writing (for coders)
carmenintech
65
4.4k
Side Projects
sachag
452
42k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Transcript
WordPressユーザーのための Progressive Web Appsの話 尾上 洋介 2017年年6⽉月24⽇日 WordCamp Kyoto 2017
このスライド:https://goo.gl/jmJsUA
自己紹介 • おのうえ • 京都大学 学際融合教育研究推進センター 政策のための科学ユニット 特定助教 • ng-kyotoオーガナイザー、GDG神戸スタッフ
• 可視化、最適化、アルゴリズムの研究 • WordPress初心者
ng-kyoto • 京都を中心に活動するAngularのユーザーコミュニティ • https://ng-kyoto.github.io/
内容 • 話すこと • これからのWebサイトがどうあるべきか • 話さないこと • PHP、WordPressのこと •
Webフロントエンドフレームワークのこと • トランスパイラ、ビルドツールのこと
良いWebサイトを作っていますか?
良いWebサイトってなんですか?
良いWebサイトの 基準を持っていますか?
良いWebサイトの基準は 定量的に測定できますか?
• Webサイトの解析ツール (Chrome拡張 or コマンド) • Progressive Web App •
Performance • Accessibility • Best Practices • Chrome 60から 標準搭載 (Audits panel) Lighthouse
None
None
None
None
None
None
None
None
None
None
None
None
Progressive Web Apps
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
Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • Webサイトとネイティブアプリの いいとこ取りをしたWebアプリ •
Progressive Enhancement • 高いユーザビリティの実現 • ビジネスフレンドリー
PWAでできること • オフライン化 • インターネット接続なしでの利用 • 表示の高速化 • Push通知 •
アプリへの再訪を促進 • App Install Banner • ホーム画面へのショートカット追加 • 徐々にアプリのようになる!
なぜPWA? • ユーザーがモバイルアプリを使用する時間は限られているが、 極一部の人気アプリに割かれる時間が多い → ほとんどのモバイルアプリの使用率は非常に低い → ユーザーがより多く利用するWebサイトに ネイティブアプリの利点を取り込む
Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… •
Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ
Webのトレンド • 静的Webサイト • HTML、Webサーバー • 動的Webサイト • PHP、Python、Ruby、… •
Single Page Application (SPA) • JavaScript、REST API • Progressive Web Apps (PWA) • SPA + α より良いUXへ パラダイムの壁 • 発想の違い • 開発方法の違い
App Shellアーキテクチャ Webページ (HTML/CSS/JS) サーバーサイド クライアントサイド DB コンテンツ HTML/CSS/JS (キャッシュ)
従来のWebアプリ App Shell Template Webページ
WP REST API • プログラムからWordPressを操作するインタフェース • 記事、カテゴリ、ユーザ、… • 取得、更新 •
用途 • SPAの構築 • 他Webサービスへの組み込み • WordPress 4.7で導入
なぜWP REST APIか? • 進化するWebへの追随 • マッシュアップ • より良いWebサイトの実現 •
動的WebサイトからSPA、PWAへの転換
PWAをつくる
関連キーワード • Service Worker, Web App Manifest • Responsive Design
• RAIL Performance Model • Web Storage, IndexedDB • モジュールシステム • webpack、SystemJS、rollup.js、… • フロントエンドフレームワーク、ライブラリ • Angular、Polymer、React、…
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL https://developers.google.com/web/progressive-web-apps/checklist ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 良いWebサイトの指針
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 SPA設計関連
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 オフライン関連
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 パフォーマンス関連
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 SEO関連
PWA Checklist • HTTPS • レスポンシブ • オフライン • ホーム画面追加
• 低速回線対応 • クロスブラウザ対応 • スムーズなページ遷移 • ページ毎のURL ベースライン要件 模範的なPWA • インデックス可能 • UX • パフォーマンス • キャッシュ • 通知 • その他 ホスティング関連
参考資料 • 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
オフラインWebアプリ
なぜオフラインWebアプリ? • モバイル環境への対応 • 通信の不安定さ • 通信の効率化 • 光速度は不変!(約30万km/s) •
火星と地球で通信したら? (最接近時約7500万km) • オフライン・ファーストの思想と実践 by 白石俊平 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
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) • …
Service Worker • Webページ(メインスレッド、UIスレッド)とは 独立してスクリプトを動作させる仕組み • ネットワークリクエストをフック • キャッシュを使ってレスポンス •
リクエストを修正 • サーバーPushを受けて通知を表示 • postMessageでメインスレッドと通信 • HTTPSでのみ動作 (localhostを除く)
sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScriptまたは設定ファイルから Service Workerコードを生成 • よく使うFetch戦略が実装済み •
networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
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' } } } ] }) ] }
パフォーマンス
Rail Performance Model • https://developers.google.com/web/fundamentals/ performance/rail • Response • ユーザ操作に対して100ms以内に応答
• Animation • 10ms / フレーム • Idle • アイドル時間を長くする • Loading • 1000ms以内に初期画面表示
初期ローディングの高速化 • レスポンスを速くする • 良い性能のサーバを使う • HTTP/2 • 通信量を減らす •
minify • 通信を減らす • キャッシュ • オフライン化 • CDNの利用
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>
PWAとSEO
インデックスとソーシャル共有 • Googleのクローラ • JavaScriptを処理する • ソーシャル共有 • Twitter、Facebook、… •
OGP • JavaScriptを処理しない
Webサイトの種類と更新頻度 • 静的Webサイト、個人ツール、ゲーム • アプリ = コンテンツ • 開発者がコンテンツを更新 •
CMS、ブログ • アプリとコンテンツの分離 • 管理者がコンテンツを更新 • SNS、ユーザ参加コンテンツ • ユーザがコンテンツを更新 SPAでインデックス可能 (ページ毎の変更は不可) クローラ対策が必要 オフライン化の工夫が必要
クローラ対策 • Server Side Rendering • 初期描画をサーバ側で処理 • 初期ローディングの高速化 •
Universalを意識したコーディング • プリレンダリング • クローラに対してレンダリング済みのHTMLを応答 • ユーザには通常のSPAとして動作 • プリレンダリングのためのミドルウェアが必要
Prerender.io • https://prerender.io/ • PhantomJSでプリレンダリング • Headless WebKit • ミドルウェア
• クローラかどうかを判断しプリレンダリングと 通常のレスポンスに振り分ける • nginx、apache、express、rails • 250ページまでは無料
PWAのホスティング
ホスティングの要件 • HTTPS • HTTPの無効化 • HTTP/2 • URL Redirects
(ページ毎のURL) • キャッシュ • CDN • 継続的デリバリー • カスタムドメイン
Netlifyのススメ • https://www.netlify.com/ • ハイパフォーマンス • コマンドラインデプロイ • 無料HTTPS (カスタムドメイン対応)
• URL Redirects、APIプロキシ、HTTPヘッダ操作 • Prerender.io互換のプリレンダリング (9 USD/月)
デモ
ブログ • https://blog.likr-lab.com/ • PWA Checklistのベースライン • オフラインでの記事閲覧 • SEO
/ OGP対応 • https://blog.likr-lab.com/posts/102
構成 • フロントエンド • React、React Helmet • ServiceWorker、AppManifest • バックエンド
• wordpress.com API • Netlify
None
まとめ
まとめ • Webと一緒にWordPressも進化していく • Webの未来を見据えた技術選択をしよう • Web for All •
Web on Everything • 良いWebサイトとは何かの指針を持とう • Progressive Web App Checklist • Lighthouse