2. 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 :
●
●
5. 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’
7. 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
9. 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
11. 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
15. 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"
}
17. 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
18. Service Worker use-cases
●
オフラインでも訪問できる WEB サイトを作る
●
カッシュによりアセットをサーブすることでより高速
な Web サイトを作る (JS/CSS/ 写真など )
●
ユーザーにプッシュ通知を送る
●
ユーザーがオンラインになっても、オフラインで作ら
れたデータは同期する
●
Add timeout to third-party scripts (avoid SPOF
issues with facebook/twitter/google widgets)
19. 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)
29. 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
33. 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