Progressive Web App (PWA) Features in Ionic 4
Tags: ionic, pwa, firebase
Published: 2020-03-29 09:22:57

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="95a8" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="53d1" class="graf graf--p graf-after--figure">In this tutorial, we will learn all the features of PWA in ionic 4 considering why you should definitely consider PWA as your next project in Ionic 4.<br>What are the importance and benefits of PWA in ionic 4?</p><p name="a1dc" class="graf graf--p graf-after--p">This post is all about the features and advantages of PWA in your cool new app. In this post, you will learn in step by step</p><ul class="postList"><li name="6e29" class="graf graf--li graf-after--p">What is PWA and reason to use?</li><li name="039a" class="graf graf--li graf-after--li">How to implement <code class="markup--code markup--li-code">PWA</code>in an Ionic app.</li><li name="85cc" class="graf graf--li graf-after--li">Features of PWA in ionic app.</li></ul><p name="00df" class="graf graf--p graf-after--li is-selected">Before start, first you will need an ionic app to start with, hence you can follow <a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">how to create an ionic app for beginners</strong></a> and start after that from here.</p><h3 name="3d56" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4</h3><p name="f0bb" class="graf graf--p graf-after--h3">I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in every blog.</p><p name="d490" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="b6a7" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><h3 name="f777" class="graf graf--h3 graf-after--p">What is&nbsp;PWA?</h3><p name="dbb4" class="graf graf--p graf-after--h3">By now, you’ve probably heard that Progressive Web Apps are the future of all mankind. They’ll bring world peace, end hunger, save the rainbows and unicorns, bring balance to the force, and a whole lot more. In the process, they might even push the mobile web forward, bring parity to web and native apps, and help mobile developers reach more users beyond the confines of the app stores.</p><p name="0111" class="graf graf--p graf-after--p">That all sounds great…but what <em class="markup--em markup--p-em">are</em> Progressive Web Apps, exactly?</p><blockquote name="9c6c" class="graf graf--blockquote graf--startsWithDoubleQuote graf-after--p"><em class="markup--em markup--blockquote-em">“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.”&#8202;—&#8202;</em><a href="https://developers.google.com/web/progressive-web-apps?hl=en"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">Progressive Web Apps</em></a></blockquote><p name="cc46" class="graf graf--p graf-after--blockquote">Native app store apps do things like send push notifications, work offline, look and feel like an app (as Apple and Google have imagined them), load on the home screen, and so on and so forth. Mobile Web Apps accessed in a mobile browser, by comparison, historically haven’t done those things. Progressive Web Apps fix that with new Web APIs, new design concepts, and new buzzwords.</p><p name="1492" class="graf graf--p graf-after--p">To be clear, I’m talking about <em class="markup--em markup--p-em">browser</em> mobile web apps. Hybrid apps, like Ionic with Cordova, run uninhibited in the native app environment, with all the features we expect of any native app. But pull out the web content from a hybrid app and load it in a mobile browser, and the app is thusly constrained by the features of the browser (for a variety of good security and API standardization reasons).</p><p name="e316" class="graf graf--p graf-after--p">Progressive Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web.</p><p name="0712" class="graf graf--p graf-after--p">On the whole, Progressive Web Apps describe a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web. Let’s walk through some of the core tenets of Progressive Web Apps.</p><h3 name="cc4f" class="graf graf--h3 graf-after--p">Why do we need Progressive Web&nbsp;Apps?</h3><p name="0791" class="graf graf--p graf-after--h3">To understand why we need progressive web apps, let’s first talk about some of the biggest challenges we are facing today with native and responsive web apps:</p><p name="fb22" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Internet speed</strong>: depending on where you live internet may be a nightmare. You may have not realized this, but 60% of the world’s population is still using 2G internet.</p><p name="6a3d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Slow website load</strong>: Do you know how long a user waits to close a website if it’s too slow? Only three seconds! 53% of users abandon a website if it loads too slow.</p><p name="ef7e" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">High friction</strong>: People don’t want to install native apps. An average user installs 0 applications in a month. Contrast this with how many new web sites they visit each month. Also, think about how many apps you downloaded and eventually ended up using just once or very few times?</p><p name="aeac" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">User engagement</strong>: Responsive mobile web sites have much more reach than native apps, however, they lack basic functionalities like push notifications and offline support. That causes that most of the users of responsive web sites are not actively engaged compared to native apps engagement levels.</p><p name="ad9c" class="graf graf--p graf-after--p">PWAs help in solving these problems. Let’s go through the main benefits of using progressive web apps.</p><h3 name="ce26" class="graf graf--h3 graf-after--p">Who’s building&nbsp;PWAs?</h3><p name="e383" class="graf graf--p graf-after--h3">Brands large and small are jumping on Progressive Web Apps to create better user experiences, anywhere the web runs. Here are some of our favorites.</p><ol class="postList"><li name="ee85" class="graf graf--li graf-after--p">Starbucks</li><li name="26a7" class="graf graf--li graf-after--li">Pinterest</li><li name="8aed" class="graf graf--li graf-after--li">Uber</li><li name="384e" class="graf graf--li graf-after--li">Twitter and many more…</li></ol><h3 name="c612" class="graf graf--h3 graf-after--li">Features of Progressive Web App in ionic&nbsp;4</h3><p name="2ff3" class="graf graf--p graf-after--h3">Some important and mindblowing features of PWA in ionic 4 are as follows —</p><p name="5b39" class="graf graf--p graf-after--p">i. Offline service Worker</p><p name="34d0" class="graf graf--p graf-after--p">ii. Firebase phone authentication</p><p name="aabb" class="graf graf--p graf-after--p">iii. Push notifications for web app</p><p name="d0c5" class="graf graf--p graf-after--p">iv. Full-Screen browser mode</p><p name="c619" class="graf graf--p graf-after--p">v. Launch from the user’s home screen</p><p name="2b01" class="graf graf--p graf-after--p">vi. Web app install banner prompt</p><p name="bf94" class="graf graf--p graf-after--p">Here we will discuss and implement each feature one by one but before that let’s implement PWA in an ionic 4 app by following these steps as I consider you have already created an application in ionic 4: —</p><p name="69f0" class="graf graf--p graf-after--p">Right now my app looks like this:</p><figure tabindex="0" contenteditable="false" name="6daf" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 360px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*Y6Bqg4XCSqSmd4a86_JsHQ.png" data-width="360" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*Y6Bqg4XCSqSmd4a86_JsHQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic ionic 4 app&nbsp;screen</figcaption></figure><p name="b3bf" class="graf graf--p graf-after--figure">Let's add some pages and styles in the above default created application.<br>Now make some changes by creating some attractive pages and check it out.<br>Before these, let's check the package.json of the current ionic 4 application.</p><pre name="a07d" class="graf graf--pre graf-after--p">{<br>"name": "IONICPWA",<br>"version": "0.0.1",<br>"author": "Ionic Framework",<br>"homepage": "https://ionicframework.com/",<br>"scripts": {<br>"ng": "ng",<br>"start": "ng serve",<br>"build": "ng build",<br>"test": "ng test",<br>"lint": "ng lint",<br>"e2e": "ng e2e"<br>},<br>"private": true,<br>"dependencies": {<br>"@angular/common": "~8.1.2",<br>"@angular/compiler": "~8.1.2",<br>"@angular/core": "~8.1.2",<br>"@angular/forms": "~8.1.2",<br>"@angular/platform-browser": "~8.1.2",<br>"@angular/platform-browser-dynamic": "~8.1.2",<br>"@angular/router": "~8.1.2",<br>"@ionic-native/core": "^5.0.0",<br>"@ionic-native/splash-screen": "^5.0.0",<br>"@ionic-native/status-bar": "^5.0.0",<br>"@ionic/angular": "^4.7.1",<br>"core-js": "^2.5.4",<br>"rxjs": "~6.5.1",<br>"tslib": "^1.9.0",<br>"zone.js": "~0.9.1"<br>},<br>"devDependencies": {<br>"@angular-devkit/architect": "~0.801.2",<br>"@angular-devkit/build-angular": "~0.801.2",<br>"@angular-devkit/core": "~8.1.2",<br>"@angular-devkit/schematics": "~8.1.2",<br>"@angular/cli": "~8.1.2",<br>"@angular/compiler": "~8.1.2",<br>"@angular/compiler-cli": "~8.1.2",<br>"@angular/language-service": "~8.1.2",<br>"@ionic/angular-toolkit": "~2.0.0",<br>"@types/jasmine": "~3.3.8",<br>"@types/jasminewd2": "~2.0.3",<br>"@types/node": "~8.9.4",<br>"codelyzer": "^5.0.0",<br>"jasmine-core": "~3.4.0",<br>"jasmine-spec-reporter": "~4.2.1",<br>"karma": "~4.1.0",<br>"karma-chrome-launcher": "~2.2.0",<br>"karma-coverage-istanbul-r<br>eporter": "~2.0.1",<br>"karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.0",<br>"protractor": "~5.4.0",<br>"ts-node": "~7.0.0",<br>"tslint": "~5.15.0",<br>"typescript": "~3.4.3"<br>},<br>"description": "An Ionic project"<br>}</pre><p name="a16b" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">The result after some UI changes: —</strong></p><figure tabindex="0" contenteditable="false" name="399e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 360px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.8%;"></div><img class="graf-image" data-image-id="1*Jc6M40C6kabLElnA7oKQzg.png" data-width="360" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*Jc6M40C6kabLElnA7oKQzg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Card Page&nbsp;added</figcaption></figure><p name="ae28" class="graf graf--p graf-after--figure">Let us convert the application in ionic 4 PWA application by following these steps…</p><p name="1a9c" class="graf graf--p graf-after--p">The two main requirements of a PWA are a <a href="https://developers.google.com/web/fundamentals/primers/service-workers/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Service Worker</a> and a <a href="https://developers.google.com/web/fundamentals/web-app-manifest/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Web Manifest</a>. While it’s possible to add both of these to an app manually, the Angular team has an <code class="markup--code markup--p-code">@angular/pwa</code> package that can be used to automate this.</p><p name="b090" class="graf graf--p graf-after--p">The <code class="markup--code markup--p-code">@angular/pwa</code> package will automatically add a service worker and an app manifest to the app. To add this package to the app, execute the following command in your project directory:</p><pre name="b050" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">ng add @angular/pwa</code></pre><p name="aea7" class="graf graf--p graf-after--pre">The command automatically does the following:</p><ul class="postList"><li name="c1ec" class="graf graf--li graf-after--p">Creates the configurations the service worker</li><li name="d25b" class="graf graf--li graf-after--li">Creates a default iconography for PWA standards</li><li name="bf0c" class="graf graf--li graf-after--li">Updates the angular.json file to enable service worker support</li><li name="e203" class="graf graf--li graf-after--li">Add @angular/pwa to your package.json</li><li name="4a9d" class="graf graf--li graf-after--li">Adds the required meta tags to the index.html</li><li name="0930" class="graf graf--li graf-after--li">Creates a ngsw-config.json file with your PWA configs</li></ul><p name="a8ca" class="graf graf--p graf-after--li">Once this package has been added run <code class="markup--code markup--p-code">ionic build --prod</code> and the <code class="markup--code markup--p-code">www</code> directory will be ready to deploy as a PWA.<br>After executing the above command in your project directory, will bring some changes in your package&nbsp;.json as —</p><figure tabindex="0" contenteditable="false" name="1221" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*IyI_6Nhrq1LRJm80JRxqBw.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*IyI_6Nhrq1LRJm80JRxqBw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Changes observed during installation</figcaption></figure><p name="80f3" class="graf graf--p graf-after--figure">Two new files named <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">manifest.webmanifest </em></strong>and<em class="markup--em markup--p-em"> </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">ngsw-config.json </em></strong>in your app’s files.</p><figure tabindex="0" contenteditable="false" name="956a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*_L7FDgNpD5d9Cr8zRBeFtw.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*_L7FDgNpD5d9Cr8zRBeFtw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">ngsw-config.json</figcaption></figure><figure tabindex="0" contenteditable="false" name="1276" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*GwdjKuYLqTcv0NuVRrmIuA.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*GwdjKuYLqTcv0NuVRrmIuA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">package.json after PWA installation</figcaption></figure><p name="b8af" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">and in app.module.ts</strong></p><figure tabindex="0" contenteditable="false" name="5c9d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*pe8iO5iXxVp-CyrfkdAeIw.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*pe8iO5iXxVp-CyrfkdAeIw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">app.module.ts</figcaption></figure><p name="9852" class="graf graf--p graf-after--figure">Now we have converted our application from native Ionic application to Ionic 4 PWA application.<br>Let us integrate service-worker in this application but before that, we should get to know what is service-worker and why we need this in ionic 4 application.</p><h3 name="92b2" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Service-Worker in Ionic 4 PWA:&nbsp;—</strong></h3><p name="058a" class="graf graf--p graf-after--h3">Perhaps the most critical step in transforming your Ionic application into a PWA is to set up a <a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">service worker</a>. A service worker is a script that runs separately to the application. It doesn’t have access to the DOM like a normal script would, but it can do things like handle network requests and caching.</p><p name="bfbb" class="graf graf--p graf-after--p">Service Workers are an incredibly powerful, and equally as confusing, the technology behind a Progressive Web App. They power offline functionality, push notifications, background content updating, content caching, and a whole lot more.</p><p name="d9e0" class="graf graf--p graf-after--p">At a high level, a Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more.</p><p name="8e65" class="graf graf--p graf-after--p">If using service workers to handle network requests and cache resources sounds difficult there’s no need to worry&#8202;—&#8202;Ionic handles it all for us. The code for the service worker is already included in your Ionic application.</p><p name="a154" class="graf graf--p graf-after--p">If an app is being deployed to other channels such as Cordova or Electron, you can remove the <code class="markup--code markup--p-code">"serviceWorker": true</code> flag from the <code class="markup--code markup--p-code">angular.json</code> file.</p><p name="7373" class="graf graf--p graf-after--p">The service worker can be generated by running: we just need to execute the below command.</p><pre name="37eb" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">ionic build --prod --service-worker</code></pre><blockquote name="9eda" class="graf graf--blockquote graf-after--pre">Note: Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.</blockquote><h4 name="dd4a" class="graf graf--h4 graf-after--blockquote">Firebase phone authentication: —</h4><p name="6a06" class="graf graf--p graf-after--h4">Ionic 4 PWA gives us the facility to authenticate a user using phone authentication. With the help of phone authentication in your app, you can check or prevent a user from login application without registering for the application.<br>We will cover the firebase phone authentication in ionic 4 PWA application in the next blog.</p><h4 name="f807" class="graf graf--h4 graf-after--p">Push Notifications in ionic 4 PWA Application: —</h4><p name="d6e9" class="graf graf--p graf-after--h4">Ok, I’ll try to define it in my own language. How do you know when you get a new message on Whatsapp, Facebook or Twitter if the app is closed? Yes, those small messages that pop down from the top of the screen, showing new messages, updates or news are called Push notifications (or simply Push)</p><figure tabindex="0" contenteditable="false" name="f688" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*grLKk4kBhF2vvYuO.gif" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/800/0*grLKk4kBhF2vvYuO.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Yes, those&nbsp;…… are push notifications</figcaption></figure><p name="0949" class="graf graf--p graf-after--figure">One might wonder why to integrate Push notifications in an app. Let me tell you, push notifications is the <strong class="markup--strong markup--p-strong">single biggest feature </strong>to keep your users engaged with your app. People are obsessed with notifications. People keep checking their phones regularly so they don’t miss any notification. If your app sends regular (and interesting) push, your users will be happy, and you’ll see much less app uninstalls than you’ll see without push.</p><p name="9de6" class="graf graf--p graf-after--p">We will implement Push Notifications in ionic 4 PWA application in the nest blog<strong class="markup--strong markup--p-strong">. </strong><a href="https://medium.com/enappd/firebase-push-notifications-in-ionic-4-3c80f14777ec"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">You can follow our Firebase push notification blog to implement in ionic 4 application.</strong></a></p><h3 name="8e92" class="graf graf--h3 graf-after--p"><a href="https://ionicframework.com/docs/publishing/progressive-web-app#deploying"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Deploying</a> the application</h3><h3 name="b660" class="graf graf--h3 graf-after--h3"><a href="https://ionicframework.com/docs/publishing/progressive-web-app#firebase"  class="markup--anchor markup--h3-anchor" rel="noopener"    target="_blank">Firebase</a></h3><p name="2afc" class="graf graf--p graf-after--h3">To deploy our app on firebase and test it online we need to create a firebase project for this application.<br><a href="https://medium.com/enappd/how-to-integrate-firebase-in-ionic-4-apps-15d76263d51"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong">To create a firebase project just follow this and start after completing the steps suggested in the blog.</strong></a><strong class="markup--strong markup--p-strong"> OR</strong><a href="https://medium.com/enappd/firebase-with-ionic-4-hosting-auth-and-db-connection-ed9e99dc6642"  class="markup--anchor markup--p-anchor"    target="_blank"><strong class="markup--strong markup--p-strong"> you can follow this blog too.</strong></a></p><p name="b4f2" class="graf graf--p graf-after--p">Next, in a Terminal, install the Firebase CLI:</p><pre name="aecc" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ npm install -g firebase-tools</code></pre><p name="3d98" class="graf graf--p graf-after--pre">With the Firebase CLI installed, run <code class="markup--code markup--p-code">firebase init</code> within your Ionic project. The CLI prompts:</p><p name="6d89" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“Which Firebase CLI features do you want to set up for this folder?”</strong> Choose “Hosting: Configure and deploy Firebase Hosting sites.”</p><p name="9265" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“Select a default Firebase project for this directory:”</strong> Choose the project you created on the Firebase website.</p><p name="8e85" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“What do you want to use as your public directory?”</strong> Enter “www”.</p><blockquote name="9e65" class="graf graf--blockquote graf-after--p"><em class="markup--em markup--blockquote-em">Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:</em></blockquote><p name="d061" class="graf graf--p graf-after--blockquote"><strong class="markup--strong markup--p-strong">Configure as a single-page app (rewrite all urls to /index.html)?”</strong> Enter “Yes”.</p><p name="59ec" class="graf graf--p graf--startsWithDoubleQuote graf-after--p"><strong class="markup--strong markup--p-strong">“File www/index.html already exists. Overwrite?”</strong> Enter “No”.</p><p name="e320" class="graf graf--p graf-after--p">A <code class="markup--code markup--p-code">firebase.json</code> config file is generated, configuring the app for deployment.</p><p name="fa56" class="graf graf--p graf-after--p">I hope you have successfully done all the steps above and ready to deploy your app.</p><p name="589e" class="graf graf--p graf-after--p">Next, build an optimized version of the app by running:</p><pre name="063b" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ ionic build --prod</code></pre><p name="291a" class="graf graf--p graf-after--pre">Last, deploy the app by running:</p><pre name="4bab" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ firebase deploy</code></pre><figure tabindex="0" contenteditable="false" name="8ba0" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*vpxiRdZKbKMycj-9ZNp-Sw.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*vpxiRdZKbKMycj-9ZNp-Sw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">App deployed on&nbsp;firebase</figcaption></figure><p name="8234" class="graf graf--p graf-after--figure">When you hit the deployed url then you will get the following results</p><figure tabindex="0" contenteditable="false" name="009c" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*zkM6QoWN8ndCk551BrNaYw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*zkM6QoWN8ndCk551BrNaYw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Prompt to add on the device&nbsp;screen</figcaption></figure><figure tabindex="0" contenteditable="false" name="ee67" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*_LaPyGJQqqbTdZ9UnyptPw.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*_LaPyGJQqqbTdZ9UnyptPw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">prompt to confirm add to the home&nbsp;screen</figcaption></figure><figure tabindex="0" contenteditable="false" name="1145" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 295px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 216.9%;"></div><img class="graf-image" data-image-id="1*1KiaYGPai6gHcVDJ7ZKdeg.jpeg" data-width="295" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*1KiaYGPai6gHcVDJ7ZKdeg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">added to home&nbsp;screen</figcaption></figure><p name="ad2f" class="graf graf--p graf-after--figure">I the above image we can see that the app icon is an angular icon, here angular provides its default icon in the manifest. You can change the icon by generating required sizes and add it in the assets folder and edit the <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">manifest.webmanifest </em></strong>file</p><figure tabindex="0" contenteditable="false" name="58c0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*DFVGF7fNPQyAyJsU6-joyA.png" data-width="1920" data-height="1080" src="https://cdn-images-1.medium.com/max/800/1*DFVGF7fNPQyAyJsU6-joyA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)"><strong class="markup--strong markup--figure-strong"><em class="markup--em markup--figure-em">manifest.webmanifest</em></strong></figcaption></figure><p name="461d" class="graf graf--p graf-after--figure">Now you are all set and ready to add multiple features in your ionic 4 PWA application.</p><h3 name="babf" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="3c26" class="graf graf--p graf-after--h3">Progressive Web Apps are equal parts of new Web APIs, design patterns, and marketing fluff. The mobile web comes closer to parity with installable app store apps through app manifest and homescreen install support, background worker functionality with Service Workers, faster load time with App Shell, and a renewed belief that web developers, too, can build amazing mobile app experiences.</p><h3 name="003b" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="feb2" class="graf graf--p graf-after--h3">Now that you have learned the features and implementation of PWA in Ionic 4, you can also try</p><ul class="postList"><li name="2a92" class="graf graf--li graf-after--p">Ionic 4 Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="86b2" class="graf graf--li graf-after--li">Ionic 4 Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="d278" class="graf graf--li graf-after--li">Ionic 4 Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="026d" class="graf graf--li graf-after--li">Ionic 4 Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="2f67" class="graf graf--li graf-after--li">Ionic 4 Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="b531" class="graf graf--li graf-after--li">Media in Ionic 4&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="259c" class="graf graf--li graf-after--li">Ionic 4 Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="a2a7" class="graf graf--li graf-after--li">Ionic 4 messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a> | <a href="https://enappd.com/blog/local-notifications-in-ionic-4/69"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Local notification</a></li><li name="e306" class="graf graf--li graf-after--li">Ionic 4 with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="e9bd" class="graf graf--p graf-after--li">You may also check our Ionic 4 PWA works: —</p><ol class="postList"><li name="89ad" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/ionic-4-food-ordering-pwa-app-starter/"  class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">https://store.enappd.com/product/ionic-4-food-ordering-pwa-app-starter/</a></li><li name="c7ce" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-spotify-pwa-app-starter/"  class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">https://store.enappd.com/product/ionic-4-spotify-pwa-app-starter/</a></li><li name="08f7" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-grocery-complete-platform-app-and-admin-dashboard/"  class="markup--anchor markup--li-anchor" rel="noopener" target="_blank">https://store.enappd.com/product/ionic-4-grocery-complete-platform-app-and-admin-dashboard/</a></li></ol><p name="8346" class="graf graf--p graf-after--li">if you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="16b0" class="graf graf--figure is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*4e8jjvR9koEND5aL.jpeg" data-width="700" data-height="442" src="https://cdn-images-1.medium.com/max/800/0*4e8jjvR9koEND5aL.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="2ecb" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>