Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PWA Beginner(最新版:文字抜けを修正)

2,253 views

Published on

「 WebAppManifest & ServiceWorker 」

Published in: Technology

PWA Beginner(最新版:文字抜けを修正)

  1. 1. PWA Beginner WebAppManifest & ServiceWorker Presenter by Daisuke yamazaki
  2. 2. Service Worker 【 Service Workerの特⻑ 】 ・ Web ページとは別にバックグラウンドで実⾏するスクリプト ・ ホーム画⾯登録( manifest.json ) ・ オフラインキャッシュ( Cache Storage ) ・ プッシュ通知( Google Message API ) ・ バックグラウンド同期( Background Sync ) 使⽤可能スキル:HTML、CSS、JavaScript の基本知識は必須 これから必須の技術になりつつある
  3. 3. Web App Manifest
  4. 4. ◇ Web App Manifest基礎 【 Web App Manifest でできること 】 ・ネイティブアプリ同様、モバイル端末のホーム画⾯にアイコン表⽰ ・ウェブアプリやサイトをネイティブアプリのように制御起動が可能(OFFLINE) ・アプリ起動中の画⾯や起動後のスクリーン設定も可能 ・manifestファイルに設定を記述するだけでアプリのように登録可能 名前 説明 name スプラッシュ画⾯でアプリ名表⽰ short_name ホーム画⾯で表⽰されるアプリ名(Bookmark登録名) start_url アプリを開くURL(最初に表⽰すPath) display 表⽰形式:fullscreen、standalone、browser orientation 画⾯の向きを特定の⽅向に強制(横:landscape) background_color スプラッシュ画⾯(アプリを起動中の背景) theme_color ツールバーの⾊を設定 icons アイコン 【 主な設定項⽬ (manifest.json) 】 次のページでコード を参考に
  5. 5. ◇manifest.json 以下のような項⽬記述をおこないます。 <link rel="manifest" href="./manifest.json"> 【 head要素内に記述】 descriptionは現在 Chromeでは無効
  6. 6. PC画⾯で確認 Web App Manifest
  7. 7. https://venezia-works.com/impress DEMOアプリにアクセス Chromeブラウザで確認 demoアプリのためスマホでは動作しない部分が有ります。 manifest.jsonの確認には影響ありません。
  8. 8. ◇Manifest: App Manifest画⾯ Chrome開発者ツール → Application → Manifest で確認 ①manifest.jsonが読み込まれていて 正常にに動作していると.... このように記述情報が表⽰されます ②ではスマホでmanifest.jsonが読み 込まれたページを⾒ると・・・ 次のページ
  9. 9. ◇Manifest Chrome開発者ツール → Application → Manifest で確認 ここに情報が反映されない場合 読み込みエラーの可能性⼤! ※記述が間違ってると表⽰されない!! manifest.jsonが読み込まれてるか!? ここで確認が⼤事!!!! これに気をつけろ!!
  10. 10. ◇Manifest Chrome開発者ツール → Application → Manifest で確認 Start URL パスが間違ってると 「 Add to homescreen 」が動作しない!! ※ホーム画⾯追加が動作しない これに気をつけろ!!
  11. 11. スマホ・タブレット画⾯で確認 Web App Manifest
  12. 12. https://venezia-works.com/impress DEMOアプリにアクセス Chromeブラウザで確認 demoアプリのためスマホでは動作しない部分が有ります。 manifest.jsonの確認には影響ありません。
  13. 13. このように表⽰されます。 「ホーム画⾯に追加」ボタンで このように表⽰されます。
  14. 14. 「ホーム画⾯に追加」ボタンで このように表⽰されます。 実際に起動すると、スプラッ シュ画⾯が表⽰されて・・・ このようにアプリっぽく表⽰可能です。 ※manifestのdisplay設定
  15. 15. Web App Manifest manifest.jsonと画⾯のつながり
  16. 16. ◇manifest.json <link rel="manifest" href="./manifest.json"> 【 head要素内に記述】 manifestの項⽬?! 画⾯のどこで使われてるか? 知りたいですよね? 次のページへ =>
  17. 17. ・short_name ⽂⾔修正でホームアイコンのテ キストも変わる ①ホーム画面にアイコンを追加 ②タイトル編集 ③ホーム画面アイコン表示 ・icons ・short_name ※Mac:Chromeブラウザで「ホーム画⾯に追加」すると以下の場所に登録されます。
  18. 18. ・background_color ・theme_color ・name ④スプラッシュ画面 ⑤アプリ起動後の画面 ◇アプリ起動後 ・display ・orientation ・start_url 上記3つは表⽰設定
  19. 19. Web App Manifest manifest.json display(画⾯表⽰設定) orientation(縦横表⽰設定)
  20. 20. ◇ display fullscreen minimal-ui browser standalone minimal-ui
  21. 21. ◇ orientation portrait landscape any
  22. 22. ◇ icons Google公式DocumentのCODEを以下に表⽰ 以下のサイズのiconを⽤意し、フォルダ・ファイル名は任意で変更しましょう!
  23. 23. Service Worker サンプルを使って検証⽅法を学ぶ 裏の処理は⾃分で調べてね サンプルservice-worker.jsを⾒るとわかるよ
  24. 24. サンプルサイトを使ってService Workerを学ぶ 【 Service Worker サンプルダウンロード (ビルトインWebサーバー) 】 https://github.com/sitepoint-editors/pwa-retrofit ※サンプルファイルは / ルートパス設定 となっています。 【 サンプル動作⼿順 】 1.「 pwa-retrofit 」フォルダに移動(cd コマンド) 2.ローカルサーバーを起動 (コマンド) python2.x $ python -m SimpleHTTPServer [ポート番号] python3.x $ python3 -m http.server [ポート番号(デフォルト8000)] ZIP解凍後のpwa-retrofitフォルダ
  25. 25. 【 Service Worker サンプルダウンロード (XAMPP/MAMP⽤) 】 https://venezia-works.com/pwa.zip サンプルファイルのリンクを相対パスに変更してます。 【 サンプル動作⼿順 】 1.「 pwa-retrofit 」フォルダを htdocs へ移動 2.XAMPPのapacheを起動 3.ブラウザで http://localhost/pwa-retrofit/ を開く ZIP解凍後のpwa-retrofitフォルダ サンプルサイトを使ってService Workerを学ぶ
  26. 26. サンプルサイトを使ってService Workerを学ぶ
  27. 27. 【検証 → Application → ServiceWorker 】 【 ServiceWorker の確認⽅法】 1.Offline:オフラインチェック⽤(Chromeのネットワーク接続を切る ) 2.Update on reload:リロードでファイルを読み込みなおす (チェック⼊れておく!) 3.Bypass for network:キャッシュではなくネットワークのファイルを⾒に⾏く ※update ,Unregister の⻘⽂字はServiceWorkerの再読込と削除 確認時の注意 他のタブで同じ ServiceWorkerが動作してい ると挙動が変わるので、 1つのタブだけで確認! 【 検証機能解説 】
  28. 28. ①cacheしたファイルを削除します。 Clear Storage → Clear site data ②画⾯リロードでCacheを更新するように設定 ServiceWorkers → Update on reload 【 サンプルサイトを使って動作確認1 】
  29. 29. ③Cache Storage ここでは「ファイル更新・Cache動作」を確認しましょう!! 1.画⾯をリロードしてファイル更新時間を確認 → 時間が変わればOK 2.②の「Update on reload」チェックを外してCacheを有効にし、画⾯リロードで時間が更新されないことも確認 【 サンプルサイトを使って動作確認2 】
  30. 30. ④ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します 1.Offline → チェックを⼊れる 2. 次のスライドへ 【 サンプルサイトを使って動作確認3 】
  31. 31. ⑤ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します 1.ページの「 MENU 」ボタンをクリック 2. メニュー「 Work 」をクリック 3.次のスライドへ 【 サンプルサイトを使って動作確認4 】
  32. 32. ⑥ OFFLINE Offline画⾯が表⽰されました。 1.これでOfflineにチェックを⼊れると、Offlineになることがわかりました。 2. 次にOnline(オンライン)になったときの表⽰も確認しましょう。 3. 次のスライドへ 【 サンプルサイトを使って動作確認5 】
  33. 33. ⑦ Online(オンライン) Online画⾯を表⽰し、Offlineとの表⽰の違いを確認。 1.Offlineチェックを外します 2.ページの「 MENU 」ボタンをクリック 3.メニュー「 Work 」をクリック 4. 以下の画⾯が表⽰されます。(オンライン状態) 【 サンプルサイトを使って動作確認6 】
  34. 34. 参考サイト W3C Manifest https://w3c.github.io/manifest/ Google Manifest https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja Google ServiceWorker https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja Sitepoint SampleCode https://github.com/sitepoint-editors/pwa-retrofit Google Additional Colors and Icons https://developers.google.com/web/fundamentals/design-and-ux/browser- customization/?hl=ja

×