We need to understand what is a progressive web app – PWA before we turn our website into one. According to addwebsolution.com, a PWA is like a clone child of web and mobile applications. However odd that sounds, it’s probably the easiest way to explain what exactly progressive web apps are. But is the definition right?
There is no other better way to find out the definition of a PWA than to “hear from the horse’s own mouth”. So today, we will first head to the Google developer platform for a bonafide definition of what is a PWA. Then, we embark on the journey that is the essence of this article – how to turn a website into a PWA.
What is a PWA?
According to developers.google.com “a PWA is not an API or a technology, but it is a web development approach that uses a combination of tools and technologies already available to create targeted ideal user experiences. It shows how to use service workers, APIs, and an application shell architecture for meaningful offline experiences, fast first load, and easy user re-engagement upon repeat visits.”
Okay, people, the definition is comprehensive but also quite a mouthful. What Google developers’ – an authority on this topic – are simply saying, is that a PWA is a set of functionality. When implemented on a web app, this functionality makes it work more like a native mobile app.
What is a native app?
Loosely defined, a native app is a mobile application that uses the same programming tools like our mobile devices. For example, a native iOS app will use Swift, while a native Android app will use Java. Therefore, users download these apps from the Apple store, Google Play Store, or other respective platforms out there and install them on their mobile devices.
The reason why native apps are so popular is that platform-specific users – iOS users, Android users, etc. – are familiar with the native feel they provide. Or, simply put, each type of user knows and loves the UI/UX of their respective platforms. So, naturally, they will prefer an application that brings those elements with it.
PWAs vs. native apps
So, progressive web apps are a set of functions on top of a “traditional” web application, that turns it into a mobile app. But, PWAs are more than just that. They also bring those native elements that users love and look for in an app. And thus, PWAs turn simple websites into an almost native app.
Some of the native features that can be added to an existing web application to transform it into a PWA are offline accessibility, push notifications, icon installed on the home screen, background sync, media API, and also geolocation API.
As Google developers state, PWAs are “user experiences that have the reach of the web” and therefore characterized by three major qualities – they are reliable, fast, and engaging.
How PWAs are more beneficial than native apps
Some native apps for services like traveling for example take more storage space and are sometimes sluggish. So, they are not worth installing on a phone. Or, best-case scenario, users download the app, use it once to book a flight or accommodation just because of the offers. Then once they come back from vacation, they uninstall it to save storage.
PWAs on the other hand take much less space. Moreover, as discussed earlier, they are quicker to launch into the browser for users who are now impatient with slow websites. Not to mention that, like native apps, PWAs also come with offline support, push notifications, and more.
However, this is only one example of how PWAs are better than a native app. Another benefit is development time and costs. Native apps, because they use the same technology as the device itself, need one version of the code base for each device. It’s basically building a new app for iOS, Android, and so on. The more platforms, the more developers, the longer the time, and the higher the cost.
PWAs are basically websites, therefore they are built once and work on any platform. One app, that’s it. And they live in the browsers, so no hassle with pushing the app on every app store out there. Fast, affordable, and convenient.
Who can turn their site into a PWA?
Anyone can turn their website into a PWA. From individuals like bloggers and influencers who want their users to easily access their sites, to small, medium, and large businesses. With great features like geolocation, customers see nearby stores or driving directions.
There is also the media API that accesses a device’s native cameras which can be immensely helpful, quick, and cheap for instance in identifying oneself for certain services like registering on Airbnb or at the notary for certain legal services.
Advantages of a PWA in summary
PWA offers a myriad of benefits that make one’s application enjoyable for targeted users. And, as Google developers put it in their definition, they are an ideal way for “easy user re-engagement upon repeated visits.”
Basically, the benefits of a PWA are that they support push messages, show notifications, they look good on any device. They also work without an App store, they access native device features like camera and work offline.
Core building blocks/features for PWA
There are four primary building blocks for PWAs – the service workers, the application manifest, the background synchronization, and the web push.
The service workers are Javascript code supported by the browser, that is running in the background process even if the application is closed. So, on top of other features that service workers provide, they are also the ones responsible for a PWA working offline. This process is possible by caching and serving data without an internet connection.
The application manifest is what makes the web application installable on home screens. At the same time, background synchronization sends requests once the internet connection is restored. Finally, the web push is the push or server notifications that run in the background, independent from any opened tabs.
What type of websites can be turned into PWA?
Something happening progressively usually means gradual development – in stages over time. In the case of web apps, progressive means that no matter the type of web application, it can be converted into a PWA.
We know what you’re thinking. “What if I have a legacy web app and it is using an older technology. Surely I have to re-write code to convert it to a PWA”. Far from it. All you need to do is select the features you want and add them on top of your legacy system. For instance, add a service worker and an application manifest for now. Later on, you can add a push notification and whatever else you want.
The same applies to modern web apps. You can convert them into PWAs gradually, by adding the essential features like app manifest, service worker, advanced caching, and then stop. Later on, add a geolocation API or any other feature until fully converted to PWA. However, if you are only now building the website and are already thinking about converting it, it’s best you do it in full from the beginning.
Now after going through most of the concepts to do with PWA including and not limited to; what are PWAs, should normal people convert their web app into PWA and is it beneficial to them, how to identify PWAs-their features, the core building features of PWA, whether PWA and SPA are one and the same – differences emerge and what the word progressive means in PWAs. It is time to move to turning/converting our website into a PWA.
How to turn a website into a PWA
Finally, we saved the best for last, now we can turn our website into a PWA. But, first you need to be familiar with JavaScript – beginner to intermediate level – HTML and CSS. If you are also comfortable with service workers, that’s great but not mandatory.
Then, you will need a text editor like Visual Studio Code, Sublime, Brackets, Notepad++ or any IDE of your choice to learn how to turn a website into a PWA. Make sure you use a browser that supports service workers like Google Chrome. And finally, you need to generate an app manifest. And, of course, aside from service workers and the app manifest, you will also need a web app to turn into PWA. Ready? Let’s get started!
Step 1 – Prepare a website to convert
In this guide, we will show you step-by-step how to turn a regular website into a PWA. So let’s start by creating a simple, basic website that we will convert as seen below.
We will start by opening our coding editor – we are using Visual Studio IDE, but you can use whichever editor you fancy. First, create all the folders needed for a basic web app. These include the images folder, index.html file, manifest.json, and the service workers file as sw.js. The folders should look something like in the print screen below.
Next, open the index.html file created and populate it with the code presented below. Don’t worry, there’s not a lot of HTML code to write. Copy all the code as it appears in the screenshot below.
Step 2 – Service workers
Open your service worker file-sw.js and input your code as it appears in the screenshot below. If you have CSS, app.js files and any other files for running your website, add them at line six in the code below, where the index.html is.
Step 3 – App manifest
Next, create your application manifest by opening the manifest.json file you already made in the beginning. Now fill the manifest.json file with the code below.
Add your icons into the image folder if they are not already there as below. Please remember that the icons should be in eight different sizes ranging from 72×72 to 512×512 to cater to various devices. Note that the icon sizes shown above are just an example.
After creating the manifest.json file, connect it to your web application in order to access and add the home screen functionality and icon installation. We make the connection by adding the following code in the head of the index.html.
When you are done writing the above piece of code in the head of the index.html file, your whole index.html file should resemble the screenshot below.
Next, we will have to place a script in the head tag just after the manifest link.This is because the PWA needs it when the page loads, and for caching files. Below is the piece of code for the script.
When you finish writing the script code, your index.html file should look like in the screenshot below.
Congratulations, you have now learned how to turn a website into a PWA. To confirm, open your application in a web browser that supports service workers like Chrome. Your new PWA should look something like the screenshot below.
To the right side of the URL bar, there is a small plus (+) symbol. When you click on it, you will see a dialog box appear, asking “Do you want to install the app?”, with a blue install button at the bottom.
If you click on the install button you will see an icon for your PWA installed on your desktop. When you double click on the icon, your PWA will open on your computer. Below is a screenshot of the installed icon on the desktop to the left and the website that has now been turned into a PWA to the left open after double-clicking on the installed icon.
To uninstall the PWA icon from your desktop screen do as indicated below. Click on the address bar on the three dots to the right, near the minimize (-) symbol. A dialogue box appears with the prompt ‘Avinstallera Wiredelta PWA..’ on the fourth line from the top – translated as ‘uninstall Wiredelta PWA…’ Click on the prompt and that’s it, the PWA icon will be uninstalled and gone from the desktop screen.
Step 4 – Test your PWA
Testing your PWA is an important step in learning how to turn a website into a PWA, as it is with any other type of application – mobile or desktop. So, for our Wiredelta PWA example, we tested its performance using Lighthouse from Google’s developer tools – otherwise known as the inspection tool. This enables us to establish, among other things, how fast our PWA loads.
Below is the google developer tools for those who have no idea what it looks like. In the Lighthouse section, under the device to the far right of the diagram click on the radio icon for what device you want to audit. There are only two choices – mobile or desktop. As seen below we have selected a mobile device. Then click generate report highlighted in blue just below the windmill icon.
Here are four screenshots of our simple Wiredelta PWA audit results. The first two screenshot results are for the mobile device with a performance of 76 out of 100. Which is great. While the last two screenshot results are for the desktop device which stands at 93 out of 100 loading time at 0.3s, which is epic!
From these four examples, the most important results are screenshot two and four – validation of the PWA. Remember a PWA must be fast and reliable on initial loading. Every evaluation should be green, meaning satisfactory. If you ever have a red evaluation, you may still have work to do, like troubleshooting as directed by Lighthouse.
Lighthouse audit
The screenshots below depict the results of the lighthouse audit for the Wiredelta PWA 2020. The lighthouse audit generates results for the PWA for desktop and mobile devices. The audit measures performance, accessibility, best practices, SEO, and validation of the PWA which is most important.
Test 1 – Mobile device performance
We begin by presenting the results of the Wiredelta PWA mobile device performance tests. The expected results must exceed 50%, while our performance results stand at 76 out of a hundred, which is acceptable. Had it been in red color, we would have had to troubleshoot the PWA. Below we can also see the major reason, written in red, why we did not get our results higher than 76 of the total 100 points.
That chrome extensions on our computer negatively affected the page’s load performance. So to get a higher score we would basically have to uninstall the chrome extensions or generate the lighthouse test on another device that has no extensions. The rest of the results are accessibility, best practices, and SEO which all stand at 100.
Test 2 – PWA validation for mobile devices
Simply put, the screenshot below shows how the Lighthouse audit uses results generated in test one and validates that our application qualifies as a PWA. The two most important indicators that Lighthouse has considered are if the application is fast and reliable and if the application is installable.
From the screenshot below, we see that it is good news for the Wiredelta PWA. It passed the Lighthouse validation tests with all the markers in green. So, yes, our PWA is fast and reliable as all progressive web apps should be.
Also, the application is installable. As seen above, Lighthouse results show that our PWA app uses HTTPS, registers a service worker that controls the page, and the web app manifest meets the installability requirements. Are you wondering what would be the verdict if the results points were marked in red? You guessed right, the verdict would have been – the application is not a PWA. One would have to troubleshoot the app as per Lighthouse directions.
Step 3 – Testing performance on desktop
So our progressive web app passed the mobile performance and validation tests for mobile devices with flying colors. Will it pass the desktop tests as well? As a matter of fact, it did even better on desktop than it did on mobile. In the screenshot below, we see that the performance of the PWA on a desktop computer is at 93 out of a possible 100 points.
We also see from the screenshot above Lighthouse’s reason why the progressive web app didn’t get the highest score. The chrome extensions we mentioned before still negatively affect page load performance. Basically, if we remove those naughty extensions, our progressive web app would actually score 100%.
Step 4 – Desktop PWA validation
So, our progressive web app is fast, reliable, and installable on a mobile device, which is awesome. We also found that our PWA’s performance score on a desktop device is close to the highest score, which is really good news. Now it’s time to test if the progressive web app can in fact be installed on a desktop device.
Did you ever doubt it? Of course, it’s installable. Anyway, under installable we can see that the Wiredelta PWA uses HTTPS, registers a service worker that controls the page, and the web app manifest meets the installability requirements. Since we met all requirements, our app is definitely a progressive web app, and so is yours if you followed our guide.
Summing up
In a world where cross-platform development is rapidly taking over native development, Progressive Web Applications seem like the answer we have all been looking for. For those who want a PWA of their own, they are faster than native applications, easier to develop and maintain, and more affordable.
Moreover, they are more enjoyable for users as well, as they live in browsers, so they are easy to find and install, and they are super lightweight, saving a lot of storage space.
Not to mention that, if you follow this step-by-step guide, you will be able to turn a website into a PWA in no time. Whether you are building a new website, managing a modern platform, or a legacy system. But, if you still have questions, get in touch with us and our team will answer every one of them.
