Progressive web apps are a powerful alternative to traditional app store apps. And the world is beginning to take notice. More and more browsers are adding PWA support. Maybe you’ve noticed a popup on your favourite website saying “install this as a web app” – this is a progressive web app.
In this article we’ll take you through all you need to know about progressive web apps, and how to install them on your device.
- How to install a PWA on Windows
- How to install a PWA on Android
- How to install a PWA on macOS
- How to install a PWA on iOS
What is a Progressive Web App (PWA)?
A relatively new and unknown concept, the basic idea of a progressive web app (PWA for short) is that a website can be downloaded to desktop or mobile devices as a native app.
An app icon will appear on the home screen of your device, which, when opened, will look and feel just like an ordinary app.
That means you can install any of your favourite websites on your device. As long as they have enabled PWA on the website, that is.
Advantages of using a Progressive Web App
When installed, PWA’s run in a browser-like state, without the browser interface and window borders cluttering your screen. It looks like a full screen application that you’ve downloaded straight from the app store.
PWA’s can be updated regularly without the user having to enter the app store. Many online SaaS apps release updates for their web based platform before their native applications.
Have you ever had to visit the website of an app because the native app doesn’t include a feature? Having a PWA instead of the native application keeps you up to date faster. This is where progressive web apps really shine.
There are also benefits for the web developer. A web developer can focus on one platform, the web, and put all their time and resources into making the best possible user experience.
There are small disadvantages to using a Progressive Web App
Although able to be offline, progressive web apps generally need an internet connection to run. Many natively downloaded apps have an “offline mode”, which allows you to continue to do the basics until an internet connection is restored. With mobile internet connections commonplace, this isn’t a huge concern.
In addition, there is no app store involved, which means the concept isn’t well known or easily accessible. It’s also difficult to know which websites can be installed as a PWA unless you try it out yourself.
Website developers need to implement PWA functionality directly into their websites. Not all websites are jumping on board – either because they are developing native apps, or the concept is still relatively unknown.
How to install a Progressive Web App on Windows
Using the Microsoft Edge browser:
Installing a PWA on Windows through the default Windows browser Edge is the easiest option.
Step 1: Using Microsoft Edge, visit the website you want to install as a progressive web app
Step 2: Click on the 3 dots menu in the top right of Edge
Step 3: Click “Apps” > “Install this site as an app”
Step 4: Follow the prompts and select your desired options
You’re done! Now you can find the PWA in your start menu, and it’ll be on your taskbar if you selected that option.
Using the Chrome browser:
Step 1: Using Google Chrome, visit the website you want to install as a progressive web app
Step 2: Click the install button next to the web URL bar (shown below)
Step 3: Follow the prompts and you will find the newly installed app on your taskbar
How to install a Progressive Web App on Android
Using the Chrome browser:
Step 1: Using Google Chrome, visit the website you want to install as a progressive web app
Step 2: If the website is a fully functional PWA, you will see a popup like “Add App to Home Screen” – press this and skip to step 5.
Step 3: If it’s not a fully functional PWA – click on the 3 dots menu in the top right
Step 4: Click “Add to Home Screen”
Step 5: Press “Add” on the popup that appears
That’s it! You should now have a new app icon on your home screen
How to install a Progressive Web App on macOS
The macOS default browser Safari doesn’t handle PWAs all too well. It will be treated as a basic shortcut and doesn’t appear in the Applications Finder window.
It’s best just to use the Chrome Browser on your macOS.
Using the Chrome browser:
Step 1: Using Google Chrome, visit the website you want to install as a progressive web app
Step 2: Click the install button next to the web URL bar (shown below)
Step 3: Follow the prompts and you will find the newly installed app in your launchpad or dock
How to install a Progressive Web App on iOS
Using the Safari browser:
Step 1: Using Safari, visit the website you want to install as a progressive web app
Step 2: Press the “Share” button (center button at the bottom of the screen)
Step 3: Scroll down and press “Add to Home Screen”
Step 4: Press “Add”
Step 5: Go back to your home screen, you should now have a new app icon
Is AssetFrog a PWA?
Yes! We believe in the power and versatility of progressive web apps. The AssetFrog web app was used in all the screenshots on this article.
We have put the idea of an app store based app on the back burner and instead decided to focus solely on our web application.
AssetFrog can be downloaded as a progressive web app on any device. Simply follow the “How to” that matches your device above.
