PWA Features in Ionic 4

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.
What are the importance and benefits of PWA in ionic 4?

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

• What is PWA and reason to use?
• How to implement PWAin an Ionic app.
• Features of PWA in ionic app.

Before start, first you will need an ionic app to start with, hence you can follow how to create an ionic app for beginners and start after that from here.

What is Ionic 4

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.

Ionic 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.

In other words — If you create native apps in Android, you code in Java. If you create native apps in iOS, you code in Obj-C or Swift. 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.

What is PWA?

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.

That all sounds great…but what are Progressive Web Apps, exactly?

“A Progressive Web App uses modern web capabilities to deliver an app-like user experience.” — Progressive Web Apps

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.

To be clear, I’m talking about browser 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).

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.

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.

Why do we need Progressive Web Apps?

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:

Internet speed: 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.

Slow website load: 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.

High friction: 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?

User engagement: 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.

PWAs help in solving these problems. Let’s go through the main benefits of using progressive web apps.

Who’s building PWAs?

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.

1. Starbucks
2. Pinterest
3. Uber
4. Twitter and many more…

Features of Progressive Web App in ionic 4

Some important and mindblowing features of PWA in ionic 4 are as follows — 

i. Offline service Worker

ii. Firebase phone authentication

iii. Push notifications for web app

iv. Full-Screen browser mode

v. Launch from the user’s home screen

vi. Web app install banner prompt

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: — 

Right now my app looks like this:

Let's add some pages and styles in the above default created application.
Now make some changes by creating some attractive pages and check it out.
Before these, let's check the package.json of the current ionic 4 application.

{
"name": "IONICPWA",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-r
eporter": "~2.0.1",
"karma-jasmine": "~2.0.1","karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project"
}

 The result after some UI changes: — 

Let us convert the application in ionic 4 PWA application by following these steps…

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it’s possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this.

The @angular/pwa 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:

ng add @angular/pwa

The command automatically does the following:

• Creates the configurations the service worker
• Creates a default iconography for PWA standards
• Updates the angular.json file to enable service worker support
• Add @angular/pwa to your package.json
• Adds the required meta tags to the index.html
• Creates a ngsw-config.json file with your PWA configs

Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.
After executing the above command in your project directory, will bring some changes in your package .json as — 

Two new files named manifest.webmanifest and ngsw-config.json in your app’s files.

and in app.module.ts

Now we have converted our application from native Ionic application to Ionic 4 PWA application.
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.

Service-Worker in Ionic 4 PWA: — 

Perhaps the most critical step in transforming your Ionic application into a PWA is to set up a service worker. 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.

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.

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.

If using service workers to handle network requests and cache resources sounds difficult there’s no need to worry — Ionic handles it all for us. The code for the service worker is already included in your Ionic application.

If an app is being deployed to other channels such as Cordova or Electron, you can remove the "serviceWorker": true flag from the angular.json file.

The service worker can be generated by running: we just need to execute the below command.

ionic build --prod --service-worker

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.

Firebase phone authentication: — 

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.
We will cover the firebase phone authentication in ionic 4 PWA application in the next blog.

Push Notifications in ionic 4 PWA Application: — 

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)

One might wonder why to integrate Push notifications in an app. Let me tell you, push notifications is the single biggest feature 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.

We will implement Push Notifications in ionic 4 PWA application in the nest blog. You can follow our Firebase push notification blog to implement in ionic 4 application.

Deploying the application

Firebase

To deploy our app on firebase and test it online we need to create a firebase project for this application.
To create a firebase project just follow this and start after completing the steps suggested in the blog. OR  you can follow this blog too.

Next, in a Terminal, install the Firebase CLI:

$ npm install -g firebase-tools

With the Firebase CLI installed, run firebase init within your Ionic project. The CLI prompts:

“Which Firebase CLI features do you want to set up for this folder?” Choose “Hosting: Configure and deploy Firebase Hosting sites.”

“Select a default Firebase project for this directory:” Choose the project you created on the Firebase website.

“What do you want to use as your public directory?” Enter “www”.

Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all urls to /index.html)?” Enter “Yes”.

“File www/index.html already exists. Overwrite?” Enter “No”.

A firebase.json config file is generated, configuring the app for deployment.

I hope you have successfully done all the steps above and ready to deploy your app.

Next, build an optimized version of the app by running:

$ ionic build --prod

Last, deploy the app by running:

$ firebase deploy

When you hit the deployed url then you will get the following results

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 manifest.webmanifest file

Now you are all set and ready to add multiple features in your ionic 4 PWA application.

Conclusion

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.