Progressive web app (PWA) using Ionic 3

1. Open command prompt/terminal and create a ionic app

ionic start MyIonic3PWA sidemenu

2. cd to MyIonic3PWA and add the browser as a platform

ionic platform add browser

3. To Launch the project

ionic run browser

4. To add the Logo
create a folder and copy the launch logo.png in the folder MyIonic3PWA\src\assets\imgs\ It works for android
For iOS add the below code in index.html

	<link rel="icon" type="image/png" href="assets/imgs/logo.png">

5. To add the app name open src/manifest.json and add app name

"name": "MyIonic3PWA",
"short_name": "MyIonic3PWA",

and change the index.html


Code Sample

  "name": "MyIonic3PWA",
  "short_name": "MyIonic3PWA",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [{
    "src": "assets/imgs/logo.png",
    "sizes": "512x512",
    "type": "image/png"
  "background_color": "#4e8ef7",
  "theme_color": "#4e8ef7"


<!DOCTYPE html>
<html lang="en" dir="ltr">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  	<link rel="icon" type="image/png" href="assets/imgs/logo.png">
  	<link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">


  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- un-comment this code to enable service worker
    if ('serviceWorker' in navigator) {
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));

  	<link href="build/main.css" rel="stylesheet">

  <!-- Ionic's root component and where the app will load -->
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at

Up ↑

%d bloggers like this: