PWA tutorial: How to convert your website to pwa

kaviani siavosh
April 6, 2020

Home » PWA tutorial: How to convert your website to pwa

Categories

PWA, web app, website

preface: what are the main Main Steps To Convert Your Website To A PWA (Progressive Web App)

In this PWA tutorial, we’ll show you how to convert your existing website to PWA( progressive web app). It’s fairly simple, only really requiring the following general steps:

Create an app manifest
Add it to your base HTML template
Create the service worker
Serve the service worker on the root of the scope you used in the manifest
Add a <script> block to your base HTML template to load the service worker
Deploy your progressive web app
Test and Use your progressive web app!

Let’s take the example of mobile phone software. Consider Whatsapp software. When the Internet is not connected, you can still open it, check past messages, and even reply to your friends. Messages are sent automatically when a phone Internet connection is established.

This is what PWA promises in web applications. PWA enables web applications to synchronize in the background when there is no internet network and to work seamlessly while providing a native experience to their users

Why do we need PWAs and what are their features?

Let’s talk about some of the key features that aren’t available in regular web applications and are provided in advanced applications:

Reliability

It should be fast at the time of downloading the app, the download speed should be at the same instant as well as when your phone is not connected to the internet or your app is slow. In its latest survey, Google found that 5% of users quit the site if it took more than 5 seconds to load the page.

Fast

Moving and scrolling between application pages should be smooth and fast. Everyone hates slow scrolling.

responsive

The app should be available on all different device sizes. The web application should be like a fluid that spills over into the container when it is poured into the container.

Installable

If we want to bring web applications closer to conventional applications, we need to have them installed. The application shortcut should be on the home screen along with other native applications so that the user can access the PWA with one click.

Splash Screen

Splash Screen is an image that appears when loading an application or game. This makes PWA look more like a native application.

Ability to get involved

The app should engage users. A PWA has features like notifications, notifications, icons on the page, the ability to open when there is no network, and so on.

All of the above features are possible in PWA applications. PWA is just a typical web application that has paid special attention to the user experience.

PWA and modern user interface

Some people think that a PWA comes with modern UIs like ReactJs, Angular ۶ or Vue.js. Well, not necessarily. PWA has nothing to do with the frameworks you use and only requires specific components.

How does PWA make websites available offline?

That was exactly my first question about PWA. How exactly can I open web applications without the internet? We all know that native apps can be opened without an internet connection because when we download and install them, their vital resources such as user interface components and some other information are stored on the phone… This is exactly what is happening at PWA.

PWA stores HTML files, CSS files, and images in the browser cache, and developers can fully control network communications. All of this is accessible by the Service Worker.

What is the PWA Technical Components?

PWA has some important technical components that work together and energize the web application regularly. The following components are needed to create a good PWA program.

did you Think to convert your website to a progressive web app? Let’s get a specific overview of the main steps to convert your website to PWA :

Three MAIN STEPS TO CONVERT YOUR WEBSITE TO PWA (PWA tutorial)

Step 1: Go HTTPS to Convert Your Website to a PWA (PWA tutorial)

There’s no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps!

All data exchanges need to be served on a secure domain: over an HTTPs connection!

And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority.

Now, there are 2 ways to get hold of it:

if your site runs on your server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate.
if your website runs on shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.

Step 2: Create a Web App Manifest

“But what is a web app manifest?”, you might ask yourself.

A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name…

It’s this information that will let browsers know how precisely they should display your app once saved as a home-screen icon.

Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that:

A link to this JSON text file should be placed in the <head> of all your PWA’s pages:

<link rel="manifest" href="/manifest.json">

That, of course, after you’ve:

entered all the information about your PWA
copied the manifest.json
created a new “manifest.json” file in the root directory of your site
and pasted it there

It should be served with:

Content-Type: application/JSON HTTP header or
a Content-Type: application/manifest+json

And here’s a “sample” piece of code:

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}

Once the “Manifest” section of the Chrome’s Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices.

Tip: as you convert your website to a progressive web app you don’t necessarily need to configure the manifest.json file yourself — with all its different image sizes, meta tags, etc. Instead, if you want to make it quick, you can just make a 500×500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you!

And this is just one of the generators you could use!

Step 3: Set Up Your Service Worker

This is where the “true power” of your PWA lies:

A service worker is a JavaScript file, placed in your app’s root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways.

Note: in most cases, it’s for caching all the static files, so that our PWAs can function offline, too, that we use service workers.

Now that we’ve seen what a service worker is, here’s how you create one as you convert your website to a progressive web app:

I. You get it registered first things first.

For this, just run this code in the JS file on your site:

 if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); }

Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file.

Note: NEVER call this file, inside your website, like this:

<script src="./service-worker.js"></script>

II. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file.

Users will just be notified to install it on their devices!

III. Once you’ve registered your Service Worker, generate your Service Worker file, too.

For this, just run this command in your terminal:

$ npm install --global sw-precache

Next, go ahead and run it on your website directory:

$ sw-precache

Et voila! You will have generated a service-worker.js including the service worker contents.

Test It Out your PWA version

At this stage of the “convert your website to a progressive web app” process, you should:

check whether your service worker got properly registered and installed on Chrome
run a performance audit on your PWA, using Chrome’s Lighthouse Extension

For the first operation, go through these 3 basic steps here

Press F12 to open your Chrome Dev Tools
Click on the “Application” tab
next, on the sidebar, select “Service Workers”

Then, check whether your service worker has been properly activated and is running normally:

Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there’s no internet connection?

Now let’s run an audit using Chrome’s dedicated testing tool, Lighthouse:

Press F12 again to visualize the Chrome Dev Tools
select the “Audits” tab
then select “Perform an audit”
check all the suggested checkboxes
and finally, run the audit

And here’s how the generated report would look like:

The END! This is how you convert your website to a progressive web app in 3 steps:

enabling HTTPS
configuring your web app manifest
creating your service work

Conclusion:

As we mentioned in this PWA tutorial, the Progressive Web App is a web application that displays a website in the form of an app on smartphones. The technology, introduced by Google in 2015, has attracted a lot of attention because of the relative ease of development and instant user experience for users. Progressive software is attempting to introduce native software with the exception that it will display a website in a browser.

When you use these types of applications you will be redirected to the site you are browsing through. As a result, you do not need to occupy the memory space of your phone and RAM to install the app. It’s easy to do, and you can access your favorite content in a very compact version. When you visit any site that supports this feature, you are asked if you want to add the site to your homepage. Which is added to the phone if you like the site icon just like other apps?

You have a shortcut that does not need to keep the site addresses and you can easily surf the sites you have a lot to deal with.

In this PWA tutorial, we showed Any website can be turned into a PWA (convert your website to PWA )and you don’t need to be a senior developer to do it.

ABOUT US

Working with Digital marketing, SEO services, and website design with a highly experienced team for years, َAvenger IT Next Generation has been able to meet the needs of people in various businesses and help businesses grow. Continuously updating their level of knowledge and exploring different markets has surpassed the pioneers in this field and incorporate successful experiences into their careers.

Avenger IT Next Generation is a website design and development agency and an SEO agency to promote your business, call with us.

https://www.optasy.com/blog/3-essential-steps-convert-your-website-progressive-web-app

https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605

 5/5

kaviani siavosh

All Posts