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">
<metaname="apple-mobile-web-app-capable"content="yes">
	<linkrel="apple-touch-icon"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

<title>MyIonic3PWA</title>

Code Sample
manifest.json

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

index.html

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

<head>
  <meta charset="UTF-8">
  <title>MyIonic3PWA</title>
  <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">

  <metaname="apple-mobile-web-app-capable"content="yes">
  	<linkrel="apple-touch-icon"href="assets/imgs/logo.png">

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

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

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

<body>
  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  <!-- 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>
</body>

</html>
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: