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’ 問題を防ぐ● １つのヘッダータグのみ :<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 BIADALAtheodore@biadala.net@nod_