https://slides.com/masa-tanaka/rtc-2017/
Founder & CEO, Asial Corporation
Tokyo, Japan
@massie
masahirotanaka
Hi!
Application demands > Suppliers
Multiple target platforms
Shift from commercial to business
Evergreen Technology
Progressive & past aware
Cross platform
Fewer capability
Performance
Tooling
Offline support
Native features
with Progressive Web Apps
Offline support
Push Notifications
Install to Home Screen
via ServiceWorker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js');
}
'use strict';
var cacheVersion = 1;
var currentCache = {
offline: 'offline-cache' + cacheVersion
};
const offlineUrl = 'offline-page.html';
this.addEventListener('install', event => {
event.waitUntil(
caches.open(currentCache.offline).then(function(cache) {
return cache.addAll([
'./img/offline.svg',
offlineUrl
]);
})
);
});
Web App Manifest
{
"short_name": "Your Awesome App",
"name": "Your Truely Awesome App",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?launcher=true"
}
manifest.json (Refer from HTML page using <link rel="manifest">)
Firebase Cloud Messaging
self.addEventListener('push', function(e) {
var options = {
body: 'Received a new notifications!',
actions: [
{action: 'close', title: 'Close', icon: 'images/xmark.png'},
]
};
e.waitUntil(
self.registration.showNotification('Received Notifications!', options)
);
});
Service Worker Code
More Details
navigator.serviceWorker.register("/serviceworker.js")
.then(function(registration) {
return registration.pushManager.getSubscription().then(function(subscription) {
if (subscription) {
return subscription
}
return registration.pushManager.subscribe({
userVisibleOnly: true
})
})
})
Web page
Are they cross-platform?
Web MIDI
Web USB
Web Bluetooth
Video Tracks
...
Native Code
Cordova
Cordova Plugins
Your
Code
Native Bridge
More than 2,500 third-party plugins
TechCrunch, Sep 11, 2012
Browser improvements
CPU speed
to improve performance
SunSpider Benchmark
iPhone 8 has equivalent score to desktop CPUs!
UI and UX
Operating System
Native SDK
Your Logic
Operating System
WebView
Your Logic
MISSING!!
Framework you love
onsen.io
Lazy DOM population
Hardware GPU acceleration
Made of Web Components
Unload when out of view
Load when about to display
CSS Components
Web Components
Framework Bindings
Framework bindings is required to support props and methods.
Written in pure JavaScript (ES2017).
All components are exposed as HTML elements.
TypeScript ready.
Written in pure CSS (cssnext, PostCSS)
...
Native Code
Cordova
Cordova Plugins
JS
HTML5
Native Code
React Native (JSCore)
JS + JSX
Native
UI
WebView
Native UI
SDK Management
Device Testing
Unified Development Platform
Cloud IDE
Desktop App
Your Code
Wrapped in shell
Relaxing mobile app dev
with Onsen UI and Monaca!
Where to go next?
1. Contact me for any questions: masa@monaca.io
2. Onsen UI documentation and tutorial
3. Watch the next session by Marcus Saw.
Slides available at: https://slides.com/masa-tanaka/rtc-2017/