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
1.9k
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
460
Yewにおけるoff-the-main-thread
likr
1
690
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
180
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
23
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.4k
Introduction to Graph Drawing
likr
0
440
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
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
失敗しないOpenJDKの非互換調査
tabatad
0
270
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
端末が簡単にリモートから操作されるデモを通じて ソフトウェアサプライチェーン攻撃対策の重要性を理解しよう
kitaji0306
0
170
Gradle: The Build System That Loves To Hate You
aurimas
2
140
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
180
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
初心者に Vue.js を 教えるには
tsukuha
5
390
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
The Pragmatic Product Professional
lauravandoore
31
6.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Adopting Sorbet at Scale
ufuk
73
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
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