Enviar búsqueda
Cargar
オフラインファーストの思想と実践
•
85 recomendaciones
•
41,895 vistas
Shumpei Shiraishi
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 42
Recomendados
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
Recomendados
HTML5でオフラインWebアプリケーションを作ろう
HTML5でオフラインWebアプリケーションを作ろう
yoshikawa_t
オフラインWebアプリケーションのつくりかた
オフラインWebアプリケーションのつくりかた
Shumpei Shiraishi
Service worker が拓く mobile web の新しいかたち
Service worker が拓く mobile web の新しいかたち
Kinuko Yasuda
オープンソースで始めるオフラインアプリケーション開発入門
オープンソースで始めるオフラインアプリケーション開発入門
Fumio SAGAWA
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
dcubeio
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
Takuro Sasaki
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
Yasuhiro Onishi
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
Workshop1-01
Workshop1-01
mashimonator
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Workshop1-02
Workshop1-02
mashimonator
Más contenido relacionado
La actualidad más candente
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
zaru sakuraba
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
dcubeio
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
Takuro Sasaki
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
Kazuchika Sekiya
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
TanUkkii
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
Yasuhiro Onishi
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
La actualidad más candente
(19)
Service workerとwebプッシュ通知
Service workerとwebプッシュ通知
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Flux react現状確認会
Flux react現状確認会
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
10分でわかるOpenAPI V3
10分でわかるOpenAPI V3
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
React を導入したフロントエンド開発
React を導入したフロントエンド開発
Isomorphic web development with scala and scala.js
Isomorphic web development with scala and scala.js
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
React+fluxを導入した話
React+fluxを導入した話
Similar a オフラインファーストの思想と実践
Workshop1-01
Workshop1-01
mashimonator
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
Workshop1-02
Workshop1-02
mashimonator
Workshop1-03
Workshop1-03
mashimonator
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
Tusyoshi Matsuzaki
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
真吾 吉田
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
Masataka MIZUNO
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
Microsoft
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
Tadahiro Higuchi
20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow
Tomoyuki Obi
勉強会資料①
勉強会資料①
真亮 坂口
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Kazuyuki Miyake
AWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャ
真吾 吉田
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Osamu Shimoda
Attractive HTML5
Attractive HTML5
Sho Ito
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
拓将 平林
Similar a オフラインファーストの思想と実践
(20)
Workshop1-01
Workshop1-01
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Workshop1-02
Workshop1-02
Workshop1-03
Workshop1-03
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SharePoint 2010 を使ったクラウドアプリ開発
SharePoint 2010 を使ったクラウドアプリ開発
HTML5最新動向
HTML5最新動向
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
HTML5&API総まくり
HTML5&API総まくり
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
サーバー管理よ、サヨウナラ。サーバーレス アーキテクチャの意義と実践
クラウド開発に役立つ OSS あれこれ
クラウド開発に役立つ OSS あれこれ
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
20180630 data transformationusinglogicflow
20180630 data transformationusinglogicflow
勉強会資料①
勉強会資料①
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
Azure Cosmos DB を使った高速分散アプリケーションの設計パターン
AWSによるサーバーレスアーキテクチャ
AWSによるサーバーレスアーキテクチャ
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
第2回HTML5企業Webシステム開発セミナー hifive紹介資料
Attractive HTML5
Attractive HTML5
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
[REV UP] あなたならどう使う?最新Azureレシピ for LINE Platform
Más de Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
Más de Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Angular2実践入門
Angular2実践入門
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
Último
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Último
(10)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
オフラインファーストの思想と実践
1.
Thought and Practice of
Offline First オフライン・ファーストの 思想と実践 株式会社オープンウェブ・テクノロジー 白石俊平
2.
自己紹介 • 白石俊平と申します。 • HTML5開発者コミュニティhtml5j.org管理人(会員数5,000
名超) • HTML5とか勉強会主催(毎月一回、100名を動員) • Google API Expert (HTML5) • Microsoft Most Valuable Professional (IE9) • Twitter: @Shumpei • 著書:HTML5&API入門
3.
Offline First –
A better HTML5 User Experience
4.
offlinefirst.com
5.
Mobile First Web
Second
6.
Responsive Web Design
7.
オフラインWeb時代の到来は・・・
2014年?
8.
白石俊平: 著 2007年 技術評論社刊
9.
Why "Offline"? なぜオフラインWebか?
10.
オフライン
スピード でも使える ユーザビリティの向上
11.
「Offline is a
feature」 Photo by methodship.com
12.
「読む」中心のWebサイトでは
メリット コスト
13.
Google Slidesは オフライン対応している
"オフライン時の変更は、 オンラインに戻った時に同期されます"
14.
「編集」中心のWebアプリでは コスト
メリット
15.
オフラインの活路は 「モバイルアプリ」にあり!
ネイティブ(Web)アプリ モバイルWebアプリ ハイブリッドアプリ
16.
企業向けモバイルアプリの 大半はHTML5に Gartner
Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid
17.
Building Blocks オフラインWebを実現するAPI
18.
オフラインWebアプリの基本
Resources Data
19.
オフラインWebを実現するAPI •
アプリケーションキャッシュ • Web Storage • Indexed Database API • File API
20.
アプリケーションキャッシュ
CACHE MANIFEST index.html index.css index.js ローカル サーバ
21.
アプリケーションキャッシュ
CACHE MANIFEST index.html オフラインで index.css index.js 利用可能 ローカル サーバ
22.
キャッシュマニフェスト ファイル先頭に「CACHE MANIFEST」
1行に1URL "#"以降はコメント オンラインのアクセス先は NETWORKセクションに記述 キャッシュマニフェストが変更されていたら、 キャッシュのリフレッシュが行われる
23.
キャッシュマニフェストの例 CACHE MANIFEST
# v: 201302061503 hello.html hello.css hello.js hello.jpg NETWORK: * <html manifest="site.appcache"> ... </html>
24.
アプリケーションキャッシュの
「落とし穴」 通常のHTTPキャッシュも怠らないで! キャッシュ容量は実装依存 キャッシュは時間がかかる 開発フローを改善しよう
25.
Web Storage • ブラウザ組み込みのキー・バリュースト
ア • 文字列しか保存できないが、JSONと組み 合わせれば不便はあまりない。 • グローバル変数localStorageに、キーと 値を保存するだけなので、非常に使いや すい。
26.
Web Storageのコード例 // ストレージに値を保存 localStorage.person
= JSON.stringify({ name: "ご自分のお名前", age: ご自分の年齢 }); // 値を確認 alert(localStorage.person); // オブジェクトに復元 var person = JSON.parse(localStorage.person); alert(person.name); alert(person.age);
27.
Web Storageの 「落とし穴」 文字列しか格納できない
シンプルすぎる! 同期APIしかない
28.
Indexed Database API •
ブラウザ組み込みのキー・バリューストア • WebStorageよりも複雑だが高機能 • RDBのテーブルにあたるものがオブジェクトストア • JavaScriptオブジェクトをオブジェクトストアに対して そのまま読み書きできる。
29.
Indexed Database API
のコード例 var req = indexedDB.open(DB_NAME, latestVersion); req.onsuccess = function(event) { db = req.result; var tx = db.transaction("FeedStore", "readonly"); var feedEntryStore = tx.objectStore("FeedStore"); var curReq = feedEntryStore.openCursor(); var results = []; curReq.onsuccess = function() { var cursor = curReq.result; if (!cursor) { return; } var entry = cursor.value; results.push(entry); cursor.continue(); // カーソルを次に進める }; };
30.
Indexed Database APIの
「落とし穴」 APIがあんまりイケてない RDBほどの柔軟性はない! SafariとOperaが未実装
31.
File API • Webアプリからファイルを読み書きする
ためのAPI。 • 以下の3仕様からなる。 – File API・・・ファイルの読み取りや基本的な インターフェースの定義 – File API:Writer・・・ファイルの書き出し – File API:Systems and Directories・・・ファ イルシステムとディレクトリ構造
32.
File API • Chrome以外の実装が望めない状況。 •
Google Docsのオフライン機能は、File APIを用いて実現されている。
33.
Foundamental of Offline First オフライン・ファーストの勘所
34.
1. アプリケーションとサーバを
切り離す まずオフラインありき。 Resources サーバは、データを JSON APIで公開するのみ Data
35.
2. ラッパーを通じて
Web APIを呼び出す button.onclick = function() { $.get('/memo', function() {...}); }; Ajax呼び出しを直接行わない。 button.onclick = function() { WebAPI.loadMemo(function() { ... }); };
36.
3. 抽象化したオブジェクトを
通じてデータを操作する button.onclick = function() { WebAPI.loadMemo(function() { ... }); }; データソースを抽象化する! button.onclick = function() { Memo.get(function(memo) { ... }); };
37.
User
Data Web API Interface Controller Wrapper Name: E-mail: Submit データの永続化 データの同期
38.
Demo デモ
39.
Synchronization データの同期について、 ひとこと言いたい
40.
同期処理の実装は
難しい。 同期処理中にオフラインになったら? データ変更が衝突したら? 同期量を「必要最小限」に留めるには?
41.
以前実現したアーキテクチャ クライアント
テーブ ルA UI 同期 ジャー エン ナル テーブ ジン ルB
42.
Thank you! ご清聴ありがとうございました!
Follow me! @Shumpei