People with laptops sitting in a cafe
Hi Attila! From your precious experience, can we define “[The Website’s Name]” will be a Progressive Web App? Thanks, Matilde
This is the kind of email I get out of the blue, on a Sunday night from my fairly non-technical friend and client, Matilde. While I’m happily munching away on pistachios and watching an episode of House of Cards, this email pops up on my screen. On a Sunday night…
Now, what you’ve just read is a carefully constructed paragraph, not just me showing off my weekend habits, or unnecessarily repeating the word “Sunday”. What you’ve just read is the most deafening alarm bell a web developer can ever hear. It’s akin to the dry email you’d get from HR before delivering the news you’ve got four weeks to pack your shit up, and get lost, or something like this notice from the Housing Department:
Fake, but funny eviction notice
It’s the kick in the arse, slap on the face from left to right, then right to left, the ice-bucket challenge without the challenge but double the ice, reading the news of Trump winning the elections, and the Brits voting for Brexit. Yeah! It’s that serious, and it’s that bad!
Let us got forth and dissect the situation, shall we? Let’s make abstraction of the fact that Matilde is also a friend, let’s simply look at her as a generic client, a client who gets in touch with you. On a Sunday night…
- your client — who is otherwise fairly non-technical — is thinking about a new (some might consider trend) web development entity: Progressive Web Apps (PWAs)
- your client is thinking about PWAs on a Sunday night — when most people are either still hung-over or simply relaxing in front of the TV — and is anxious to find out more information about this, so shoots off an email, then and there
- your client has concerns about her future — otherwise small, and in the grand scheme of things insignificant — website not being categorised as a PWA
What’s alarming, is that all of the above comes from the client. The client is inquiring about something that us, developers should be pushing as standard in a product. OK, sure, some of us do. Maybe you do, just like I pushed responsive design in 2011 and refused to build anything not responsive since. But as with responsive design, it took three or four years until people took it seriously. I know senior developers, who back in 2011 were a lot more experienced than I was, and were considering it a gimmick. Well, it wasn’t. And PWA’s aren’t either.
Progressive Web Apps are the first genuine attempt at kicking amateur coders out of their comfort-zone.
If you think that’s harsh, let’s look at what the basic requirements of a PWA are:
- Progressive — Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet. — Every browser! Not just Chrome, not just Edge, not just Safari or Mozilla. E-v-e-r-y up to date browser. And not just on your machine!
- Responsive — Fits any form factor: desktop, mobile, tablet, or whatever is next. — Oh wow! So responsive design is not a gimmick?!? Shocker! Still relying on Bootstrap classes? Stop. Learn CSS media queries. Takes 2 hours to learn the basics, yet enough to be standards compliant.
- Connectivity independent — Enhanced with service workers to work offline or on low-quality networks. — If you know off the top of your head what a service worker is, like this article. I suspect I’ll get very few likes… Let’s not even get into making a Wordpress or Joomla site work offline. Ya crazy?!?
- App-like — Feels like an app, because the app shell model separates the application functionality from application content. — Yeeehaaa! Sounds a bit like MVC or MVW, something many web developers out there only know by name. All you jQuery and Wordpress snippet copy-pasters, go back to the books, you ain’t ready for the real world just yet. Web design agencies telling you otherwise? Don’t listen to them. They’re never at the forefront of web technologies, they’re bottom-feeders, not industry-shapers.
- Fresh — Always up-to-date thanks to the service worker update process. — I can’t even… Reading through the documentation alone can be a bit mind-boggling even for experienced developers. This is not a child’s game any more, comrades. Not a child’s game at all…
- Safe — Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with. — OK, so you probably know what this is because GoDaddy said you need to pay extra, and you might have heard that Google penalises sites that aren’t served via HTTPS, in a similar fashion as it penalises sites that aren’t … you guessed it, responsive!
- Discoverable — Is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it. — OK. So, the amount of code out there on the web that does not respect W3C standards is staggering. Forget semantic HTML, we’re not even there. It’s plain invalid code that only appears to work because conscientious gals and guys at Google, Apple, Microsoft and Mozilla made sure they built browsers that are idiot and lazy-proof. Add an x to your .html extension or run a screen reader on it and see how it all turns into a big pile of stinky code-manure. And that’s just mentioning W3C. Manifest? Service worker registration…? Bah!
- Re-engageable — Makes re-engagement easy through features like push notifications. — Yeah, your client will definitely want this bit, because whether you like it or not, the web has become this infinitely long high-street where everything is for sale, including you, and if there is nothing and no one to pull people into the “shops”, then — to them — there is no point to it. And they want you to build something that makes people come back. Over and over again.
- Installable — Allows users to add apps they find most useful to their home screen without the hassle of an app store. — This is where you rethink your “become a native app developer” strategy once your website business fails. Yes, your website business will fail, and fairly soon, but you may want to expand on that knowledge and look into PWAs instead. Web technologies are displacing pretty much any customer-facing development type there is: books, magazines, websites, web apps, mobile apps, desktop apps, IOT, etc.
- Linkable — Easily share the application via URL, does not require complex installation. — Now, this you get! Finally something you’re really familiar with. Hit it DJ!
DJ Kat Stoll da’Tung (a cat dressed up) in front of mixers
But wait! Before you go ahead and host a rave party with DJ Kat Stoll da’Tung up there, you might want to hold off for a second. It gets worse… Yes, worse. Much worse. The stark opposite of better. If until now you were able to fool your clients into thinking they had this awesome web presence by throwing technical jargon into their “blinky-blinky” eyes, with PWAs you won’t be able to any more.
Google is actively working on a tool called Lighthouse. In laymen’s terms, Lighthouse is a (currently beta) plugin anyone can add to Chrome — and as of version 60, baked into Chrome’s developer tools — press a button and check if their/or any other web presence qualifies as a PWA. It most likely won’t, and they’ll get scored on it. As an example, I ran the tool on the Lighthouse page itself:
PWA score for Google’s Lighthouse project
What’s both alarming and awesome about this report is the fact that it tests the page for more than just PWA conformance, and it’s objective — failing the very site that promotes PWA testing. There’s performance, best practices and accessibility that gets checked as well, and it’s pretty darn accurate too.
For the first time ever in the history of the web, there’s an official, freely available tool developed by industry leaders that looks at web content in a holistic manner.
This is huge for a number of reasons, some of which are valid already, while others will become within just a couple of years:
- Clients can have a better idea of the actual quality of their site or web app, without having to sift through a myriad of tools and reports, and effectively half-learn web development while they do so. They can track the evolution of their web application and have an informed discussion about failing items with the developer.
- Clients will have a better idea of what’s a must these days when it comes to developing a site, and why custom development can cost a small fortune sometimes.
- Developers on the other hand can support their estimates with industry standard reports, making the client feel at ease about the money they spend on their web presence.
- Developers are forced into learning standards and adhering to them. The one thing I always admired about engineering in general is how it was always based on standards, and I never understood why the web wouldn’t be like that, or at least why people would gloss over it most of the time. This ends.
- Developers, probably for the first time, are not being forgiven for cutting corners. And why should we be? When Volkswagen manipulated their CO2 emission results by messing with standards the world flipped out. I am sure no one wants their car to just be thrown together, shrugging 90% of the industry standards off with “if it doesn’t wobble, it’s probably fine” type attitude.
Ain’t no need for App Stores — PWA
This is a touchy subject, because there’s pros and cons to having app stores for each ecosystem out there.
The cons are universal and it comes down to having to go through the often tedious process — an art-form and science in itself — of getting an app onto the app stores, and requiring a user to log into that app store one way or another so that Microsoft, Apple and Google can take their (arguably) fair share of the sales.
The pros are a bit less obvious, especially in Google and Microsoft’s case, where apps are not at all or very poorly reviewed, and literally any crap — even an app which sole purpose is to show an image of a turd — can be submitted to the store and get accepted. However, in Apple’s case there is some reviewing, which results in a cleaner, and somewhat safer shopping experience. All however, do promote standards and uniformity. Even if your app’s sole purpose is to show the butt of a chicken laying an egg every time you tap the screen five times, it has to adhere to certain standards, and I’m all for enforcing standards.
PWAs however are changing that, and I am actually quite surprised to see Google themselves leading the way in pushing the standard. It makes me wonder what their app store strategy is going to be once PWAs become the norm. But who cares about tech giants? Ultimately, it comes down to us, developers and how this affects us — because it bloody does!
I know, there are plenty of us who try to do things the way they’re meant to be done, but let’s be honest, even the best of us have “thrown stuff together” at some point to either “ship it” or because the client was the ten times stingier reincarnation of Uncle Scrooge. This won’t fly any more. There’s an actual check-list you must adhere to if you want to consider your app a PWA, and if you sold it as one, and it turns out not to meet all the requirements, well, then, as a web developer you’re liable.
No more selling it as a web application when in fact it’s just a poorly coded Bootstrap website, borked together with no clear understanding of how much of the framework you actually need or what media queries are. It either meets the requirements, or it does not. It’s either a horse or a donkey, but no more passing off a donkey as a horse.
No more riding the Wordpress/Joomla bandwagon. Finally, I can tell my clients why going with a Wordpress or Joomla site is a terrible idea and prove it in a matter of seconds. Now, of course, there are Wordpress evangelists out there who will tell you to go shove it, Wordpress is awesome, it can be a PWA, just add (water) this plugin and all your problems are solved. This is going to sound harsh and uncalled for but the world is oversaturated with developers who live in this “microwavable web presence bubble” and think they can code just because they copy-pasted a Wordpress loop and pressed install on 19 plugins half of which do things like fade things in and out, show you a subscribe modal every 10 minutes and make those two not clash with each other.
Guilty Wordpress “developers”…
Wordpress is a great example of an otherwise great idea fallen into the wrong hands, a spiralling category 5 shit-storm where every instance of a site out there is some reincarnated Frankenstein of itself. And there’s people still out there delusional enough to promote Wordpress as a PWA, going to the extreme lengths of downright lying about what the standard is about. Look at that, and then look at this. Not quite the same, is it? And I haven’t even mentioned accessibility yet…
Yo! ‘Sup up with the stick and the shades? — Accessibility
You see, there are these people out there whom the world seems to have forgotten about. Not Apple, they’re good at this. But the web world. I bet 9 out of 10 web developers don’t know anything about WCAG, Wai-Aria, or what A11Y stands for. How many of you self-proclaimed, snazzy, hip coffee-shop developers sat down researching how blind people use your shiny new app or website? Did you know that Tinder is actually the only fully accessible dating app out there? Did you know that a visually impaired person (they actually don’t mind you calling them exactly what they are — blind), often uses their smartphone with the screen completely turned off and relies heavily on us writing W3C standard-adherent and semantic HTML and that 99% of the time the JavaScript you thought was so cool — and 300 of your Github buddies forked — actually created a keyboard and mouse-trap? Ya didn’t, did ya?
Molly Burke explaining how she uses technology as a blind person
Why? Because you, and/or your manager/product owner never cared. Just like you get out of the way when you see the white stick on the sidewalk, not giving another thought to how that gal/guy actually got from home to Starbucks nicely dressed without getting robbed, run over by the garbage truck, or land face-first in the nearest ditch, you also never thought how they navigate the internet, and whether you’re actually enabling them to use your content or downright putting obstacles in front of them. While most nazis would disagree, a disabled person, is not a burden on society, they are part of it, often contribute to it and make the world a better place for all of us. Don’t believe me? Udacity and Google have jointly launched a free course on accessibility, go, take it, then come back enlightened, and like this article. Not because this article is so great, but because I deserve a like for steering you towards the light. Pun intended…
You can always add salt later, right?— Best Practices
Salt? More? Sure, you can. But as my mum keeps saying, “it ain’t gonna taste the same, boy”. And she’s right. Makes the difference between “chilly con carne” and “boiled rice with tasteless stuff on the side”. Add all the salt you want, if your tastebuds are even half as refined as mine, you’ll notice something’s off.
Same goes for web development. There’s an exhaustive tendency out there for developers to say something can be “added later”, “bolted on”, “layered on top”, “extended”, “expanded”, “built upon”, “improved”, “updated”, “some made-up term”, and so on, and so forth. Look, I am all for updates and improvements, scalability, modularity, expanding, extending, you name it, if it’s something that makes the product better, then it’s a great thing to be done, and it must be done, but here’s the thing: none of the above expressions and terms can and should be applied to best practices.
The term itself “best practices” implies it’s best, as it is. You either apply it, or you don’t. There’s “bad practice” and _“best practice”. N_othing in between. No fifty shades of grey for you to choose from. It’s either black or white. You either apply the necessary best practices or you’re in the dog-house. It’s that binary.
And now your client can also prove you wrong, can sue you in court and make you recode the whole thing for free because you couldn’t be arsed to do it the right way the first time around.
Judge Judy closing a case.
Best practices are there for a reason, and are based on — by now — decades of experience and other people’s mistakes. They’re not a barrier, they’re not there to hinder your creativity and hacktivist attitude. By all means, experiment, break things, innovate, but not at the expense of best practices and quality code live on the web, and on people’s machines, because…
Wait. It’s still loading… Hmm... OK, here we go — Performance
It matters. It ultimately all comes down to this. No matter where your code runs, it has to be performant enough to offer a good user experience, and funnily enough PWAs are all about that. Heck, in my opinion PWA is synonymous with UX and should be seen as interchangeable concepts. I still find it baffling that most developers, designers, companies and recruiters see UX as a science related to design, when it so clearly isn’t. If you don’t adhere to best practices, you don’t take into account web development and accessibility standards, and don’t develop your product as a Progressive Web App — maybe not today — but soon enough, people will have a bad experience with your product, and will leave. Your users will move somewhere else, you client will ditch you for a developer who might even be junior compared to you, but takes all of the above seriously and thus creates a PWA instead of some botched together excuse for a site that you proposed building out of a free Joomla template.
So… Will the real web developer please stand up?
Sit yo ass down!
Don’t though. You’d probably be lying to yourself and the rest of the world. The sad truth is, none of us are, not from where I’m standing, and not the internet I’m browsing.
Most of us are ignorant, arrogant cowboys who thought that we can get by with anything, individually and collectively contributing to the big pile of bit-manure the web is today.
A landfill of half-loading sites smelling of console errors, an unwelcoming, illegible world for the disabled and the playground of delusional hipsters who thought “doing the Wordpress track” on Treehouse was their ticket to fame and glory.
An ecosystem of tech meetups, startups, hackathons and coder dojos, all of which by themselves would be great if we wouldn’t have forgotten how to write proper code that works for everyone everywhere in the meanwhile.
Buzzwords like “semantic HTML”, “responsive design”, “UX” , “accessibility” are taken just as casually as they’re dropped into conversations, most of the time leaving them exactly there, in the conversation, never to see the light of day.
So yeah, “sit yo ass down” and start learning. All of it. PWAs are not a child’s game, and it’s the first attempt at taking the web seriously. None of us is an expert at Progressive Web Apps, not even those of us who tried to do the right thing all along and progress as much as possible throughout the years. Luckily, if you kept your eyes wide open, and your ears to the ground, you’re almost there, and developing PWAs will become natural fairly quickly, provided your skills include solid programming, empathy and a holistic understanding of the web. If not, you might want to reconsider your career, ‘cause web development just got serious.
For the rest of us, let’s make the web great again…
Let’s make the web great again!
Attila Vago — writer of codes, blogs and things that live on the web. Programming polyglot, pragmatic doer, member of the “taking care of business” crowd, with a no nonsense attitude. An easily inspired inspirational individual with a strong predilection towards most things nerdy, good, carnivorous food, and Lego. Uses a Mac. Runs at 6 a.m.
HackerNoon and Quora author.