More Related Content
What's hot (20)
Similar to Challenge PWA!! TRY PWA4WP! (20)
More from Ryu Shindo (8)
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 /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 の舞台はホーム画面へ進撃する」 /RyuShindo/challenge-pwa-wordcamp-tokyo- 2018 ? 日本Androidの会 定例会 「Challenge PWA!! テクニカルエディション」 /RyuShindo/challenge-pwa-technical-edition- jag201809 ? ブログにも解説記事いくつか書いてます https://www.compin.jp/wp/