More Related Content
What's hot
What's hot (20)
Similar to Challenge PWA!! TRY PWA4WP!
Similar to Challenge PWA!! TRY PWA4WP! (20)
More from Ryu Shindo
Challenge PWA!! TRY PWA4WP!
- 2. 自己紹介 進藤 龍之介 エンジニア／日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 プラグイン「PWA for WordPress」開発 Twitter @ryu_compin Fb ryushindo
- 3. 2018/9/15 @WordCamp Tokyo 2018 https://www.slideshare.net/RyuShindo/challenge-pwa-wordcamp-tokyo-2018 超楽しかった！ ご来場ありがとうございました！
- 5. What is a Progressive Web App? • Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. • App-like - Feels like an app, because the app shell model separates the application functionality from application content . • Fresh - Always up-to-date thanks to the service worker update process. • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. • Re-engageable - Makes re-engagement easy through features like push notifications. • Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store. • Linkable - Easily share the application via URL, does not require complex installation. https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ 「はじめてのプログレッシブウェブアプリ」より
- 6. ざっくり言うと Web アプリがローカルアプリになる！ • ホーム画面にアイコン • インストール時にWeb コンテンツやリソースのキャッシュ • キャッシュされた JavaScript がオフラインでアプリを制御 • 以下今のところAndroidだけ • バックグラウンドでの動作（Background Sync） • Push通知
- 7. PWA の動作概要 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker Local(offline) で実行
- 8. 「Web 側」から見てきた PWA の立ち位置 PWA はフロンティアになれるのか
- 15. 個人的見解、共感が得られるかな？ Home App1 Google Web1 Web2 Web3 ・・・ SNS SNS 多くのユースケースにおいて • 入り口は検索か SNS • ブックマークなんて使わない • Web サイトは全部ひっくるめ て、検索や SNS シェアの先にあ る世界としてひとくくり、ひと つのアプリみたいに（無意識下 に）思われ、使われていない か？
- 20. 他のプラグインにない PWA4WP のウリ • キャッシュの有効期限が設定できる ブログなどの新着記事一覧の埋め込み部分の反映 記事の内容などの更新 急がないけどずっと更新されないのはダメ、というコンテンツはわり と多い • キャッシュの除外が柔軟に指定できる Ajax などで取得するような API などの出力データの取り出し元 リアルタイムで状況を表示するようなコンテンツ 画像だけキャッシュする、というような設定も可能
- 22. 事前に用意しておく オフラインページ 普通の固定ページでOK アイコン画像 png形式必須 サイズ 512px x 512px 以 上推奨
- 23. Demo – PWA for WordPress インストール https://wordpress.org/plugins/pwa4wp/ 「プラグイン→新規追加」から 「PWA for WordPress」または「PWA4WP」を検索
- 24. Demo – PWA for WordPress セットアップ •Manifest •ServiceWorker •PWA 発行
- 25. Demo – PWA for WordPress メイン画面
- 26. Demo – PWA for WordPress Manifest
- 27. Demo – PWA for WordPress Manifest
- 28. Demo – PWA for WordPress ServiceWorker
- 29. Demo – PWA for WordPress ServiceWorker
- 30. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例１：画像（ jpg / png / gif ) だけキャッシュするには 以下の２行を指定 ^.*.(?!jpg|png|gif)(.{3,4})$ ^.*/$ 特定の拡張子以外（除外リストの指定なので、「以外」を除外する設定になる） 末尾が / で終わる
- 31. Demo – PWA for WordPress ServiceWorker キャッシュ制御 ( 正規表現 ) 例２：REST API を除外する ^.*/wp-json/.*$
- 32. Demo – PWA for WordPress Chrome Developer Tool での確認 （Application タブ）
- 33. Demo – PWA for WordPress キャッシュされたデータ
- 34. Demo – PWA for WordPress 超高速！！ （Networkそもそも使わないんだから そりゃそうだ）
- 35. Demo – PWA for WordPress Auditsしてみる Chromeのツール「Lighthouse」 １００点！
- 36. 機能追加予定 • Push • マルチサイト対応 • インストール提示タイミングのコントロール • コンテンツ内のウィジェットなどをAjaxに切り離す （別プラグイン？） 欲しい機能とかあったらリクエストください！ フィードバックもお待ちしてます！
- 38. 参考資料 • WordCamp Tokyo 2018 「Challenge PWA!! Web の舞台はホーム画面へ進撃する」 https://www.slideshare.net/RyuShindo/challenge-pwa-wordcamp-tokyo- 2018 • 日本Androidの会 定例会 「Challenge PWA!! テクニカルエディション」 https://www.slideshare.net/RyuShindo/challenge-pwa-technical-edition- jag201809 • ブログにも解説記事いくつか書いてます https://www.compin.jp/wp/