Version: Smart Feature Phone 3.0

Transform PWA to hosted app

What is PWA?

Put it simply, Progressive Web Apps are web applications that load in a web browser just like web pages or websites. It gives you a rich mobile experience via native-like functionalities such as the ability to work offline, push notifications, and device hardware accessibility.

It feels like a native app and offers the same experience as a native one. There is no need to download it from an app store. It loads, runs, and functions in a web browser.

For more information about PWA, You can see also

Progressive Web Apps Promote Mobile-First Approach

According to one Statista report,

The number of mobile phone users is forecasted to reach 4.68 billion by 2019.

Going further, in 2016, an estimated 62.9 percent of the population worldwide already owned a mobile phone. This will round up to 67 percent by 2019.

4 Things Every Progressive Web App Must Have

There are 4 things every progressive web apps must have.

Lets's start listing each of them, then we'll go over them one after the other:

  • HTTPS
  • Web app manifest
  • Service worker
  • Responsive design

HTTPS

A PWA must be safe and secure, hence the requirement to be served on HTTPS instead of HTTP. Gone are the days when getting an SSL certificate for a website is expensive and tedious.

Every modern website today should be running on HTTPS, you will be doing your app such a great good by serving it on HTTPS.

Web App Manifest

The web app manifest is simply a JSON (manifest.json) file that is used to describe the application. The web app manifest provides information about an application (such as name, icon, and description etc.). The purpose of the manifest is to install web applications to the home screen of a device, providing users with quicker access and a richer experience such as theme, splash screen and the ability to run the app in full-screen mode and as a standalone application.

A typical web app manifest can be as below:

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-152x152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Service Worker

A service worker is vital to allow a PWA. So what is a service worker? A service worker is a script that runs in the background making the decision to serve network or cached content based on availability. Service worker provides offline support for applications through caching, which is essential for a PWA. In addition to the offline functionality, a service work also provides support for other features such as push notifications, and background sync.

It is important to mention that service workers can only be registered on pages served over HTTPS. Though it can be registered on localhost while in development, as soon as you deploy to a live server, it will require HTTPS and not HTTP.

Responsive Design

Since a PWA can be somewhat installed on a device (mobile phone or tablet etc.), it should be responsive enough so as to display properly irrespective of the devices it is being viewed on. With the numerous CSS frameworks out there that support responsive design, making your app responsive on major screen sizes should be easy.

Transform PWA to hosted app

If you already have a PWA web app and want to publish it to hosted app under KaiOS，We will provide some instruction to help you transform PWA to KaiOS hosted app and submit to KaiStore. We assume you already be familiar with PWA.The under instruction only list some points you need focus on,Please refer above link about the details of PWA.

Add new manifest.webapp

Your PWA app manifest.json file may be looks like below:

{
  "name": "Weather",
  "short_name": "Weather",
  "icons": [{
    "src": "/images/icons/icon-56x56.png",
    "sizes": "56x56",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-112x112.png",
    "sizes": "112x112",
    "type": "image/png"
  }, {
    "src": "/images/icons/icon-224x224.png",
    "sizes": "224x224",
    "type": "image/png"
  }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

First we need add a new file manifest-hosted.app(any meaningful name will be accepted) and let this new manifest file be served through your server.

{
  "version": "1.0.0",
  "name": "KaiOS Hosted Weather APP",
  "description": "A sample hosted APP which transported for PWA",
  "type": "web",
  "launch_path": "/index.html",
  "icons": {
    "56": "/images/icons/icon-56x56.png",
    "112": "/images/icons/icon-112x112.png",
    "224": "/images/icons/icon-224x224.png"
  },
  "developer": {
    "name": "KaiOS",
    "url": "http://www.kaiostech.com"
  },
  "permissions": {
    "serviceworker":{}
  },
  "cursor": "true",
  "locales": {
    "en-US": {
      "name": "KaiOS App",
      "subtitle": "Short description for the user",
      "description": "Brief description of your app"
    }
  },
  "default_locale": "en-US"
}

Certainly you can just add a REST API and return json like below:

const hostedManifest = {
    "version": "1.0.0",
    "name": "KaiOS Hosted Weather APP",
    "description": "A sample hosted APP which transported for PWA",
    "type": "web",
    "launch_path": "/index.html",
    "icons": {
      "56": "/images/icons/icon-56x56.png",
      "112": "/images/icons/icon-112x112.png",
      "224": "/images/icons/icon-224x224.png"
    },
    "developer": {
      "name": "KaiOS",
      "url": "http://www.kaiostech.com"
    },
    "permissions": {
      "serviceworker":{}
    },
    "locales": {
      "en-US": {
        "name": "KaiOS App",
        "subtitle": "Short description for the user",
        "description": "Brief description of your app"
      }
    },
    "default_locale": "en-US",
    "cursor": true,
  };

function getHostedManifest(req, resp) {
  resp.json(hostedManifest);
}

app.get('/hosted-manifest', getHostedManifest);

You can reference the details of this manifest file here.We will provide helper tool for you to transform PWA manifest.json file to hosted app manifest.webapp soon.The most important is you must specify ServiceWorker permission like blow or you can not use ServiceWorker in this hosted app.

"permissions": {
  "serviceworker":{}
}

Offline Support

The traditional offline of KaiOS app use appCache ,For sure you can continue use this technology,In addition you can use Service Worker to implement like ServiceWorker Offline experience.

Responsive Design

Current KaiOS devices support QVGA resolutions in portrait (240x320 pixels) or landscape (320x240 pixels). If you want adapter your hosted app to KaiOS app, You should process your responsive design for small screen. You can refer more details about responsive design through Responsive Design on Google Developer.

Fow now,You can add "cursor: true" to manifest.webapp file for the navigation purpose(Emulated Cursor), Certainly you can use D-pad for navigation(D-pad navigation).

Install experience

When a Progressive Web App is installed, it looks and behaves like all of the other installed apps. It launches from the same place as other apps launch. It runs in an app without an address bar or other browser UI. And like all other installed apps, it's a top level app in the task switcher.When you port your PWA to KaiOS hosted app, Currently you can only install your web app via submit to our KaiStore Submit To KaiStore. Certainly you can test through WebIDE install hosted app.