with Progressive Web Apps

Offline support

go Progressive!

Push Notifications

Install to Home Screen

via ServiceWorker

offline support

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

add to home screen

{
  "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

Push Notifications

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

↗ perf

Browser improvements

CPU speed

Browser Features

to improve performance

• Web Assembly
• Web Workers
• CSS "will-change" property
• window.requestIdleCallback()

Can I use Web Assembly?

CPU/GPU Performance

SunSpider Benchmark

http://www.macotakara.jp/blog/iphone/entry-33335.html

https://www.anandtech.com/show/11170/the-amd-zen-and-ryzen-7-review-a-deep-dive-on-1800x-1700x-and-1700/19

Performance improvements

Lazy DOM population

Hardware GPU acceleration

Made of Web Components

lazy DOM manipulation

Unload when out of view

Load when about to display

web components!

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)

Cordova and react native

Native Code

Cordova

Cordova Plugins

JS

HTML5

Native Code

React Native (JSCore)

JS + JSX

Native

UI

WebView

Native UI

what is monaca?

• Cordova development suite on the Cloud.
• Focus on pro and enterprise developers.
• Enhanced Cordova features.

Monaca Debugger

• Online & local debugging.
• Live update on device.
• Distributed via app stores.
• Build your own debugger.
• Cordova plugin support.

Remote build

• All-in-one for iOS, Android and Windows.
• iTunes Connect distribution automation.
• All Cordova plugins are supported including hooks.

code encryption

• Encryption, not obfuscation.
• Encrypts entire assets.
• Key can be supplied at runtime.
• Binary code identification.

in-app updater

• Update on-the-fly outside of the store.
• Precise update control through API.
• Can be hosted on premise.

Enterprise management PORTAL

• Central management for iOS keys and Android KeyStores.

• Manage developer seating, plug-in and continuous integration.

continuous integration

• Automated build & deployment.
• Support Git based systems + webhooks.
• Test distribution to HockeyApp and DeployGate.

Security CheckER Tool

• Cordova platform & native security analysis.
• Detailed code based inspection.

local and online ide

Cloud IDE

Desktop App