offline drupal with progressive web app
TRANSCRIPT
![Page 1: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/1.jpg)
![Page 2: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/2.jpg)
Théodore BIADALA ‘nod_’
● Started working with Drupal in 2009● Drupal consultant since 2010● Drupal core JavaScript maintainer
since 2012Worked as technical consultant for :●
●
![Page 3: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/3.jpg)
![Page 4: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/4.jpg)
Offline?● 多くの新しい層がインターネットに接続するようにな
った● インターネットアクセスは主にスマートフォンの
2G/3G よる ● スマートフォンの導入により、連続したインターネット
接続を想定できなくなった‘Mobile-first’ が‘ Offline-first’ になった
![Page 5: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/5.jpg)
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’
![Page 6: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/6.jpg)
Progressive web apps?● ネイティブアプリに対応するもの
● HTML5 or Web 2.0 のようなマーケティングの語彙
● グーグルが名称を作成、そして多くの周辺コンテンツ
も作成 ( ビデオ、記事全般、プレゼンテーションなど )目標はネイティブアプリを取り替えること
![Page 7: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/7.jpg)
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
![Page 8: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/8.jpg)
Native apps VS. Websites ● OS 統合● オフラインで使用可能● ハードウェア管理あり
● ブラウザ内のみで使用可能● オフラインで使用不可● ハードウェア管理なし● 開発コスト無し● インストール不要
● 高額な開発コスト● 要インストール● Google/Apple による管理
![Page 9: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/9.jpg)
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
![Page 10: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/10.jpg)
Native apps VS. PWA ● OS 統合● オフラインで使用可能● ハードウェア管理あり
● OS 統合● オフラインで使用可能● 少しの HW 管理● 開発コスト無し● インストール不要
● アンドロイドのみ
● 高額な開発コスト● 要インストール● Google/Apple による管理
![Page 11: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/11.jpg)
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
![Page 12: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/12.jpg)
Progressive web appsHTTPS
Responsive manifest.json
Service Worker
![Page 13: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/13.jpg)
manifest.json
![Page 14: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/14.jpg)
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"}
![Page 15: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/15.jpg)
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"}
![Page 16: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/16.jpg)
![Page 17: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/17.jpg)
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
![Page 18: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/18.jpg)
Service Worker use-cases● オフラインでも訪問できる WEB サイトを作る● カッシュによりアセットをサーブすることでより高速
な Web サイトを作る (JS/CSS/ 写真など )● ユーザーにプッシュ通知を送る● ユーザーがオンラインになっても、オフラインで作ら
れたデータは同期する● Add timeout to third-party scripts (avoid SPOF
issues with facebook/twitter/google widgets)
![Page 19: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/19.jpg)
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)
![Page 20: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/20.jpg)
![Page 21: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/21.jpg)
Service WorkerNormal request
![Page 22: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/22.jpg)
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));});
![Page 23: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/23.jpg)
Service WorkerUpdate Cache
![Page 24: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/24.jpg)
Service WorkerOffline request (cache full)
![Page 25: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/25.jpg)
Service WorkerOffline request (cache full)
self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) .catch(error => cache.match(event.request)) );});
![Page 26: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/26.jpg)
Service WorkerOffline request (cache empty)
![Page 27: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/27.jpg)
Service Worker
![Page 28: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/28.jpg)
Service Worker
![Page 29: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/29.jpg)
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
![Page 30: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/30.jpg)
![Page 31: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/31.jpg)
![Page 32: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/32.jpg)
Conclusion● プログレッシブウェブアプリは将来とても重要● もしブラウザがサービスウォーカーをサポートしない
場合は、ユーザにとってネガティブな効果はない● ほとんどの場合、プログレッシブウェブアプリはネイ
ティブアプリのニーズを取り除く● Soon Google chrome will create a real .apk file from
a progressive web app. Almost no difference from a native app
![Page 33: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/33.jpg)
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
![Page 34: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/34.jpg)
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
![Page 35: Offline Drupal with progressive web app](https://reader031.vdocuments.mx/reader031/viewer/2022030217/5886ef271a28abba528b65ed/html5/thumbnails/35.jpg)
Questions?Théodore [email protected]@nod_