loading...
Cover image for The easy way to turn a website into a Progressive Web App
BeCode

The easy way to turn a website into a Progressive Web App

pixeline profile image Alexandre Plennevaux Updated on ・4 min read

What is a Progressive Web App?

Basically, a PWA is a website that, when visited on a mobile phone, can be saved on the user's device and thus feels and behaves much like a Native application. There is a loading screen, you get to remove the browser's chrome, and, should the connection drop, it still displays content. Best of all it boosts user engagement : if Android's Chrome browser (not sure about other mobile browsers) detects that the website is a PWA, it prompts the user to save it on its device's homescreen using the icon of your choice.

Why is it important?

Simply put: it simplifies the end-user setup process.

PWA are good for your client's business. Alibaba, the Chinese Amazon, notices a 48% increase in user engagement thanks to the browser's prompt to "install" the website (source).

This makes the effort totally worth fighting for !

This bounty is possible thanks to a technology called Service Workers that allows you to save static assets in the user system (html, css, javascript, json...), alongside a manifest.json that specifies how the website should behave as an installed application.

Examples

These were made by myself using the same technique described here.

Many more examples are available here : pwa.rocks

Setup

Turning a website into a PWA may sound complicated (Service workers whaaaat ?), but it's not that difficult. Follow my lead and you'll have one by the end of this article !

1. requirement: https instead of http

PWA only work on a website running on a secure domain (behind https:// instead of http://).
These are usually very hard to set up manually, but thanksfully, if you have your own server, you can use letsencrypt to make that super easy and automatic. And... FREE.

2. Tools

2.1 lighthouse test

  • the lighthouse test is an automated test created and maintained by Google that test websites against three criteria : Progressive, Performance, Accessibility. It gives a score in percent for each, and advises on how to solve each issue. It's a great learning tool. Lighthouse test result for didiermotte.be
  • realfavicongenerator.net
  • the UpUp.js library

2.2 realfavicongenerator.net

realfavicongenerator.net takes care of the visual layer of your PWA. It generates the manifest.json file mentioned above, alongside all the versions of your icons necessary when saving the website onto any mobile device, and an html snippet to add to your page's <head> tag.

2.3 service workers, via upup.js

Service Workers is a javascript technology. I found it hard to grasp for my tired and impatient brain, but luckily, a smart girl from Germany pointed me to a javascript library by Tal Atler, that makes it über easy to make your website behave nicely when the connexion drops. danke schön, Ola Gasidlo !

Just do the quick UpUp tutorial and you're good to go.

2.4 The Manifest

Edit the manifest.json file that RFG generated for you. It should contain at minimum these entries: "scope", "start_url", "short_name", "display". Here is a working sample:

{
    "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"
}

More information is available at developers.google.com.

3. Methodology

  1. Use Realfavicongenerator and generate the html and image code. Add them to your website code.
  2. Publish on your https domain.
  3. Do the lighthouse test.
  4. Analyse results.
  5. Fix each issue one by one.
  6. Go back to 3, rince and repeat.
  7. Iterate until you get as close to 100 everywhere, and 100 in "Progressive".
  8. Test on your mobile phone and see what happens. With chance, on Android you'll see a popup at the bottom, inviting you to save the website onto your phone homescreen!

Deeper into the rabbit hole...

Here is a sample PWA project I made using a Github Page, live coded for my juniors at BeCode : visit its Github Page with your mobile phone to test it. Visit its repository to inspect the code.

You can find all the information you need on PWA in this book:

Building Progressive Web Apps

.

That's it! Happy PWA-ing!


Your PWA is ready: how about you learn how to automate its deployment using Git ?

Discussion

pic
Editor guide
Collapse
hachi8833 profile image
hachi8833

I'd like to translate the article dev.to/pixeline/the-easy-way-to-tu... into Japanese and publish on our tech blog techracho.bpsinc.jp/ for sharing it if you're OK.

I make sure to indicate the link to original, title, author name in the case.

Best regards,

Collapse
pixeline profile image
Alexandre Plennevaux Author

Sure ! As long as you indicate the links and authorship, feel free to translate it into Japanese. "Aligato !"

Collapse
hachi8833 profile image
hachi8833

Thank you for the permission! Sure I do.

Collapse
rustyingles profile image
RustyIngles

Hi Alexandre, thank you for the very helpful article. Having built many websites over the years I'm now looking into PWAs as a way of offering different builds for clients. This is a great step forward in that. Thanks again for sharing.

Collapse
pixeline profile image
Alexandre Plennevaux Author

I share pretty much the same story ! Happy I could help a bit!

Collapse
rustyingles profile image
RustyIngles

It's very helpful, thank you. Out of interest, was the WordPress PWA more difficult? I'm looking to build a PWA for Joomla

Thread Thread
pixeline profile image
Alexandre Plennevaux Author

The hard point to solve for me was "what content should I show when there is not connection?" and once you have that figured out, it's just a matter of having WP make it available to the ServiceWorker.

Thread Thread
rustyingles profile image
RustyIngles

Ok thanks. Something for me to think about

Collapse
the_fln profile image
Francois Lanthier Nadeau

I like that post. Mucho.

Just shared it with the colleague who wrote this one: PWA Example: Progressive Web App E-Commerce with GatsbyJS. 🤘

Been a year since you first wrote it. Anything you'd change?

Collapse
pixeline profile image
Alexandre Plennevaux Author

Hi! Thank you. As a matter of fact, I 've kept updating it. Eventually, with a public repository of a PWA boilerplate.

Collapse
kristof0425 profile image
Kristóf Dombi

Thank you, Alexandre, for wrapping up the topic of PWAs! I didn't know anything about upup.js, so it was truly an insightful read.

Collapse
pixeline profile image
Alexandre Plennevaux Author

My pleasure. This library should definitely be more popular !

Collapse
pranavlute profile image
pranavlute

Hi,

I'm having website developed in codeigniter and having index.php in the root folder, so can I convert my website into PWA..

I'm trying to migrate it but it's giving an error..

Is there any problem with .php files in PWA

Collapse
pixeline profile image
Alexandre Plennevaux Author

Hello!
The short answer is : no problem !

PWA is a frontend technology. PHP is a backend technology, so since CodeIgniter is a MVC framework, you should probably work on the Views to include the necessary javascript, manifest, ... files.

Collapse
georgesmith17 profile image
georgesmith17

As for me the best way to turn website into ios app is building it from scratch. In this way you get great opportunities of native development, you can review approach to some aspects...in general rebuild your project as something new (being as the same time old)

Collapse
alexporubay39 profile image
Alex Porubay

I agree with this picture, application should be set in one click to attrach more users. I have a nice article about web App and web site development difference designmodo.com/web-application-int...

Collapse
mangekalpesh profile image
Kalpesh Mange

I'm currently in the process of creating a PWA with angular cli tools like @angular-cli/serviceworkers. Can anyone show me a direction towards it? A blog link or something like that? Angular4 and above, using the CLI.

Collapse
jertzee profile image
Jert Zee

Hey! I have a website (for sexual education) and in some countries, mainly in South Africa, users take too much time loading the website, I don't know if I should make my website into a PWA or is it better only use AMP? for which kind of websites would you recommend to use PWA?

Collapse
pixeline profile image
Alexandre Plennevaux Author

PWA is well suited for your use case, especially if the content does not change that often. I would stay away from AMP, honestly.

Collapse
webintoapp profile image
Web To App

Hey Alexandre.

Greate tutorial!

I'm the author of the 'Web Into App' (webintoapp.com). The WebIntoApp allows you to turn any website into a native App for Android and iOS. You can create a FREE or a Dedicated APP, online, within a minute.

Feel free to try it at: webintoapp.com

Collapse
kodcx profile image
Shawn

Nice work here! I like most the different resources that you’ve provided to help with this

Collapse
leob profile image
leob

Brilliant write-up!

Collapse
yokim profile image
Yokim Pillay

Great information, thanks for this!

Collapse
ravisavsani profile image
Ravi Savsani

Any tutorial for adding push notification using firease/one-signal to this pwa?

Collapse
pbouillon profile image
Pierre Bouillon

Wonderful, thanks !

Collapse
modjoinc profile image
Habib El Maaza Gomez

Thanks for this great insight ;)
UpUp rocks...and so do you

Collapse
guillaumekreit profile image
Guillaume-Kreit

The earth is flat

Collapse
pixeline profile image
Collapse
peter_filina profile image
Peter Filina

Actually, I find more interesting to transform native mobile apps into PWAs rather than webs. Replacing mobile apps with PWAs is the only way to truly universal apps. But it will be a bit harder.

Collapse
mangekalpesh profile image
Kalpesh Mange

True that! I'm just waiting for all browsers ahem Safari to support PWAs. We shouldn't be needing a store to get apps from. The web & a browser is all one shall needeth! :P

Collapse
thebhushanp profile image
Bhushan Patil

Alexandre, great article.
One question, can we have single code base for WebApplication and mobile app for PWA?

Collapse
pixeline profile image
Alexandre Plennevaux Author

yes, that's the whole point of a PWA. But then, on iOS you'll be more limited than on android.