This will be a do-as-you-read article, where I will provide you the base code and the code that you can use to try it along to build a basic PWA.
PWA - Progressive Web Apps
PWA stands for Progressive Web Apps. PWA is a web app, which can be displayed in the form of a regular App on a phone ( platform-independent) and also works like a regular responsive website on the internet. It is like building a usual website, using the same technologies that you would use, but giving that extra functionalities and advantages of Progressive Web Apps. It is light, fast and secure.
What goes into a Progressive Web App?
You can build your website mostly the way you would always, considering you have set up a responsive layout and works on majority of the browsers. It consists of Javascript mainly and uses Service Workers, in which the server of the PWA is saved in the userโs web browser, and from time to time new feeds are loaded into it. This is the main reason of the speed of a PWA. So these service workers takes care of features which we will be talking about below.
Read more about the Advantages and Disadvantages of PWA here
Article No Longer Available
Convert any website* into a PWA in just 3 simple steps
Features of this PWA that we're building
- Works responsively on deskop and mobile
- Works Offline
- Can be installed on desktop and mobile like an App
- Extremely light weight
1. Build the basic website
The first step would require you to build your simple website using the steps that you usually would. Websites are built using the basic building blocks such as the HTML, CSS, and JavaScript. There are a few things that you need to make sure:
- When you deploy the website, make sure you serve through HTTPS ( running it locally is an exception )
- Make sure you build a responsive site, that works responsively on both Mobile and desktop You're good to go when you have these setup.
To help you get started with the step one quickly, you can clone my sample github project:
2. Create a Web App Manifest file
The Manifest file is a JSON file that has the metadata about your PWA like the name, short_name, start_url, the scope, the icons for the PWA, the Theme color, the background color, and how your PWA should display.
Create a manifest.json in the root folder of the project and fill in the JSON such as the below one.
{
"name": "Stick-it Notes by Tharun",
"short_name": "Stick-it",
"start_url": "index.html",
"scope": "./",
"icons": [
{
"src": "contract.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "contract.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffd31d",
"background_color": "#333",
"display": "standalone"
}
In the index.html, add the link tag to link to the manifest.json file so that it knows that there is a manifest file to use.
<link rel="manifest" href="manifest.json">
If you noticed the contract.png, that is the icon of the app. You can create your own by using any tool of your choice or check out a generator like https://realfavicongenerator.net which generates the tags and favicons that you need for your site.
Now your site is installable.
3. Adding Service Workers
A service worker is a JavaScript file that is completely asynchronous and runs on a separate thread, that takes care of intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
It works even when the website is not active, as this is necessary to deliver the push notifications. It also cannot access the DOM directly. It helps us enable the feature of caching, which helps us run our web app offline.
Now let's do this last step to create our PWA
Add this line of code to the existing JavaScript file or create a new one and link it. In this project we already have a linked JavaScript file, we will use this file to register our Service Workers.
In the myscripts.js
if ("serviceWorker" in navigator) {
// register service worker
navigator.serviceWorker.register("service-worker.js");
}
Now time to automatically generate the service-worker.js file. We will be using a NPM package called sw-precache.
In the command line/terminal
$ npm install --global sw-precache
Once it is installed, run the below command, make sure you are in the same path as your project root directory, and wait for the eye candy
$ sw-precache
Hurray!
Now your website is completely converted into a PWA and is ready to roll. You can now go to free hosting services such as Netlify and host your GitHub repository there and watch the fun.
You can notice the Add Stick-it to Home screen which will install your PWA to your phone.
Consider Subscribing to my YouTube Channel https://youtube.com/c/developerTharun
Written by,
Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun
Top comments (24)
Works! Thank you
Glad it helped you๐
Thank you ๐
Glad it helped.. thank you๐
Do you have any tips for debugging why the "Add to homescreen" button may not appear on mobile? As that's the issue I'm having :(
Nvm - sorted it! Apparently htaccess rewrite's stop the "Add to homescreen" from appearing.
Ah I see.. then what should we do to resolve it?
Just comment any redirects out like I have and it works :) Worth noting I'm not using any js framework, my PWA was very basic - haha.
Even I build PWAs without any framework. That doesn't mean it's basic, it means you know to do stuff without the help of a framework. ๐ Good work ๐
Good start to PWA, looking forward for more articles on it.
Thank you ๐
Well written ๐ฏ
Thank you๐
Can you explain more - what does it mean for the website to be installed, and what will the user see as a result?
I'm thinking of Google Docs or Gmail, versus Steam or Zoom or Slack. If I understand correctly, all of these are PWAs. But Docs and Gmail always run in a browser tab, and they feel like websites that happen to still work if your internet connection goes down. Steam, Zoom, and Slack all run in their own windows, have their own icons in the start menu, and need to be explicitly installed by the user, even though their special desktop app looks like it's just a re-skinned web browser. You can run them in a browser tab without downloading, but the features are different. Often sign-in is only available in a browser tab, but other features (e.g. playing a Steam game or making a Zoom call) are only available in the desktop app. A common pattern is that the desktop app will automatically open a browser tab when you need to sign in, and the browser tab will prompt you to open the desktop app when you try to access desktop-only features. If I send you a link for a Zoom call, you can open it in your browser like a normal link, and then your browser will ask for permission to open the desktop app where you can actually join the call.
Hi,
I have videos, where I demo you the installation of the PWA - Progressive Web Apps on both Mobile and Desktop. Hope it helps.
Installing on a Mobile
Installing on Desktop
To clarify further, Zoom, steam or slack need not be PWAs but can be a regular desktop app. A regular desktop app is downloaded by you from a website, in say
.exeformat for example, and you install it by using the Wizard.Whereas a PWA is a single click away from installing , and is installed by the above methods.
Hope the video gives you more clarity. Let me know if you still didn't get it, would be happy to help ๐
You can try installing on : bit.ly/stick-it-notes
Well presented demo
thanks!
Was waiting for this one! Thanks! ๐ฅ๐
Glad it helped. ๐
Arey Arey. That was awesome.
๐ Thank you.
Thank you!! Very useful!
Thank you! Glad it helped! ๐
Why do I find myself always googling up this article when I want to convert a website to a PWA? It's addictive, init?