Soumettre la recherche
Mettre en ligne
FukuokaPWA #1 A2HSのちょっと深い話
•
2 j'aime
•
1,424 vues
M
Masahiko Jinno
Suivre
福岡PWA #1 https://fukuoka-pwa.connpass.com/event/81842/ Add to homescreenのちょっと深い話
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 46
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Daisaku Mochizuki
OverlayFS を使って Raspberry Pi を Network Bootする
OverlayFS を使って Raspberry Pi を Network Bootする
KokiMakita1
Spanner から GKE、Spinnaker、そして SRE まで、コロプラが今挑戦していること[Google Cloud INSIDE Games ...
Spanner から GKE、Spinnaker、そして SRE まで、コロプラが今挑戦していること[Google Cloud INSIDE Games ...
Google Cloud Platform - Japan
いまさら聞けない!CUDA高速化入門
いまさら聞けない!CUDA高速化入門
Fixstars Corporation
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
Noritaka Shinohara
パネルディスカッション:WebXRメタバースの挑戦 in CEDEC2022 ~Mozilla Hubs活用事例と課題共有~
パネルディスカッション:WebXRメタバースの挑戦 in CEDEC2022 ~Mozilla Hubs活用事例と課題共有~
GREE VR Studio Lab
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
NTT DATA Technology & Innovation
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
Recommandé
ゲームサーバ開発現場の考え方
ゲームサーバ開発現場の考え方
Daisaku Mochizuki
OverlayFS を使って Raspberry Pi を Network Bootする
OverlayFS を使って Raspberry Pi を Network Bootする
KokiMakita1
Spanner から GKE、Spinnaker、そして SRE まで、コロプラが今挑戦していること[Google Cloud INSIDE Games ...
Spanner から GKE、Spinnaker、そして SRE まで、コロプラが今挑戦していること[Google Cloud INSIDE Games ...
Google Cloud Platform - Japan
いまさら聞けない!CUDA高速化入門
いまさら聞けない!CUDA高速化入門
Fixstars Corporation
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
Noritaka Shinohara
パネルディスカッション:WebXRメタバースの挑戦 in CEDEC2022 ~Mozilla Hubs活用事例と課題共有~
パネルディスカッション:WebXRメタバースの挑戦 in CEDEC2022 ~Mozilla Hubs活用事例と課題共有~
GREE VR Studio Lab
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
Dapr × Kubernetes ではじめるポータブルなマイクロサービス(CloudNative Days Tokyo 2020講演資料)
NTT DATA Technology & Innovation
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
GMO GlobalSign Holdings K.K.
深層学習向け計算機クラスター MN-3
深層学習向け計算機クラスター MN-3
Preferred Networks
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
Preferred Networks
NuxtでAPIサーバー立ててみた
NuxtでAPIサーバー立ててみた
ssuserbf0fbd
卒論パワポVer3 伊東純平
卒論パワポVer3 伊東純平
純平 伊東
ブレインパッドにおける機械学習プロジェクトの進め方
ブレインパッドにおける機械学習プロジェクトの進め方
BrainPad Inc.
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
toshihiro ichitani
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
京大 マイコンクラブ
Python 3のWebシステムでDDDに入門してみた
Python 3のWebシステムでDDDに入門してみた
Hiromu Yakura
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
UnityTechnologiesJapan002
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
SSII
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
Junichi Kodama
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
オラクルエンジニア通信
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
エピック・ゲームズ・ジャパン Epic Games Japan
TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?
Mr. Vengineer
Teslaにおけるコンピュータビジョン技術の調査
Teslaにおけるコンピュータビジョン技術の調査
Kazuyuki Miyazawa
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
Unity Technologies Japan K.K.
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
エンタープライズブロックチェーン構築の基礎
エンタープライズブロックチェーン構築の基礎
Hyperleger Tokyo Meetup
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Masahiko Jinno
Mashup Awards は新しい技術を試す絶好の機会です
Mashup Awards は新しい技術を試す絶好の機会です
Nobuhiro Nakajima
Contenu connexe
Tendances
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
GMO GlobalSign Holdings K.K.
深層学習向け計算機クラスター MN-3
深層学習向け計算機クラスター MN-3
Preferred Networks
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
Preferred Networks
NuxtでAPIサーバー立ててみた
NuxtでAPIサーバー立ててみた
ssuserbf0fbd
卒論パワポVer3 伊東純平
卒論パワポVer3 伊東純平
純平 伊東
ブレインパッドにおける機械学習プロジェクトの進め方
ブレインパッドにおける機械学習プロジェクトの進め方
BrainPad Inc.
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
toshihiro ichitani
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
京大 マイコンクラブ
Python 3のWebシステムでDDDに入門してみた
Python 3のWebシステムでDDDに入門してみた
Hiromu Yakura
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
UnityTechnologiesJapan002
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
SSII
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
Junichi Kodama
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
オラクルエンジニア通信
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
エピック・ゲームズ・ジャパン Epic Games Japan
TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?
Mr. Vengineer
Teslaにおけるコンピュータビジョン技術の調査
Teslaにおけるコンピュータビジョン技術の調査
Kazuyuki Miyazawa
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
Unity Technologies Japan K.K.
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
Takahito Tejima
エンタープライズブロックチェーン構築の基礎
エンタープライズブロックチェーン構築の基礎
Hyperleger Tokyo Meetup
Tendances
(20)
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
深層学習向け計算機クラスター MN-3
深層学習向け計算機クラスター MN-3
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
fpgax #11+TFUG ハード部:DNN専用ハードについて語る会-2019-02-02 MN-coreについて 金子 紘也
NuxtでAPIサーバー立ててみた
NuxtでAPIサーバー立ててみた
卒論パワポVer3 伊東純平
卒論パワポVer3 伊東純平
ブレインパッドにおける機械学習プロジェクトの進め方
ブレインパッドにおける機械学習プロジェクトの進め方
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
C# ゲームプログラミングはホントにメモリのことに無頓着でいいの?
Python 3のWebシステムでDDDに入門してみた
Python 3のWebシステムでDDDに入門してみた
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
SSII2022 [TS2] 自律移動ロボットのためのロボットビジョン〜 オープンソースの自動運転ソフトAutowareを解説 〜
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
【Unite Tokyo 2019】Render Streaming - WebRTC を用いたストリーミングソリューション
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
SSII2021 [OS3-02] BIM/CIMにおいて安価に点群を取得する目的とその利活用
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
欲しいアプリは自分で作る!経済産業省も認めたPower Appsの威力と可能性
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
OCHaCafe #4 Hyperledger Fabric アプリケーション設計入門ガイドでしゃべった内容+おまけ資料
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
TensorFlow Lite Delegateとは?
TensorFlow Lite Delegateとは?
Teslaにおけるコンピュータビジョン技術の調査
Teslaにおけるコンピュータビジョン技術の調査
【Unity道場】新しいPrefabワークフロー入門
【Unity道場】新しいPrefabワークフロー入門
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
ピクサー USD 入門 新たなコンテンツパイプラインを構築する
エンタープライズブロックチェーン構築の基礎
エンタープライズブロックチェーン構築の基礎
Similaire à FukuokaPWA #1 A2HSのちょっと深い話
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Masahiko Jinno
Mashup Awards は新しい技術を試す絶好の機会です
Mashup Awards は新しい技術を試す絶好の機会です
Nobuhiro Nakajima
2013/06 九州産業大学 -とある業界の禁書目録-
2013/06 九州産業大学 -とある業界の禁書目録-
Serverworks Co.,Ltd.
OSC2013@FUKUOKA
OSC2013@FUKUOKA
Ryuji Egashira
Hueによる分析業務の改善事例
Hueによる分析業務の改善事例
Masahiro Kiura
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方
CData Software Japan
PWA has come!! / 2019/2/9 ABCD 浜松
PWA has come!! / 2019/2/9 ABCD 浜松
Ryu Shindo
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
Ryu Shindo
多対多のクラウド利用を支えるデータ標準化技術
多対多のクラウド利用を支えるデータ標準化技術
CData Software Japan
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Yahoo!デベロッパーネットワーク
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
健一 辰濱
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
Google Cloud Platform - Japan
私たちがGCPを使い始めた本当の理由
私たちがGCPを使い始めた本当の理由
gree_tech
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
Ryu Shindo
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
Monaca
appengine ja night #25 Google App Engine for PHP
appengine ja night #25 Google App Engine for PHP
Ryo Yamasaki
Webアプリの向こうに見えるPWAアプリ開発
Webアプリの向こうに見えるPWAアプリ開発
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo!デベロッパーネットワーク
HashiCorp Terraform Enterprise 紹介
HashiCorp Terraform Enterprise 紹介
hashicorpjp
Challenge PWA!! TRY PWA4WP!
Challenge PWA!! TRY PWA4WP!
Ryu Shindo
Similaire à FukuokaPWA #1 A2HSのちょっと深い話
(20)
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
PWA Beginners 勉強会 #4 A2HSのちょっと深い話v2
Mashup Awards は新しい技術を試す絶好の機会です
Mashup Awards は新しい技術を試す絶好の機会です
2013/06 九州産業大学 -とある業界の禁書目録-
2013/06 九州産業大学 -とある業界の禁書目録-
OSC2013@FUKUOKA
OSC2013@FUKUOKA
Hueによる分析業務の改善事例
Hueによる分析業務の改善事例
マルチクラウドデータ連携Javaアプリケーションの作り方
マルチクラウドデータ連携Javaアプリケーションの作り方
PWA has come!! / 2019/2/9 ABCD 浜松
PWA has come!! / 2019/2/9 ABCD 浜松
PWA 総まとめ @ABC 2018 Spring
PWA 総まとめ @ABC 2018 Spring
多対多のクラウド利用を支えるデータ標準化技術
多対多のクラウド利用を支えるデータ標準化技術
YJTC18 A-1 大規模サーバの戦略
YJTC18 A-1 大規模サーバの戦略
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
グリー株式会社『私たちが GCP を使い始めた本当の理由』第 9 回 Google Cloud INSIDE Game & Apps
私たちがGCPを使い始めた本当の理由
私たちがGCPを使い始めた本当の理由
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
はやい!?うまい!?安い!?すべてのプラットフォームに届く「 PWA 」の魅力
HTML5ハイブリッド アプリ開発実践編
HTML5ハイブリッド アプリ開発実践編
appengine ja night #25 Google App Engine for PHP
appengine ja night #25 Google App Engine for PHP
Webアプリの向こうに見えるPWAアプリ開発
Webアプリの向こうに見えるPWAアプリ開発
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
HashiCorp Terraform Enterprise 紹介
HashiCorp Terraform Enterprise 紹介
Challenge PWA!! TRY PWA4WP!
Challenge PWA!! TRY PWA4WP!
Dernier
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
Dernier
(9)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
FukuokaPWA #1 A2HSのちょっと深い話
1.
2018/03/29(Thu)FukuokaPWA#1 @MiracleTShirt09 Add to homescreen のちょっと深い話
2.
demp app https://a2hs-demo.firebaseapp.com/
3.
Agenda • Profile • Add
to homescreenとは? • App install bannersとは? • bannerinstallpromptイベント • A2HSの所感 • おまけ
4.
Profile
5.
Profile • 氏名: 神野
真彦 • 所属: ヤフー株式会社 • 職種: エンジニア • 分野: Webフロント • Tw: @MiracleTShirt09
6.
Favorite things 筋トレ PHP JavaScript けものフレンズ PWA WebRTC 刃牙道 千鳥 HHKB
プロテイン ガンダム カンバン FaaS エルメス Kotlin サイゼリア Youtube サーバル Fate
7.
BIG3のMAX • ベンチプレス: 75kg •
デッドリフト: 100kg • スクワット: 140kg
8.
Add to homescreenとは?
9.
Add to homescreenって? •
Webアプリのホーム画 面追加のこと • A2HSと略す • PWAにおいては必須の 要素とされる • 「魅力的なWebアプリ (PWA)はホーム画面に 居場所を作れる」
10.
対応ブラウザ(主要なやつ) • Chrome • 少なくとも49以降は対応している •
Safari • 11.1/TP版 • まだ正式には採用されてない • iOS Safari • 11.3(iOS 11.3β版)に搭載されている
11.
バージョンの調べ方 • 以下の2つの技術に対応している必要がある • Service
Worker • Web App Manifest • can i useで調べよう • https://caniuse.com/#search=manifest • https://caniuse.com/#search=service%20worker • EdgeはService Workerには対応しているがWeb App Manifestには対応していないのでA2HS出来ない(はず)
12.
Webショートカットと何が ちがうの? • A2HSはそのWebアプリ 専用のネイティブアプ リが生成される※ • なのでドロワー画面に も表示される ※
後述するmanifestの設定による
13.
どうやればできるの? • https通信 • manifestの作成 •
ServiceWorkerの登録
14.
https通信 • Service Workerの登録 でhttps通信が必要に なる •
localhostなら不要 • ぱっと試したいなら firebaseとか使うと良 いよ
15.
manifestの作成 • Webアプリの設定を記 述するファイル • name,
short_name, start_url, icon(192) があればとりあえず動 くよ • start_urlのにパラメ タを記述するとA2HSか ら起動したかどうか判 定できるようになるよ
16.
Service Workerの登録1 • 右の内容のファイルを ドキュメントルートに 配置してね! •
A2HSするだけなら空の fetchイベントリスナー を登録するだけでOK! • 最低限の実装だよ! • これだけで一応オフラ イン対応しているとみ なされる(Chromeでは)
17.
Service Workerの登録2 • 右のコードをページに 埋め込んでね→
18.
動作確認(スマホ) • Chromeの場合は画面右 上のメニューから「ホー ム画面追」をタップす るとAndroidのホーム 画面にWebアプリを追 加することができる
19.
動作確認(PC) • Chromeの検証ツールからA2HS可能かどうか確認することができる • Application
> ManifestのAdd to homescreenをクリック これが出ればOK
20.
App Install Bannersとは?
21.
App Install Bannersっ て? •
A2HSをしてもらうため の訴求バナー • これはChrome(ブラウ ザ)が後述の条件に当 てはまる際に表示する
22.
表示条件 • HTTPS通信されている • manifestにname,
short_name, 192x192のicon, start_urlが記述されている • Service Workerが登録されている • 2週間以内に2回そのページに訪問し、その間隔が5 分以上あいている • A2HS(そのページ/サイトのホーム画面アイコンが無 い)されていない
23.
動作確認 • 条件を満たした情報でページにアクセスする • Chromeの場合は設定>プライバシー>閲覧履歴デー タを消去するからデータを消すと再度バナーの表示 確認を行うことができる
24.
bannerinstallpromptイベント
25.
bannerinstallpropt イベントって? • App Install
Bannerが 表示される際に発火さ れるイベント • このイベントのリスナー を記述することでApp Install Bannerの制御 ができる
26.
バナーを表示しない • App Install
Bannerの表示は原則アプリケーション 側で制御できない • なのでアプリ・サイトの状態によっては出しなくな いときに出てしまう可能性がある • その場合は次のコードを記述することでバナー表示 を抑制することができる
27.
バナーを表示しない
28.
バナーを表示しない • 動作確認はChromeの検証ツールのconsoleでやる
29.
A2HSのログを落とす • ユーザがApp Install
Bannerに対してどのようなリ アクションをとったのかログに落としたい場合は次 のようなコードを記述する
30.
A2HSのログを落とす
31.
App Install Bannerの表示 を先送りする •
次のようなコードを記 述するとApp Install Bannerの表示を先送り することができる • Instagramなどは、こ の先送りを利用して事 前訴求モーダル画面を 表示している https://www.instagram.com/
32.
App Install Bannerの表示 を先送りする •
先送りのコード • この例ではReactのstateにイベントオブジェクトを 持たせている
33.
App Install Bannerの表示 を先送りする •
先送りしたApp Install Bannerの表示をするコード • 例によってReactを使用しています
34.
こんなかんじ • 動きはInstagr○mの丸パクリです。
35.
A2HS所感
36.
すっごーーい!
37.
メリット • 手軽にネイティブアプリっ ぽいものがつくれる • 手軽に起動起点をとれる •
(standalone以上だと)検 索ペインからの流出が防 げる • SPAとの親和性が高い(ブ ラウザ機能が制限される ので)
38.
気をつけたいこと • A2HSすると一部のブラ ウザ機能(主にタブ)が 使用できなくなるので UXが落ちる場合がある • 良くも悪くも通常のWeb ページよりブラウザの 実装に挙動が左右され る •
ブラウザによって manifestの解釈がこと なる
39.
気をつけたいこと • 別ウインドウで開くリ ンク(target=“_blanc”) は別アプリ(シングル タブのChrome)が開く • 別アプリ開いたら離脱 率上がりそう・・・
40.
おまけ
41.
SafariでのA2HS • TP版と11.3でようやく WebAppManifestが実装 されたので試してみた • Androidと異なり、戻 るのナビゲーションも 無いので他社サイトに 飛ぶと戻ってこれない •
Chromeに比べるとまだ まだUXの見直しが必要
42.
43.
PCでのA2HS • Macだとランチャー画面、Winだとスタートメニュー に追加されます(開くのはタダのChrome)
44.
その他 • Chromeは多分PWA機能 のABテストをしている • AndroidとChromeの バージョンが全く同じ でも細かい所が違って たりする •
文言とかも微妙にちがっ たりする • 最近落ち着いてきた? ここらへんの文言 とか
45.
参考URL(おすすめ書籍) _人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人_ > Add to
homescreen以外の説明もあるよ!!!! <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄
46.
ご静聴ありがとうござい ましたッッ!! ※ サンプルコードは近日公開します
Télécharger maintenant