Submit Search
Upload
PWA Beginner(最新版:文字抜けを修正)
•
8 likes
•
3,240 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
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Recently uploaded
(14)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
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