Offline Drupal with progressive web app
-
Upload
theodore-biadala -
Category
Internet
-
view
149 -
download
1
Transcript of 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 2012Worked as technical consultant for :●
●
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 appsHTTPS
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"}
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)
Service WorkerNormal request
Service WorkerNormal request
index.htmlnavigator.serviceWorker .register('/serviceworker.js') .then(function (reg) { console.log('SW Ready'); });
serviceworker.jsself.addEventListener('fetch', event => { event.respondWith(fetch(event.request));});
Service WorkerUpdate Cache
Service WorkerOffline request (cache full)
Service WorkerOffline request (cache full)
self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) .catch(error => cache.match(event.request)) );});
Service WorkerOffline request (cache empty)
Service Worker
Service Worker
Drupal & PWAdrupal.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
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 [email protected]@nod_