Recommended
More Related Content
What's hot
Similar to PWA Beginner（最新版：文字抜けを修正）
Similar to PWA Beginner（最新版：文字抜けを修正） (20)
More from Daisuke Yamazaki
More from Daisuke Yamazaki (11)
Recently uploaded
Recently uploaded (11)
PWA Beginner（最新版：文字抜けを修正）
- 1. PWA Beginner WebAppManifest & ServiceWorker Presenter by Daisuke yamazaki
- 2. Service Worker 【 Service Workerの特⻑ 】 ・ Web ページとは別にバックグラウンドで実⾏するスクリプト ・ ホーム画⾯登録（ manifest.json ） ・ オフラインキャッシュ（ Cache Storage ） ・ プッシュ通知（ Google Message API ） ・ バックグラウンド同期（ Background Sync ） 使⽤可能スキル：HTML、CSS、JavaScript の基本知識は必須 これから必須の技術になりつつある
- 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. ◇manifest.json 以下のような項⽬記述をおこないます。 <link rel="manifest" href="./manifest.json"> 【 head要素内に記述】 descriptionは現在 Chromeでは無効
- 8. ◇Manifest: App Manifest画⾯ Chrome開発者ツール → Application → Manifest で確認 ①manifest.jsonが読み込まれていて 正常にに動作していると.... このように記述情報が表⽰されます ②ではスマホでmanifest.jsonが読み 込まれたページを⾒ると・・・ 次のページ
- 9. ◇Manifest Chrome開発者ツール → Application → Manifest で確認 ここに情報が反映されない場合 読み込みエラーの可能性⼤！ ※記述が間違ってると表⽰されない！！ manifest.jsonが読み込まれてるか！？ ここで確認が⼤事！！！！ これに気をつけろ！！
- 10. ◇Manifest Chrome開発者ツール → Application → Manifest で確認 Start URL パスが間違ってると 「 Add to homescreen 」が動作しない！！ ※ホーム画⾯追加が動作しない これに気をつけろ！！
- 16. ◇manifest.json <link rel="manifest" href="./manifest.json"> 【 head要素内に記述】 manifestの項⽬？！ 画⾯のどこで使われてるか？ 知りたいですよね？ 次のページへ =>
- 24. サンプルサイトを使ってService Workerを学ぶ 【 Service Worker サンプルダウンロード (ビルトインWebサーバー) 】 https://github.com/sitepoint-editors/pwa-retrofit ※サンプルファイルは / ルートパス設定 となっています。 【 サンプル動作⼿順 】 １．「 pwa-retrofit 」フォルダに移動（cd コマンド） ２．ローカルサーバーを起動 (コマンド) python2.x $ python -m SimpleHTTPServer [ポート番号] python3.x $ python3 -m http.server [ポート番号(デフォルト8000)] ZIP解凍後のpwa-retrofitフォルダ
- 25. 【 Service Worker サンプルダウンロード (XAMPP/MAMP⽤） 】 https://venezia-works.com/pwa.zip サンプルファイルのリンクを相対パスに変更してます。 【 サンプル動作⼿順 】 １．「 pwa-retrofit 」フォルダを htdocs へ移動 ２．XAMPPのapacheを起動 ３．ブラウザで http://localhost/pwa-retrofit/ を開く ZIP解凍後のpwa-retrofitフォルダ サンプルサイトを使ってService Workerを学ぶ
- 27. 【検証 → Application → ServiceWorker 】 【 ServiceWorker の確認⽅法】 １．Offline：オフラインチェック⽤（Chromeのネットワーク接続を切る ） ２．Update on reload：リロードでファイルを読み込みなおす (チェック⼊れておく！) ３．Bypass for network：キャッシュではなくネットワークのファイルを⾒に⾏く ※update ,Unregister の⻘⽂字はServiceWorkerの再読込と削除 確認時の注意 他のタブで同じ ServiceWorkerが動作してい ると挙動が変わるので、 １つのタブだけで確認！ 【 検証機能解説 】
- 28. ①cacheしたファイルを削除します。 Clear Storage → Clear site data ②画⾯リロードでCacheを更新するように設定 ServiceWorkers → Update on reload 【 サンプルサイトを使って動作確認１ 】
- 29. ③Cache Storage ここでは「ファイル更新・Cache動作」を確認しましょう！！ １．画⾯をリロードしてファイル更新時間を確認 → 時間が変わればOK ２．②の「Update on reload」チェックを外してCacheを有効にし、画⾯リロードで時間が更新されないことも確認 【 サンプルサイトを使って動作確認２ 】
- 30. ④ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します １．Offline → チェックを⼊れる ２． 次のスライドへ 【 サンプルサイトを使って動作確認３ 】
- 31. ⑤ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します １．ページの「 MENU 」ボタンをクリック ２． メニュー「 Work 」をクリック ３．次のスライドへ 【 サンプルサイトを使って動作確認４ 】
- 32. ⑥ OFFLINE Offline画⾯が表⽰されました。 １．これでOfflineにチェックを⼊れると、Offlineになることがわかりました。 ２． 次にOnline（オンライン）になったときの表⽰も確認しましょう。 ３． 次のスライドへ 【 サンプルサイトを使って動作確認５ 】
- 33. ⑦ Online（オンライン） Online画⾯を表⽰し、Offlineとの表⽰の違いを確認。 １．Offlineチェックを外します ２．ページの「 MENU 」ボタンをクリック ３．メニュー「 Work 」をクリック ４． 以下の画⾯が表⽰されます。（オンライン状態） 【 サンプルサイトを使って動作確認６ 】
- 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