SlideShare a Scribd company logo
Offline Drupal with progressive web app
Théodore BIADALA
‘nod_’
●
Started working with Drupal in 2009
●
Drupal consultant since 2010
●
Drupal core JavaScript maintainer
since 2012
Worked as technical consultant for :
●
●
Offline Drupal with progressive web app
Offline?
●
多くの新しい層がインターネットに接続するようにな
った
●
インターネットアクセスは主にスマートフォンの
2G/3G よる
●
スマートフォンの導入により、連続したインターネット
接続を想定できなくなった
‘Mobile-first’ が‘ Offline-first’ になった
Offline? (en)
●
A lot of new people are getting online (India, Africa,
China)
●
They access to internet mainly with 2G/3G
smartphones
●
With smartphones, developers can’t assume people
have a constant connection (subway, train, etc.)
‘Mobile-first’ became ‘Offline-first’
Progressive web apps?
●
ネイティブアプリに対応するもの
●
HTML5 or Web 2.0 のようなマーケティングの語彙
●
グーグルが名称を作成、そして多くの周辺コンテンツ
も作成 ( ビデオ、記事全般、プレゼンテーションなど )
目標はネイティブアプリを取り替えること
Progressive web apps? (en)
●
Response to native apps
●
Marketing term like HTML5 or Web 2.0
●
Google created the name, and create a lot of content
around it (video, articles, presentations, etc.)
The goal is to make native applications obsolete for
most of use-cases
Native apps VS. Websites
●
OS 統合
●
オフラインで使用可能
●
ハードウェア管理あり
●
ブラウザ内のみで使用可能
●
オフラインで使用不可
●
ハードウェア管理なし
●
開発コスト無し
●
インストール不要
●
高額な開発コスト
●
要インストール
●
Google/Apple による管理
Native apps VS. Websites (en)
●
OS integration
●
Works offline
●
Hardware control
●
No OS integration
●
Doesn’t work offline
●
No hardware control
●
No installation
●
Expensive to develop
●
Need to be installed
●
Google/Apple control
Native apps VS. PWA
●
OS 統合
●
オフラインで使用可能
●
ハードウェア管理あり
●
OS 統合
●
オフラインで使用可能
●
少しの HW 管理
●
開発コスト無し
●
インストール不要
●
アンドロイドのみ
●
高額な開発コスト
●
要インストール
●
Google/Apple による管理
Native apps VS. PWA (en)
●
OS integration
●
Works offline
●
Some HW control
●
No extra cost !
●
No installation
●
Only Android
●
OS integration
●
Works offline
●
Hardware control
●
Expensive to develop
●
Need to be installed
●
Google/Apple control
Progressive web apps
HTTPS
Responsive
manifest.json
Service Worker
manifest.json
manifest.json
●
Web サイト メタデータの保存
●
OS 統合の管理
●
‘apple-touch-icon’ 問題を防ぐ
●
1つのヘッダータグのみ :
<link rel="manifest" href="manifest.json">
{
"name": "Voice memos",
"short_name": "Voice memos",
"icons": [{"src":"icon.jpg","sizes":"64x64","type":"image/jpg"}],
"start_url": "/home",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "white"
}
manifest.json (en)
●
Store website metadata
●
Control OS integration
●
No ‘apple-touch-icon’ problem
●
Only one header tag :
<link rel="manifest" href="manifest.json">
{
"name": "Voice memos",
"short_name": "Voice memos",
"icons": [{"src":"icon.jpg","sizes":"64x64","type":"image/jpg"}],
"start_url": "/home",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#000000",
"background_color": "white"
}
Offline Drupal with progressive web app
Service Worker
●
It’s a simple javascript file (like webworker)
●
Proxy on the client-side
●
Full cache management (separate from browser
cache)
●
Allow background synchronization
●
Allow native push notification from websites
●
Works for ‘websites’ and ‘single page apps’
●
Works even when the browser is closed
Service Worker use-cases
●
オフラインでも訪問できる WEB サイトを作る
●
カッシュによりアセットをサーブすることでより高速
な Web サイトを作る (JS/CSS/ 写真など )
●
ユーザーにプッシュ通知を送る
●
ユーザーがオンラインになっても、オフラインで作ら
れたデータは同期する
●
Add timeout to third-party scripts (avoid SPOF
issues with facebook/twitter/google widgets)
Service Worker use-cases (en)
●
Make a website that can be visited offline
●
Make a site faster by always serving assets from the
cache (JS/CSS/Images)
●
Send push notifications to users
●
Synchronize data created offline when user go back
online
●
Add timeout to third-party scripts (avoid SPOF
issues with facebook/twitter/google widgets)
Offline Drupal with progressive web app
Service Worker
Normal request
Service Worker
Normal request
index.html
navigator.serviceWorker
.register('/serviceworker.js')
.then(function (reg) {
console.log('SW Ready');
});
serviceworker.js
self.addEventListener('fetch', event => {
event.respondWith(fetch(event.request));
});
Service Worker
Update Cache
Service Worker
Offline request (cache full)
Service Worker
Offline request (cache full)
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request)
.catch(error => cache.match(event.request))
);
});
Service Worker
Offline request (cache empty)
Service Worker
Service Worker
Drupal & PWA
drupal.org/project/pwa
●
Create manifest.json file
●
Provide a default serviceworker file that :
– Cache all HTML pages visited
– Cache all JS/CSS/fonts and always serve them
from service worker cache
●
Hopefully in D8 core ! drupal.org/node/2830668
Offline Drupal with progressive web app
Offline Drupal with progressive web app
Conclusion
●
プログレッシブウェブアプリは将来とても重要
●
もしブラウザがサービスウォーカーをサポートしない
場合は、ユーザにとってネガティブな効果はない
●
ほとんどの場合、プログレッシブウェブアプリはネイ
ティブアプリのニーズを取り除く
●
Soon Google chrome will create a real .apk file from
a progressive web app. Almost no difference from a
native app
Conclusion (en)
●
Progressive web apps are the future
●
if the browser doesn’t support service workers there
is no negative impact for the user
●
In most cases PWA remove the need for a native app
●
Soon Google chrome will create a real .apk file from
a progressive web app. Almost no difference from a
native app
Ressources
●
https://github.com/theodoreb/pwa-workshop
●
https://github.com/GoogleChrome/sw-toolbox/
●
https://developers.google.com/web/progressive-web-apps
●
https://developer.mozilla.org/en-US/Apps/Progressive
Questions?
Théodore BIADALA
theodore@biadala.net
@nod_

More Related Content

PDF
Case study : 2 applications mobiles réalisées avec Drupal
PDF
Frontend thunderdome
PDF
In-depth changes to Drupal 8 javascript
ODP
Let's Take Drupal Offline!
PDF
Progressive web apps
PDF
From AMP to PWA
PPTX
これからのNOTESモバイルアプリはこう作れ
PDF
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Case study : 2 applications mobiles réalisées avec Drupal
Frontend thunderdome
In-depth changes to Drupal 8 javascript
Let's Take Drupal Offline!
Progressive web apps
From AMP to PWA
これからのNOTESモバイルアプリはこう作れ
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

Similar to Offline Drupal with progressive web app (20)

PDF
iPhone での旬なWeb開発 (jQTouch編)
KEY
スマートフォンアプリケーション開発の最新動向
PDF
Mvc conf session_5_isami
PDF
第49回HTML5勉強会 Google I/O 2014サマリー
PDF
早稲田大学授業 - モバイルプログラミング
PDF
Web標準化 (W3C) とHTML5の状況 Remix
PDF
NPAPIを使ったandroid標準ブラウザの拡張方法
PDF
レスポンシブWebデザイン【基礎編】
PDF
Jqm20120804 publish
PDF
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
KEY
みなさんがHtml5をやらなくていい3つの理由
PDF
PhoneGapでWebアプリをスマホアプリ化
PDF
HTML5開発最前線
PDF
jQuery Mobile
PDF
Html5概要 & デモ
PPTX
WordPressサイトをスマホアプリにしちゃおう!
PPTX
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
PPTX
Fluxflex meetup 2011 in Tokyo
PPTX
Phone gap+javascriptスマホアプリ開発(入門編)
PPTX
~初心者がこれから Web アプリの開発をするために~
iPhone での旬なWeb開発 (jQTouch編)
スマートフォンアプリケーション開発の最新動向
Mvc conf session_5_isami
第49回HTML5勉強会 Google I/O 2014サマリー
早稲田大学授業 - モバイルプログラミング
Web標準化 (W3C) とHTML5の状況 Remix
NPAPIを使ったandroid標準ブラウザの拡張方法
レスポンシブWebデザイン【基礎編】
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
みなさんがHtml5をやらなくていい3つの理由
PhoneGapでWebアプリをスマホアプリ化
HTML5開発最前線
jQuery Mobile
Html5概要 & デモ
WordPressサイトをスマホアプリにしちゃおう!
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
Fluxflex meetup 2011 in Tokyo
Phone gap+javascriptスマホアプリ開発(入門編)
~初心者がこれから Web アプリの開発をするために~
Ad

More from Théodore Biadala (8)

PDF
Headful drupal
PDF
Accessibility is not for screenreaders
PDF
javascript for backend developers
PDF
Vanilla JS*
PDF
Web accessibiilty and Drupal
PDF
Javascript Pulp Fiction
PDF
Upgrade your javascript to drupal 8
PDF
What's up with javascript and Drupal 8
Headful drupal
Accessibility is not for screenreaders
javascript for backend developers
Vanilla JS*
Web accessibiilty and Drupal
Javascript Pulp Fiction
Upgrade your javascript to drupal 8
What's up with javascript and Drupal 8
Ad

Offline Drupal with progressive web app