Progressive Web Apps (PWA)

0
51
Progressive Web Apps

Progressive Web apps are a new way to build web apps

Progressive Web apps are a new way to build web apps to work just like your native apps. Let me explain more.

Let’s just say you are browsing some website which does not have an app, and you see a popup on your screen saying “Add to home screen”. When you click this button this website icon is added to your app drawer, from where you can use this website just like a native app. You just installed an app without going to app store or play store.

Now you would say it still needs internet or else it won’t work, that’s where this PWA comes in. You can run this app without internet on your android or iPhone. The best part is the version of your android or iPhone will not make huge difference, sure their might be some features that won’t work but still most of the app will run smoothly. Now let me tell you more about what is Progressive Web app and how does it work

Native apps Advantages and disadvantage

Advantages

  • They start quickly
  • Work offline
  • Push notification

Disadvantages

  • Limited reach
  • Consumes disk space on your mobile
  • Different version required for different platform
  • Runs in background consuming memory and data
  • Separate cost for development

Web Apps Advantages and disadvantage

Advantages

  • It is safer and gives privacy
  • Does not run in background and consumes data
  • Does not consumes disk space on your mobile device

Disadvantages

  • Limited to browser cannot be compatible as native app
  • Every time needs internet connection to load the website
  • Not accessed quickly

What is Progressive Web App?

PWA improves the end to end user experience. It combines the user experience of native app and reach of the web apps.

It is not a new framework or technology, just a way to make you current website into app, for delivering better user experience. PWA turns a website to native app so beautifully, one cannot tell the difference between a native app and PWA. PWA uses service worker to perform the task, let me explain you what are service workers.

What is Service Worker?

It is the platform API behind many of the new capabilities of PWA. Normal website loads everything from the server every time, and if there is bad or no internet connection page does not load.

But service workers cache all the resources needed for your page, and it gives you full control on managing the cache, so that you can show cached page or the page from the network. It means that whenever a user visits a page on website service worker will store that in the cache for offline access.

Service workers can also handle Push notification.

Why Progress Web App?

Nowadays people prefer native apps because of quick access, and it is difficult to search for a website on mobile browser. So user prefers an app on mobile to faster access. But building a full-fledged mobile app can cost you more time and money. What if you can use your current website as a native app, which user would not need to download.

The main aim for you as a business is that, your users get to use your service and not to install the app.

PWA provides the solution to this problem. The main benefit of PWA is

Fast

User want the app to load quickly and have smooth scrolling. But current web app does not load fast. Research shows that 53% of users would not visit a website if your website does not load under 3 sec.

Integrated

Web apps can only be accessed to browser, which makes it more combustible for a user. User should be able to launch the app from their home screen where other apps are located.

Reliable

Native apps work offline, but web apps don’t. You would not open a browser if you have a slow or no internet connection right? Normal web app opened from a home screen with slow or no internet would show “downasaur”. Your desktop has broadband connection and hence you would always be online to open any website. But your mobile might not have internet connection all the time, still mobile apps don not show “downasaur” it just loads the cached content, whereas if there are no internet web apps will show “downasaur”.

That’s where PWA changes things for web apps.

Engaging

User engagement is very important, push notification will keep your app up to date. They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

How to get started with PWA?

If you are building your website from scratch it is good to go with PWA from scratch, so that you can use full potential of service workers.

To convert current website to PWA

  1. Secure server (HTTPS). The green lock you see in the URL bar shows that the website is secure
  2. Now you need to have a mobile friendly website specific for mobile user. You don’t have to show everything on the mobile site, try to keep it lite which will make the site load faster
  3. Pick one feature that will make most for you, there is no sense in trying to go for all at once

Manifest.json file example

{
"name": "Thereviewstories",
"short_name": "TRS",
"theme_color": "#00000",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

Service worker file

{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/.css",           "/.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/*",           "/.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}

Features in PWA

  1. Full responsiveness and browser compatibility
  2. Connectivity independence.
  3. App-like interface
  4. Push notifications
  5. Self-updates
  6. Safety
  7. Discoverability and easy installation

This current website in which you are reading the article is an PWA, if you see the notification of add to home screen, go ahead and add it or go to your browser option and add it. I have integrated recently on my existing website. Please share you experience of using this website as an app with notification. I will provide some link so that you can learn to build your own PWA, or else contact me I will guide you through.

View google developer telling you about PWA

View this video to build angular app with PWA

Offical Website Click here

Build your first app here

Udemy course link

A free guide to build PWA

Read books on Kindle