Submit Search
Upload
PWA Beginner(最新版:文字抜けを修正)
•
8 likes
•
3,242 views
Daisuke Yamazaki
Follow
「 WebAppManifest & ServiceWorker 」
Read less
Read more
Technology
Report
Share
Report
Share
1 of 34
Recommended
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
High Performance Gulp
High Performance Gulp
Keisuke Imura
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
Toshio Ehara
WordPress×jQueryMobile
WordPress×jQueryMobile
Takami Kazuya
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
Nodejs beginner
Nodejs beginner
SoheiUchino1
Recommended
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
High Performance Gulp
High Performance Gulp
Keisuke Imura
PhoneGap Introduction
PhoneGap Introduction
Keisuke Todoroki
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
Toshio Ehara
WordPress×jQueryMobile
WordPress×jQueryMobile
Takami Kazuya
Web業務アプリの新しい潮流
Web業務アプリの新しい潮流
久司 中村
Webteko 20090925
Webteko 20090925
だいすけ ふるかわ
Nodejs beginner
Nodejs beginner
SoheiUchino1
【ストアカ】ExcelVBA(マクロ)サンプル
【ストアカ】ExcelVBA(マクロ)サンプル
Takazumi Yamaguchi
Excel vba講座
Excel vba講座
Takazumi Yamaguchi
Phone gap + monaca
Phone gap + monaca
akimichi Yamada
20120128
20120128
小野 修司
Challenge PWA!! TRY PWA4WP!
Challenge PWA!! TRY PWA4WP!
Ryu Shindo
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
GoAzure
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
20120609
20120609
小野 修司
C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを開発できる Blazor ― その魅力
Jun-ichi Sakamoto
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
Ryu Shindo
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
PWAについて
PWAについて
iPride Co., Ltd.
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
densan2014-late01
densan2014-late01
Takenori Nakagawa
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
KUNITO Atsunori
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Shotaro Suzuki
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
More Related Content
What's hot
【ストアカ】ExcelVBA(マクロ)サンプル
【ストアカ】ExcelVBA(マクロ)サンプル
Takazumi Yamaguchi
Excel vba講座
Excel vba講座
Takazumi Yamaguchi
Phone gap + monaca
Phone gap + monaca
akimichi Yamada
20120128
20120128
小野 修司
Challenge PWA!! TRY PWA4WP!
Challenge PWA!! TRY PWA4WP!
Ryu Shindo
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
GoAzure
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
誠一郎 栗原
20120609
20120609
小野 修司
C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを開発できる Blazor ― その魅力
Jun-ichi Sakamoto
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Tetsuya Hasegawa
What's hot
(10)
【ストアカ】ExcelVBA(マクロ)サンプル
【ストアカ】ExcelVBA(マクロ)サンプル
Excel vba講座
Excel vba講座
Phone gap + monaca
Phone gap + monaca
20120128
20120128
Challenge PWA!! TRY PWA4WP!
Challenge PWA!! TRY PWA4WP!
A 1-2 One ASP.NET - ASP.NET Web Stack
A 1-2 One ASP.NET - ASP.NET Web Stack
Laravel Blade×vue.js 混在させる場合の注意点
Laravel Blade×vue.js 混在させる場合の注意点
20120609
20120609
C# で Single Page Web アプリを開発できる Blazor ― その魅力
C# で Single Page Web アプリを開発できる Blazor ― その魅力
Selenium2(web driver) ide編
Selenium2(web driver) ide編
Similar to PWA Beginner(最新版:文字抜けを修正)
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
Ryu Shindo
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
PWAについて
PWAについて
iPride Co., Ltd.
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
densan2014-late01
densan2014-late01
Takenori Nakagawa
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
takeuchi-tk
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
KUNITO Atsunori
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Monaca
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Shotaro Suzuki
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Atsushi Yokohama (BEACHSIDE)
Let's try to use Background sync
Let's try to use Background sync
Hirata Tomoko
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Introduction to web development 1
Introduction to web development 1
hideaki honda
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
はじめてのモバイルウェブアプリ 2
はじめてのモバイルウェブアプリ 2
Taisuke Fukuno
なるほどわかった!App Service on Linux
なるほどわかった!App Service on Linux
Yasuaki Matsuda
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
kumo2010
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
Keisuke Nishitani
Similar to PWA Beginner(最新版:文字抜けを修正)
(20)
Challenge PWA!! WordCamp Tokyo 2018
Challenge PWA!! WordCamp Tokyo 2018
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
PWAについて
PWAについて
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
densan2014-late01
densan2014-late01
Webエンジニアによるスマートフォンアプリ開発
Webエンジニアによるスマートフォンアプリ開発
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
OpenWhisk - Docker action で MeCab を動かす
OpenWhisk - Docker action で MeCab を動かす
Phone gap+javascriptスマホアプリ開発(入門編)
Phone gap+javascriptスマホアプリ開発(入門編)
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
Developing .NET 6 Blazor WebAssemby apps with Radzen Blazor component library...
ASP.NET Core 概要(2017年3月時点)
ASP.NET Core 概要(2017年3月時点)
Let's try to use Background sync
Let's try to use Background sync
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Introduction to web development 1
Introduction to web development 1
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
はじめてのモバイルウェブアプリ 2
はじめてのモバイルウェブアプリ 2
なるほどわかった!App Service on Linux
なるほどわかった!App Service on Linux
次期Office製品群の新しい開発モデルの解説
次期Office製品群の新しい開発モデルの解説
Going Serverless, Building Applications with No Servers
Going Serverless, Building Applications with No Servers
More from Daisuke Yamazaki
LaravelDB.comを使ってテーブル設計「Migration生成」基本操作
LaravelDB.comを使ってテーブル設計「Migration生成」基本操作
Daisuke Yamazaki
No3
No3
Daisuke Yamazaki
第5回 HTML5minutes 講演資料 「〜Web〜自身の心に火をともせ! 大事なものは技術だけではナイ!!」
第5回 HTML5minutes 講演資料 「〜Web〜自身の心に火をともせ! 大事なものは技術だけではナイ!!」
Daisuke Yamazaki
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
AudioタグとBingTranslatorAPIで音声翻訳アプリ
AudioタグとBingTranslatorAPIで音声翻訳アプリ
Daisuke Yamazaki
20140511 Bing API (Held in DigitalHollywoodUniversityGraduateSchool)
20140511 Bing API (Held in DigitalHollywoodUniversityGraduateSchool)
Daisuke Yamazaki
HTML5時代に必要なスキルと考え方 〜クリエイティブHTML5、DEMOで感じろ!!〜
HTML5時代に必要なスキルと考え方 〜クリエイティブHTML5、DEMOで感じろ!!〜
Daisuke Yamazaki
2014/03/22改訂版:HTML5時代に必要なスキルと考え方
2014/03/22改訂版:HTML5時代に必要なスキルと考え方
Daisuke Yamazaki
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
Daisuke Yamazaki
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
Daisuke Yamazaki
第13回 CreatorsMeetup 〜HTML5時代に必要なスキルと考え方〜
第13回 CreatorsMeetup 〜HTML5時代に必要なスキルと考え方〜
Daisuke Yamazaki
More from Daisuke Yamazaki
(11)
LaravelDB.comを使ってテーブル設計「Migration生成」基本操作
LaravelDB.comを使ってテーブル設計「Migration生成」基本操作
No3
No3
第5回 HTML5minutes 講演資料 「〜Web〜自身の心に火をともせ! 大事なものは技術だけではナイ!!」
第5回 HTML5minutes 講演資料 「〜Web〜自身の心に火をともせ! 大事なものは技術だけではナイ!!」
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
AudioタグとBingTranslatorAPIで音声翻訳アプリ
AudioタグとBingTranslatorAPIで音声翻訳アプリ
20140511 Bing API (Held in DigitalHollywoodUniversityGraduateSchool)
20140511 Bing API (Held in DigitalHollywoodUniversityGraduateSchool)
HTML5時代に必要なスキルと考え方 〜クリエイティブHTML5、DEMOで感じろ!!〜
HTML5時代に必要なスキルと考え方 〜クリエイティブHTML5、DEMOで感じろ!!〜
2014/03/22改訂版:HTML5時代に必要なスキルと考え方
2014/03/22改訂版:HTML5時代に必要なスキルと考え方
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
2013 HTML5カンファレンス レスポンシブWebデザイン
2013 HTML5カンファレンス レスポンシブWebデザイン
第13回 CreatorsMeetup 〜HTML5時代に必要なスキルと考え方〜
第13回 CreatorsMeetup 〜HTML5時代に必要なスキルと考え方〜
Recently uploaded
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Recently uploaded
(12)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
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 の基本知識は必須 これから必須の技術になりつつある
3.
Web App Manifest
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では無効
6.
PC画⾯で確認 Web App Manifest
7.
https://venezia-works.com/impress DEMOアプリにアクセス Chromeブラウザで確認 demoアプリのためスマホでは動作しない部分が有ります。 manifest.jsonの確認には影響ありません。
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 」が動作しない!! ※ホーム画⾯追加が動作しない これに気をつけろ!!
11.
スマホ・タブレット画⾯で確認 Web App Manifest
12.
https://venezia-works.com/impress DEMOアプリにアクセス Chromeブラウザで確認 demoアプリのためスマホでは動作しない部分が有ります。 manifest.jsonの確認には影響ありません。
13.
このように表⽰されます。 「ホーム画⾯に追加」ボタンで このように表⽰されます。
14.
「ホーム画⾯に追加」ボタンで このように表⽰されます。 実際に起動すると、スプラッ シュ画⾯が表⽰されて・・・ このようにアプリっぽく表⽰可能です。 ※manifestのdisplay設定
15.
Web App Manifest manifest.jsonと画⾯のつながり
16.
◇manifest.json <link rel="manifest" href="./manifest.json"> 【
head要素内に記述】 manifestの項⽬?! 画⾯のどこで使われてるか? 知りたいですよね? 次のページへ =>
17.
・short_name ⽂⾔修正でホームアイコンのテ キストも変わる ①ホーム画面にアイコンを追加 ②タイトル編集 ③ホーム画面アイコン表示 ・icons ・short_name ※Mac:Chromeブラウザで「ホーム画⾯に追加」すると以下の場所に登録されます。
18.
・background_color ・theme_color ・name ④スプラッシュ画面 ⑤アプリ起動後の画面 ◇アプリ起動後 ・display ・orientation ・start_url 上記3つは表⽰設定
19.
Web App Manifest manifest.json display(画⾯表⽰設定) orientation(縦横表⽰設定)
20.
◇ display fullscreen minimal-ui browser standalone minimal-ui
21.
◇ orientation portrait landscape any
22.
◇ icons Google公式DocumentのCODEを以下に表⽰ 以下のサイズのiconを⽤意し、フォルダ・ファイル名は任意で変更しましょう!
23.
Service Worker サンプルを使って検証⽅法を学ぶ 裏の処理は⾃分で調べてね サンプルservice-worker.jsを⾒るとわかるよ
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.
【 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.
サンプルサイトを使ってService Workerを学ぶ
27.
【検証 → Application
→ ServiceWorker 】 【 ServiceWorker の確認⽅法】 1.Offline:オフラインチェック⽤(Chromeのネットワーク接続を切る ) 2.Update on reload:リロードでファイルを読み込みなおす (チェック⼊れておく!) 3.Bypass for network:キャッシュではなくネットワークのファイルを⾒に⾏く ※update ,Unregister の⻘⽂字はServiceWorkerの再読込と削除 確認時の注意 他のタブで同じ ServiceWorkerが動作してい ると挙動が変わるので、 1つのタブだけで確認! 【 検証機能解説 】
28.
①cacheしたファイルを削除します。 Clear Storage →
Clear site data ②画⾯リロードでCacheを更新するように設定 ServiceWorkers → Update on reload 【 サンプルサイトを使って動作確認1 】
29.
③Cache Storage ここでは「ファイル更新・Cache動作」を確認しましょう!! 1.画⾯をリロードしてファイル更新時間を確認 →
時間が変わればOK 2.②の「Update on reload」チェックを外してCacheを有効にし、画⾯リロードで時間が更新されないことも確認 【 サンプルサイトを使って動作確認2 】
30.
④ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します 1.Offline →
チェックを⼊れる 2. 次のスライドへ 【 サンプルサイトを使って動作確認3 】
31.
⑤ OFFLINE ここでは「OFFLINE」状態を作り、OFFLINE時の動作を確認します 1.ページの「 MENU
」ボタンをクリック 2. メニュー「 Work 」をクリック 3.次のスライドへ 【 サンプルサイトを使って動作確認4 】
32.
⑥ OFFLINE Offline画⾯が表⽰されました。 1.これでOfflineにチェックを⼊れると、Offlineになることがわかりました。 2. 次にOnline(オンライン)になったときの表⽰も確認しましょう。 3.
次のスライドへ 【 サンプルサイトを使って動作確認5 】
33.
⑦ Online(オンライン) Online画⾯を表⽰し、Offlineとの表⽰の違いを確認。 1.Offlineチェックを外します 2.ページの「 MENU
」ボタンをクリック 3.メニュー「 Work 」をクリック 4. 以下の画⾯が表⽰されます。(オンライン状態) 【 サンプルサイトを使って動作確認6 】
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