With the further development and focus on the mobile industry and technology, it’s no wonder that web developers and designers are looking for better and simpler ways to have a more cohesive integration of mobile and desktop websites to all platforms, and this is where PWA comes in.
Join our Head of Front End, Themi Tsiotas von Pfaler, as he re-introduces PWAs, or Progressive Web Apps and finds out the things you should know about PWAs.
To start off, this video will tackle a simplified take on PWAs. Themi will explain to you what PWA is, it’s history, who pioneered this idea, and its current progression in the tech world—more specifically the app world, though it’s now also implementable on desktops. You will also know the feature it offers to its users, being able to add it to your home screen without it being an app, the ability of push notifications, and offline capabilities.
We also took a deeper look on the comparison of Single Page App, or SPA—which is what a website is composed of—and the Progressive Web App, which is like a super-powered SPA.
Along with all of this, Themi also tackles how Progressive Web Apps are developed and can be integrated to different websites, the key component of Progressive Web App, the pros and cons of PWAs.
Watch the full talk, along with the full transcript, about this PWA below:
Transcript
Hello, My name is Themi and I am head of Front End. And today, I wanna tell you a little bit about progressive web.
So, the agenda for today is—I’ll go through giving you brief explanation about what is PWA. I’ll talk about some of the features that you can do: add to home screen, push notification, off line. And, I’ll talk about what is the difference between this PWA and a normal Single Page Application.
And then I’ll talk about the service worker and Ill come back to that, and then wrap it up with pros and cons, and then at the end give a conclusion.
So, progressive web app, it’s like a normal website but you’re trying to use the newest features that are available by the browser. So, with progressive web apps, the focus is very much on mobile websites.
It’s trying to make them be more and more similar to mobile apps. So, Google, they have really been pushing a lot this whole PWA to make it able to have push notifications in websites and being able to store parts of the website offline, which are things that we already know from normal application that we can download from the App Store or Play Store. And actually, the funny thing about this PWA that Google have been pushing a lot is actually not a new thing.
Apple, back in 2007, which is more than 10 years ago, they actually introduced this concept about web apps and trying to make really, really impressive websites, web apps, that can run with using native features and so on, which is something that they spoke about in a keynote.
But then they kind’a forgot about it and they didn’t really get back to it and really made it the new thing, and at that point, they didn’t have the app store on their road map.
So, it kind’a make sense that when they decided to push forward making the applications in the app store, they didn’t wanna continue down the road of making web apps. But then Google, they saw an opportunity.
So, one of the features is adding to the home screen. So, this means that you can go into a website on Android and it will have a banner that will say “Do you wanna add this website to your home screen.”
And when you press on it, it will open up looking like any other app that you have installed with an icon and splash screen and these things. And then when you click on it, it’s actually gonna open up—it’s just a website—but it’s gonna open up in an isolated web browser where there will be no navigation bar.
So, you won’t be able to go back and forth, and you won’t be able to have multiple tabs open, and you can’t see the URL in these things, but it’s actually still a website. So, that means that you can suddenly make the website that looks more and more similar to native applications.
One of the other features that you can do is push notifications. So, even though it’s a website, normally with notifications, we only see this in native apps, but now you’ll be able to get notifications that will say like “You haven’t used this app for some period of time so open it up.”
Or, maybe you don’t wanna download the Facebook app, so instead you just use the Facebook website as a PWA, and then you get notifications. And with this, you can skip the App store and get direct interaction with the users.
But, this is sadly not available on Apple yet, on iOS. Apple, they haven’t been…even though they were the ones who started this, they can be very slow at adapting all these new features; so, one of them is push notification. So, I think that they will definitely be pushing it more and more, so you will very soon see that this will be possible.
The other thing that’s really, really cool with PWAs is that, suddenly, you will be able to view a website when you’re out flying or you’re in the tube, and it will be able to stall some static content.
So, if use the example again with Facebook, we could image that we would be able to brows through the feed that we’ve already seen, and we can even make comments, and then they will just be queued up so when you actually get out of the tube and you have connection again, then it would be able to push it up.
And all of this, we already know this from native apps, so this is not something new, but with websites, this is not something we really were able to do before. I think this is one of the big powers of PWAs.
So, I told you in the beginning that I wanna compare it a little bit with SPA, with single page applications. So, actually, a PWA is just an SPA with super powers, meaning that an SPA is just normal website that we—you know, most websites today is actually made as SPAs which is just that you have some kind of framework that adds in content dynamically and it’s not like in the old days where every time you click on the link, everything would refresh and you would wait for it.
Now, it all happens just like you do it from Facebook, and things they change dynamically in all this.
So, when we are selling this PWAs to our clients, it’s just like an add-on to single page applications. That’s basically what it is. But, the reason why made the arms a little bit smaller now is that—I mean, it is a single page application with superpowers, but we yet don’t have like the full support on iOS and android.
So, there’s still a lot of features that need to be introduced and tested a bit more before they really become a powerful new framework.
Because of the no full support, it means that even though we wanna push this and ask our clients to try to be cutting edge and have a PWA, it also means that we can’t really promise them that it’s gonna work perfectly on all the different platforms, yet, at least.
So, because Google have really the front-runners for this, they have been pushing the Microsoft team a lot, and they actually—right before the Google I/O conference they held some weeks ago, they actually announced that Microsoft has finally supported the service work, which is a big part of this PWA.
So, that’s really, really interesting to see that, you know, we see all these other big companies that they’re actually finally catching on. And the same with Safari, in every single release, they keep adding more and more features. So, there is no full support yet, but with time, I’m sure that we will get there.
So, what is it that makes it even possible to have PWA and all this offline and push notifications and so on? It’s all done by this little guy here called the Service Worker. You can think of it—and this is technical—you can think of this as a proxy that works as an intermediate between the client and the server.
So, whenever you visit a website right now, you can kind’a think of it as like you are talking directly to it, and then it just serves you whatever you’re seeing. But now, with the Service Worker, you will actually be communicating with the Service Worker that will then go to the server and get all the latest and newest information.
So, actually, to make this slide even more accurate, I could have taken a mini version of this and added it next to this one, because that’s what makes it possible to all this offline support.
So, if this was cut and you’re in a tube, then you would just be taking with the Service Worker that deliver you whatever you downloaded the last time; which also means that the next time you load the website, you don’t need to go to the server and get the newest information, you can just get it right there, which means that performance suddenly also improves a lot, because you get the content almost instantly.
I got a good question from Vlad about how and is this just some ordinary framework that you have? And actually, it doesn’t have anything to do with the framework. This is just a built-in feature in the browser.
So, you could have just plain HTML with nothing special on it, and the only thing you really need is just some Javascript with a very simple condition. You can check if the Service Worker is in the navigator. I’m not gonna go into detail about this, but basically, if this one is true, that the Service Worker is in the navigator, then done, your browser has support for the Service Worker.
But, there is a lot of different things you can then do when you register your service worker to do a different kind of caching because sometimes you can have different strategies.
Maybe you wanna have the newest data every single time, but maybe your static is super important to be updated every time, you can think of it like when you go to a site where it delivers you news articles, then you wanna have the newest data all the time. You don’t wanna wait until you manually do a refresh.
But on other sites, that’s maybe, let’s say, just showcasing something where everything is static, the text is static, the images is static, then why not have the service worker deliver this to you immediately instead?
So, in here, you can write a lot of code that handles all these different caching strategies and all this different thing that you’re gonna do. But, you don’t wanna spend too much time doing all this because you’re probably gonna do the same for most projects. So, Google, they actually made a toolbox.
So, when you have a project, you can just install this toolbox, and then you very easily just configure this, and when you initiate it, you just tell it what kind of strategy you want and always let it just fall back to whatever they think is the most used option.
In many of the frameworks that we use here like React, Angular and Vue, when you install these, they actually already come built-in with the Service Worker. So, you don’t really need to do much, it already comes out of the box.
So, to wrap it up with some of the pros and cons—this is more like a general website pro and con for the first item, which is about the design is uniform. It means that it’s really good that you can build a website where it will look the same on iOS and Android or whatever computer you have.
But, it also means that you’re not really taking into consideration that each platform actually is a little bit different, like with Android you have to tap on the top, and on iOS it’s on the bottom, and so there are different things here and there that you might wanna consider when you are building, or maybe it’s not important for you, and then, you know, building a website is a good option.
Another pro is you can skip the app store. So, if it’s important to get out to the customer, or out to the user, really fast instead of going to the App Store, having a PWA is one great way to do that. It also means that you don’t need to get all these validations from Apple, which we know can sometimes be very, you know, very annoying.
And then, another pro is that the more and more this grows, it gets better and better support for all these different native features such as geolocation and sensors and the camera and audio and Apple Pay. And then, as I said before, with the design, it supports both web and mobile, so in one solution with, in theory, one developer you can a very, very far reach which can be really great if that’s what you wanna support.
And also, it is a website, it’s really easy to send out new releases and bug fixes because you can do it immediately. You don’t need to get it approved through the App Store. I know with the Play Store when you send out new releases, it’s really fast, but if you consider all the different platforms together, this is definitely the fastest one.
So, some of the cons, as I said earlier, it really lacks support for iOS. For instance, a big one is the push notifications. And also, a lot of people have mentioned that when you have a PWA, it’s great that you have all these offline caches and all these things, but Apple, they have to build it to their operating system that if a specific app or PWA hasn’t been used in a few weeks, then they just delete the cache which means that the next time you open it up, you start in fresh.
So, sometimes that can be fine, but other times, it can be really annoying if it’s important that it keeps storing this information. Which is something that actually just works perfectly on Android because they store it in a file, kind of, so that means that it will never be deleted?
Then there are also some issues around the whole PWA that it opens into like this full-screen immersive thing, but what if you open an external link? Well, then it needs to go out of this PWA and then you also kind’a lose the state of where the PWA. So, there are a lot of like, you know, corner cases that they still need to figure out how to solve.
And then, I think of the most important ones as well is the background sync, that is super unreliable. So, if you build a native app, it’s really easy to have different task running in the background.
But, when it comes to PWA, you can’t really rely on it, at least not in iOS because in iOS they, as I said before, they can just release the memory for that app because it doesn’t priority over other things.
And then, when you are actually designing the website, you need to remember that you need to have a back button, because like suddenly the navigation is removed from the top of the button.
So, if you have a normal website and you’re like “Yeah, yeah, we’ll just make it into a PWA,” and you haven’t thought about the back buttons, then after the users click a little bit around, then they can’t really get back. They need to force quit the app and then do it from the beginning, which obviously is a really bad user experience.
So, the conclusion on this is that it will be really nice if we can get rid of this “there is no internet connection.” So, we’ll of course, miss in Chrome, we can play with this little dinosaur when there’s no internet, but we can’t rely 100% on it yet because there isn’t the full support from iOS.
We can make our websites ready and build them so they should be able to support it, but it still takes time before we’ll be fully there where the PWA will be a good substitute for native apps, because another really important point is you will never really get this interaction when that you have when you use a native app like the transitions and animations and all this very fluid interaction. I mean, when it’s a website, it’s a website, and it’s easy to see.
Yes, that was all.
Any questions?
Woman: You said like ‘bug fixes immediately,’ does the users still need to go and redownload?
Themi: No, not necessarily because with the Service Worker, it will check and see that there is a new version, and then it will refresh it.
Woman: Is there a way that you can disable that one on your mobile though?
Themi: Yes, you can configure the Service Worker in multiple different ways. It could be that it automatically just always pull the newest version, but you can also trigger it to say that it comes with like a small pop up or like a question where it says ‘do you wanna have the newest version?’
Because maybe you don’t wanna force the newest version on the user for some reason, and then they can do it themselves. Let’s say if the user is currently—if it’s an email website, and they’re writing a long email and then ‘ah, there’s a new update,’ and then you refresh, then obviously whatever you are writing would be gone. So, in those cases, it could be good to like prompt it to the users instead of just forcing it to update.
Woman: I’m sorry—just—you know with iOS, do you think it’s likely that they will try and open up to support it, because it does kind’ago against them, obviously with the App Store, and it does mean you can get around some things that they will never push through with anything like tobacco-related or anything that seems kind of… [?]
Themi: I mean, they have already supported a lot, like you can already add it to your home screen, and you can already get a lot of the features. The only thing that’s really lacking is push notification and then making a lot of the other features more stable. I mean, I think they will do it, but maybe they won’t do it as fast, you know, they should because they don’t want to. They want people to go to the app store.
Woman: You have to have Safari, right?
Themi: Yes.
Woman: Is there a reason why you can’t use it though, like, if you have an iPhone with Chrome?
Themi: Yeah. So, Chrome is actually just a shell that uses that Safari underneath. And actually, it’s using an old version of Safari, so that means it will probably even take longer time before the Chrome browser will be able to use this new PWA features.
Man: Who do you think is killing it in the PWA game? [What brands are leading? 00:20:13.9
Themi: Alibaba, they’re really pushing this a lot. And, actually, if you go to Google’s website, they have a section about PWA where they also actually list a lot of good cases with like people who moved over to PWAs, and yeah, Alibaba is one of the keys.
They explained like how user retention—I think it’s called right [?]—is increased a lot because they moved over to PWA, because suddenly, performance has improved a lot, they users they instantly—almost instantly—will see content.
And we already know that from a lot of other surveys that has been done around websites that if a user needs to wait more than 5 seconds for content to load, then they will just drop it. They won’t use it. But suddenly, you can get a completely different performance by using the PWA.
Man: If a client was interested in kind of exploring PWAs, obviously it’s case dependent, but let’s say that there’s a really good case study for a particular client, do you think PWA is at the point where they can invest in it solely? Or do you think they should have the website, native apps and trial PWAs, [instead of just that one 00:21:37.8?
Themi: Yeah yeah. It’s not—I mean, it can do many of the same things as you could with native, but it really depends on the occasion, I really depend on your project. Like, what is it that you want? If it’s very simple and it’s just showing news, then, I mean, there isn’t even a point to have a native app, maybe you could just go with the PWA. But, it’s always a difficult question for us.
Apps, native apps, they also kind’a send like a different kind of signal, it kind of—you know—”I’m professional, so I have an app in the App Store.’ If you only have a website, it’s kind of like, you know, “Why don’t you also have an app?” Because usually with native apps, you would add like some more feature that makes it so that the website, the app, isn’t just a one to one.
Man: Last question for me. Are there geographical, like, differences in updates. So, it’s like the East and West PWA or is it…?
Themi: I actually don’t know.
Man 2: [Inaudible 00:22:45.1]
Man: Yeah. It’s interesting to me. Interesting to see how it work [inaudible 00:22:49.2]
Themi: Yeah. But I think most new websites, because when you start a new project in React or in Angular, it comes with it shipped in, so I mean, I think most websites, all the new websites that are gonna be made or have been made within the last one year, they probably already support it without even knowing it because you actually need to go in and disable if you don’t want it.
So, that’s also, I think, a good way to kind of push the browsers to kind of like step up and get this to be supported because it is definitely the future. And you wanna push the browser, you want it to be better and better at performing because we get more and more—we want it to be faster and faster and faster.
Indlægget An Introduction to Progressive Web Apps (Video) blev først udgivet på Nodes UK.
