Are PWAs ready to take over the world?
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Lipski, Jarek
This talk offers a walk-through of the main PWA features and a comparison how they behave across different platforms (Linux, Android, iOS), on various web browsers (Firefox, Chrome, Safari). Practical code examples will come from Sojourner - a FOSDEM conference companion app. We will also discuss some UX/UI challenges and their potential solutions specific for PWAs. During this talk we will discuss the following aspects of PWA and illustrate them with practical code examples. Performance and network reliability: Service Worker strategies Offline-First operation Persistent Storage: availability, limitations, access request no login required Installation: In-browser via Add to Home Screen (A2HS) From app-store Design: choosing the right design system handling colors, icons and screen mode gracefully At the end we will summarize the state of PWAs in 2020 and for which types of applications they work best. Examples used to illustrate this talk will come from Sojourner FOSDEM conference companion app, written using Vue.js framework.
 So the next talk is progressive apps ready to take over the world. I will show some examples from my little app. I'm Yara Klipsky. Well, I have a little company together with the person. Clouder. Okay. Maybe I can put it closer. Okay. So my name is Yara Klipsky. I live in Paris. I'm from Poland. I currently have a little company. We develop progressive web apps. That's our specialty, what we do other things to. So first question for you, what are the progressive apps? Who knows what are progressive web apps? Just a bit more than that. But yeah, good point. Okay. Who is actually developing progressive web apps? Okay. Quite a few people. Okay. Interesting. So there are actually many definitions of progressive web apps I chose just a random one. It's a set of technologies and it's a bit blurred. The lines are not completely clear. This is just an addition to a web app. We can say it's a progressive enhancement. Yeah. So the typical stuff that we, when we think about progressive web apps are, for example, that they are available offline, they load fast, they use HTTPS always, they are responsive. I will talk about this later. You can install them, you can launch them from your home screen, from your mobile device. Other things and push notifications, I will not talk about this. Okay. So now a little demo. Yeah. So actually before the demo, I wanted to show that I have a question. Who is another question for you? Who is using a Fosdm mobile app here? All right. Almost everyone. Great. Who use this one? Who use this Sergerner? Okay. Couple of people. Great. Thank you. So now I would like to invite you actually, if you want of course to visit this link at the bottom, HTTPS Sergerner Rocks. If you have a minute and take a look, and at the end of the talk, I will ask you for some feedback if you can. I mean, if you're interested, I will be talking, I will not be waiting here. I will continue, but if you want to play with it, I will be very happy. I can talk with you later. It's open source. Well, it's a little app that I created couple of years ago. Okay. So yes, a little demo. So maybe I'll do a short demo on this. Oh, actually, does it work? No, it's not that. Not you. Sorry. Yes. So this is actually my phone. So actually, I wanted to show you a demo on my phone. Yes. So first thing, I will talk about this later. Well, first thing that will happen, well, I can just visit the link. I hope I don't have any further Sergerner Rocks. I can just visit my link and that's how it will look. So it's a website basically. It's loading the entire Fosnum schedule. That's why it takes a bit. Yeah. That's how it looks. I can click on a keynote. I can click on it. We'll come back to this later, this thing that I just appeared. Stay tuned. There are a couple of things. One killer feature actually here that I consider a killer feature is the fact that you notice that there's a lot of things happening at Fosnum. For me, the only way to actually enjoy, actually the second Fosnum, 2013, I think that's 2012. So the second Fosnum I arrived, I discovered mobile apps. This actually allowed me to be forecoming here to take a look on the program and actually decide what I want to see. So for me, the killer feature here in this app, is the fact that you can bookmark things. So you can click on a link and I can bookmark it. So for example, I wanted to bookmark the last one, so I bookmark it and then I can take a look at my bookmarks during the day and I can only choose from the talks I already preselected. So I have some time to actually read the description because each of those talks, I can read the full description. Let's close this. I can read the full description, I can get a bit more informed. By the way, there are also links at the bottom. You can also submit feedback from this app. It's not directly from this app, but yeah. I invite you to send feedback also through the app. So yeah, so that's it for the short demo. I will come back to this later. So coming back to my app. Yeah, let me just finish because it's actually a progressive app. So the thing that is actually interesting is that, I can use, if it's in the same site on the desktop, and I have the same app. I have a different interface because the device is so different that we decided to change completely the interface for the desktop. But yeah, this is the same app. It's basically a website. As I was saying before, the progressive apps are basically websites, as in the definition. Okay. Let's see how are we with the time. Okay, great. So we have a bit of stats. So yesterday we had about 600 visits. It's the same as last. It's like 30 percent more than the last year. But this is not the best metric. So I actually have 165 users who added more than five bookmarks. I consider them active users. I can track it somehow. I will tell you later about this. Actually, you can be completely anonymous with this app, or you can decide to login. Then, well, I obviously wouldn't track you. But yeah, this way, actually I can also anonymously see how many bookmarks people add. So I can see this. The second later user is that actually in December, I also adapted it to another conference. So very quickly, very easily. Basically, this is one function that converts the schedule to a common format. This way, I can use it for a different conference. I changed the interface a bit with the configuration file. So that's actually for FlowCon, which is for software process geeks, agile, this kind of stuff. But cool people. Also geeks, not like those corporates. Yeah, hierarchical managers and stuff. No, no, no, those people are very nice. I recommend in Paris. Okay. So enough about my app. So I want to talk about just the three things about Progressive Web Apps. I wouldn't give you full overview of Progressive. It's much broader subject. We just have 20 minutes. So I just focus on those three things. I invite you to talk about the others. Obviously, what is missing here? Well, one thing I want to talk about that I removed in the end, it was about persistent storage. So you can actually store stuff persistently on a device. So basically, it works like a mobile app. So there is no need to register. There is no need to create an account or anything. I can just run my app and store my data there. It's actually possible. It works across platforms as well. So I can actually never contact any, I mean, I can just download my app and just use it, never connect to the network again. Another thing that is missing here is push notifications. We all hate them. Sometimes they are useful. Actually, for a conference could be, for example, useful if there's an emergency or there's something that could be actually useful to do. I haven't implemented them in the app yet, but I probably do it. Okay. So let's talk about those three things. So the offline first. So the app actually is offline first. So, well, maybe a bit of technology. Okay. So let's talk about service workers for a bit. So actually, service workers are just our proxy, basically a proxy between your app and the network, that allows you to store the data in the proxy. So never contact the network again, for example. Offline first is just one of the options. Actually, you can have all the mixes. So actually, that's what I did in this app. So I'm actually pre-caching all the resources or the static stuff. We call it shell. I pre-cache all the HTML, CSS, and images and everything. The first time you visit site and then it shouldn't be requested again unless it's updated. I will talk about this update in a second. So this is actually, I consider it static. Then there is another very interesting resource that is not so static, which is actually a schedule, which is changing a lot more than I would hope so. I mean, I would need to probably change up the app a little bit. But for this resource, I use a special strategy because in the service worker, you can have different strategies. There's a good resource about this. At the end, I send a link. I add it a link. So actually, what happens here, if you follow the numbers, so the first I have my browser, my page will request the service worker for a schedule, and then the service worker will check if the schedule is already in cache. If it's already in cache, number three, it will respond. At the same time, it will send a request to the network to check if there is a new version. So this way, you can have your schedule immediately visible. I don't have to wait for a network if I'm on a GPR or something or 3G. But in the background, the schedule will actually update. If it updates, that's actually, this is also pretty cool. What we can do, what I can do is I can catch the signal. Exactly, this is because it's changing all the time. So I can show you a quick demo. So actually, this message that you see here, the new schedule is available is actually this. So in the background, I actually send a request. The schedule itself is a couple of megabytes. So it's pretty big JSON file and also pretty expensive to parse. So that's why I make this request in the background. So user can actually, I can either force the user to refresh, but that could be a bit abrupt. Maybe I will do it later. I reckon I should show a message to ask the user, do you want to refresh the schedule now or not? So I can quickly refresh. It's a bit slow to be honest. I need to put it in another thread probably. So now the schedule should be updated. The schedule itself, the talks itself, descriptions, videos, links, etc. The third thing and the third types of resources, I would like to discuss here, are the resources that are actually real time. So this is another killer feature I didn't tell you about. So I'm not caching them at all. So there is a little thingy. I noticed that it's not completely clear what it is. That's why UX UI is very important. But actually, ah, okay, let's continue like this. So UX UI is actually this little thingy, this little symbol means that the room is full. Actually, we can also check this room, but this thing is actually coming from Fosdm. There's a Fosdm API that shows you the room is full or empty. The little thingy tells you that the room is full. I try to save space here. That's why it should be some information about this. But this is another cool thing, and this is actually real time. So if I lose connection, this will stop updating basically or disappear. I don't remember exactly. Okay. So this is about offline. The second offline first, a cool thing about offline first I wanted to show you, is actually the fact that I can search. So I never considered this, but actually, I didn't show you this, but I should actually go offline. You're talking about offline first. So I forgot to do it. So basically, I'm offline, so I can search for progressive web apps, and the search works because it's fully, I have all the index on the local device. So I can search locally without any access to network. You can search for JavaScript. So this is pretty cool. Actually, the way I did it is actually pretty simple. I just search in the JSON file. I do some simple rankings. So the title is more important than the other things. But that's very simple. You can have full search engines in JavaScript on the client side. Okay. Enough about front-end, about the offline first. Now something about installation. So how do progressive apps actually installs? This is pretty magical. Actually, the first time you visit a website, the site installs itself, and the user has nothing to do with it actually. Then there's something that we more consider as an installation. It will be, we call it, add to home screen. So actually, I wouldn't show you this because it's not so simple to show, but there could be a little banner here that I'm implementing that will ask you to add something to the home screen. It basically works on every platform. So it works on, well, I will show you where it works actually. This is it. So on Chrome, it works everywhere, even on desktop. So you can add an app to the desktop on Linux as well. On Firefox, it works only on Android. On Safari, it works on iOS. Actually, the biggest group of my app users actually use iOS, use iPhones. This is pretty interesting. Because I suppose the Android app is good enough, so everybody is sticking with the Android app, the native one. But iOS users seem to like my app. That's cool. So little demo very quickly. So yeah, so basically, yeah, I have wet hands, sorry. So yeah, so the app to home screen basically will add something like this to my screen if I click it, right? And then it will start behave like a normal app. So yeah, it's actually, I'm actually fully offline, right? So it's actually parsing the schedule, because it's pretty big. I should probably optimize a little bit. So the app fully works, right? I can add my bookmarks even, and it will stay offline in my device, and they will synchronize. The way I do it, I use a proprietary software, sorry for that, I use Firebase. I could actually implement it with another one, with the paste, but I haven't had time yet to do it. So yeah, so this is how it looks. So it looks pretty native, right? It looks pretty like an native app. Yeah, it stays as an app. I can switch to it, et cetera. Okay, how much time we have? Four minutes. So the last, yeah, so yes, 10 minutes left. Oh great, because yeah, there's also another five minutes for questions. Cool, I will try to leave some room for questions, because I'm really interested. So if you have some questions, feedback about the app, I'm really interested. Okay, and what is also important is actually we need to update those progressive elements sometimes. So here is actually another, yeah, sorry, it's not very visible. So it says, new version is available, and I can click refresh. So basically what happens with the service worker is that if the service worker detects a new version, it downloads itself, but it doesn't activate itself. It will activate itself next time I visit the site. So what I can do, I can detect this information, there's new version available, and show a message to the user, oh, there's a new version, refresh. If you want to refresh immediately. So actually, this is pretty cool. I saw some discussion yesterday on the, follow them mainly, at least that there could be some issue with one of the native mobile apps, because something, the room names don't match exactly to what's encoded in the app. And it's difficult to update a mobile app, the native app, a day before conference, because even if you do it, even if you release a new version, users will not download it. And here, I can make a new change, and you immediately see this, five minutes later with the continuous integration, it will automatically pop up. So actually, it behaves like a web app, like a website, yeah? So there is no problem of versioning, there is no problem of, this is a big selling point of progressive web apps. So they are always up to date, always fresh, yeah? So this is, yeah, so for example, that's why this is one of the use cases for progressive web apps for me, conference apps. So the stuff that changes quickly, that you need to maybe adapt very quickly, or that's useful only for a few days, and then forgets, right? So I don't need to install anything native on my phone, I just install a little web app, or even not install, if I prefer, if I can prefer, I can add it to my home screen, if I prefer, I can just use it as a website. This is pretty cool. Yes, and the next subject, oh, yeah, sorry, the order is the new worker. So yeah, actually my little Nokia is here, I will try to switch it on, it's actually the battery is actually dead. So oh yeah, it's starting up. So actually, this is the evolution of the design of the interface, I wouldn't show you the intermediate step. So actually, the Sojourner app is a descendant of an old app for Nokia N900 that I discovered a couple of years, I still have it in Nokia, I still sometimes use it. So actually, and the first progressive app that I developed was actually based on this interface, was very similar to this one. And then I collaborated with a designer, and I really suggest you to do it, because especially for mobile devices, the user experience is very important, we have a very limited screen space, right? We have, well, there are normal people out there, I mean, I know Fosname is a bit special, so yeah, you would accept interface like this, but normal, what does colors mean, what does it do? But yeah, definitely normal users much more prefer something more beautiful. Yeah, so I definitely recommend you that look into the design, and actually that's what differentiates your, why can I say product, your projects, right? It's often, I mean, often we forget about this aspect, it's really important. One thing, one important mention I wanted to make is that if you know a bit about the, about the front end, right, so there are design systems, there is this idea to, for example, follow Google guidelines that Google-based material design, and Apple, for example, has human interface guidelines, and there's another thing from Microsoft. So the question is, if I develop a progressive app, what should I do, right? The progressive app can work anywhere. We'll work on Safari on an iPhone, we'll work on my Android, we'll work on a desktop. What do I do? Which interface, which standards do I adapt? And that's a very good question. Actually, yes, you could implement different interfaces for different devices, but that's a mess. That's like a direction going to the native apps, right? This is the same direction that developing separate app for each platform. Well, if you want really good experience, then yes, perhaps you could do it. But what I really recommend you to do is actually develop your own style. Develop your own identity, visual identity, and try to follow it. So actually, the more you diverge from the standard material design of something, the better you will look, because it will be yours. It will be yours or your company, right? Obviously, we live in the commercial context too. So actually, good idea for me is try to diverge, to create something different. Not try to replicate exactly the standard to interface guidelines from anyone. So I think it's an interesting advice to try to make it different, because the more it's similar, but because it will look like material design, but it's slightly different. It's called uncanny valley, right? It looks slightly different, so it feels wrong. So it's better to make it completely different than if it's right. So I didn't completely achieve it. I'm actually basing my design on material design, but pretty much modified. Yeah. So, okay, so just to finish, okay, we are running out of time. So our Progressive Apps ready to take over the works. The answer is it depends. There are some use cases that are much better in. I think conferences are a good example. I think Progressive Apps give us more power as a front-end developer. If you are a front-end developer, give us more, it's just a continuation of the more features to the front-end. And I see them also as a descendant of stuff like Firefox OS. I was a big fan of this one. And the idea to write apps in the web technologies. So I find it interesting. In relation to free open source, I think Progressive Apps could be a step to break the Android versus iOS dual poly. Because if at some point, all your apps, all your important apps are web apps, then you don't care what device you use. It's like for me, for Linux, I can many users, I can just propose Linux because most of the stuff, they use on the web. The most of the apps they use on the web. So I think if we can get more Progressive Web Apps, then perhaps it would be easier to switch between Android, iOS, and maybe some free open source system that will emerge. There would be no friction. Friction would be lower to switch because if I lose all my apps, if I switch the operating system, it sucks. So obviously there are use cases for native apps, so I'm not telling you to only use Progressive Apps, but it's developing, it's in interesting technology. Okay, that's all I wanted to say. Thank you very much. So if you have any questions or feedback, yeah, please, should now or later, if you have time. Do you have some questions? Yeah. Hi. There are a couple of differences between native application and PWA, such as speed and removing cache, how to solve it? You mean, yeah, I mean, if you want to write an AR, VR, up for example, they even start out for this, right? But if you try to do something that requires native power or write a game, I would stick to the native apps, unfortunately, right? So far, but the web is progressing, like what you can do with JavaScript, right? You can write games in JavaScript too. So basically it's just a web app. So, well, they are ready, they are getting ready. But yeah, they will not, I think this is a wrong distinction, actually I have a text here saying, why Progressive Apps versus native is the wrong question to ask. Let's not, I wouldn't ask this question. I think let's use the best tool for the target task. Cheers. Do you use web sockets behind notifications or just like querying all the time the server? No, no, the notifications actually is a mechanism built into the service worker. So the service worker knows that the new version is available and it will send something in my, so it's all happening in the front end. Okay, but... I make an HTTP request to check if the new version is available. So it's querying all the time. Wait. Is it a web socket client behind or just? No, it's not web socket, but if you ask about the schedule, yes, actually it's polling, it's polling every minute, but actually it's not downloading the whole thing because it's checking the itag, the last modified itag. Okay, just tech. Yeah, yeah, so it's checking the header, right? I send the check some or it's modified. Okay, I download the whole thing. So it's not... I think it will be better if you use web socket client, just try for changes and server will notify you about each... You are right, I was thinking about something even better, right? I'm actually using Firebase, as I said, if you know this technology, right? So I could put the whole schedule in Firebase and Firebase will, it's a real-time database, will push me that data. But I wanted to increase the dependency on Google, so that's why I keep it minimal, only to Firebase is actually used for bookmarks to actually synchronize them between devices because if I can actually log in in this app, I didn't show you that. I can log in and then I can have my bookmarks between all the devices the same. I will show it very quickly. Is it okay? It does not matter question. Yeah, try my best. Yeah, so there are very good resources about this. I didn't include them in the talk. But yeah, it's approaching. So actually you have notifications, you have geolocation, you have camera, you cannot ask Bluetooth, as far as I know, for example, from the web yet. So obviously, there will be things that you couldn't do. It's like a website, basically. But as usual, it keeps surprising me how much you can do each next year. But it's really evolving. Like last two years ago, there wasn't a two-home screen on iOS. In 2018, it was added. It's evolving very quickly. So yeah. Yeah, so just to prove it very quickly, I can actually log in. I cannot do my, well, it's not here. Yeah, so I can actually log into this app and then synchronize bookmarks between devices. Okay, I think we run into this. Are there any specific frameworks that make it easy to write progressive web apps? Yeah, good question. I use Workbox. That's the library, very popular one. Sorry, yeah, sorry. So me, in terms of technology, I use Vue.js here. But yeah, the library that actually enables progressive apps is called Workbox. Sorry. Okay, thank you. Thank you, thank you. Thank you.
 So the next talk is progressive apps ready to take over the world.  I will show some examples from my little app.  I'm Yara Klipsky.  Well, I have a little company together with the person.  Clouder. Okay. Maybe I can put it closer.  Okay. So my name is Yara Klipsky.  I live in Paris. I'm from Poland.  I currently have a little company.  We develop progressive web apps.  That's our specialty, what we do other things to.  So first question for you,  what are the progressive apps?  Who knows what are progressive web apps?  Just a bit more than that.  But yeah, good point.  Okay. Who is actually developing progressive web apps?  Okay. Quite a few people. Okay. Interesting.  So there are actually many definitions of  progressive web apps I chose just a random one.  It's a set of technologies and it's a bit blurred.  The lines are not completely clear.  This is just an addition to a web app.  We can say it's a progressive enhancement.  Yeah. So the typical stuff that we,  when we think about progressive web apps are,  for example, that they are available offline,  they load fast,  they use HTTPS always,  they are responsive.  I will talk about this later.  You can install them,  you can launch them from your home screen,  from your mobile device.  Other things and push notifications,  I will not talk about this.  Okay. So now a little demo.  Yeah. So actually before the demo,  I wanted to show that I have a question.  Who is another question for you?  Who is using a Fosdm mobile app here?  All right. Almost everyone.  Great. Who use this one?  Who use this Sergerner?  Okay. Couple of people. Great. Thank you.  So now I would like to invite you actually,  if you want of course to visit  this link at the bottom, HTTPS Sergerner Rocks.  If you have a minute and take a look,  and at the end of the talk,  I will ask you for some feedback if you can.  I mean, if you're interested, I will be talking,  I will not be waiting here.  I will continue, but if you want to play with it,  I will be very happy.  I can talk with you later.  It's open source.  Well, it's a little app that I created couple of years ago.  Okay. So yes, a little demo.  So maybe I'll do a short demo on this.  Oh, actually, does it work?  No, it's not that.  Not you. Sorry.  Yes. So this is actually my phone.  So actually, I wanted to show you a demo on my phone.  Yes. So first thing, I will talk about this later.  Well, first thing that will happen,  well, I can just visit the link.  I hope I don't have any further Sergerner Rocks.  I can just visit my link and that's how it will look.  So it's a website basically.  It's loading the entire Fosnum schedule.  That's why it takes a bit.  Yeah. That's how it looks.  I can click on a keynote.  I can click on it.  We'll come back to this later,  this thing that I just appeared.  Stay tuned. There are a couple of things.  One killer feature actually here that I  consider a killer feature is the fact that you notice  that there's a lot of things happening at Fosnum.  For me, the only way to actually enjoy,  actually the second Fosnum, 2013, I think that's 2012.  So the second Fosnum I arrived,  I discovered mobile apps.  This actually allowed me to be  forecoming here to take a look on  the program and actually decide what I want to see.  So for me, the killer feature here in this app,  is the fact that you can bookmark things.  So you can click on a link and I can bookmark it.  So for example, I wanted to bookmark the last one,  so I bookmark it and then I can take a look at  my bookmarks during the day and I can only choose  from the talks I already preselected.  So I have some time to actually read the description  because each of those talks,  I can read the full description.  Let's close this. I can read the full description,  I can get a bit more informed.  By the way, there are also links at the bottom.  You can also submit feedback from this app.  It's not directly from this app, but yeah.  I invite you to send feedback also through the app.  So yeah, so that's it for the short demo.  I will come back to this later.  So coming back to my app.  Yeah, let me just finish because it's actually a progressive app.  So the thing that is actually interesting is that,  I can use, if it's in the same site on the desktop,  and I have the same app.  I have a different interface because the device is so different  that we decided to change completely  the interface for the desktop.  But yeah, this is the same app.  It's basically a website.  As I was saying before,  the progressive apps are basically websites,  as in the definition.  Okay. Let's see how are we with the time.  Okay, great. So we have a bit of stats.  So yesterday we had about 600 visits.  It's the same as last.  It's like 30 percent more than the last year.  But this is not the best metric.  So I actually have 165 users who added more than five bookmarks.  I consider them active users.  I can track it somehow.  I will tell you later about this.  Actually, you can be completely anonymous with this app,  or you can decide to login.  Then, well, I obviously wouldn't track you.  But yeah, this way,  actually I can also anonymously see how many bookmarks people add.  So I can see this.  The second later user is that actually in December,  I also adapted it to another conference.  So very quickly, very easily.  Basically, this is one function that converts  the schedule to a common format.  This way, I can use it for a different conference.  I changed the interface a bit with the configuration file.  So that's actually for FlowCon,  which is for software process geeks,  agile, this kind of stuff.  But cool people.  Also geeks, not like those corporates.  Yeah, hierarchical managers and stuff.  No, no, no, those people are very nice.  I recommend in Paris.  Okay. So enough about my app.  So I want to talk about just  the three things about Progressive Web Apps.  I wouldn't give you full overview of Progressive.  It's much broader subject.  We just have 20 minutes.  So I just focus on those three things.  I invite you to talk about the others.  Obviously, what is missing here?  Well, one thing I want to talk about  that I removed in the end,  it was about persistent storage.  So you can actually store stuff persistently on a device.  So basically, it works like a mobile app.  So there is no need to register.  There is no need to create an account or anything.  I can just run my app and store my data there.  It's actually possible.  It works across platforms as well.  So I can actually never contact any,  I mean, I can just download my app and just use it,  never connect to the network again.  Another thing that is missing here is push notifications.  We all hate them.  Sometimes they are useful.  Actually, for a conference could be, for example,  useful if there's an emergency or  there's something that could be actually useful to do.  I haven't implemented them in the app yet,  but I probably do it.  Okay. So let's talk about those three things.  So the offline first.  So the app actually is offline first.  So, well, maybe a bit of technology.  Okay. So let's talk about service workers for a bit.  So actually, service workers are just our proxy,  basically a proxy between your app and the network,  that allows you to store the data in the proxy.  So never contact the network again, for example.  Offline first is just one of the options.  Actually, you can have all the mixes.  So actually, that's what I did in this app.  So I'm actually pre-caching all the resources or the static stuff.  We call it shell.  I pre-cache all the HTML, CSS,  and images and everything.  The first time you visit site and then it shouldn't be  requested again unless it's updated.  I will talk about this update in a second.  So this is actually, I consider it static.  Then there is another very interesting resource that is not so static,  which is actually a schedule,  which is changing a lot more than I would hope so.  I mean, I would need to probably change up the app a little bit.  But for this resource,  I use a special strategy because in the service worker,  you can have different strategies.  There's a good resource about this.  At the end, I send a link.  I add it a link.  So actually, what happens here,  if you follow the numbers,  so the first I have my browser,  my page will request the service worker for a schedule,  and then the service worker will check if the schedule is already in cache.  If it's already in cache,  number three, it will respond.  At the same time,  it will send a request to the network to check if there is a new version.  So this way, you can have your schedule immediately visible.  I don't have to wait for a network if I'm on a GPR or something or 3G.  But in the background,  the schedule will actually update.  If it updates, that's actually,  this is also pretty cool.  What we can do, what I can do is I can catch the signal.  Exactly, this is because it's changing all the time.  So I can show you a quick demo.  So actually, this message that you see here,  the new schedule is available is actually this.  So in the background, I actually send a request.  The schedule itself is a couple of megabytes.  So it's pretty big JSON file and also pretty expensive to parse.  So that's why I make this request in the background.  So user can actually,  I can either force the user to refresh,  but that could be a bit abrupt.  Maybe I will do it later.  I reckon I should show a message to ask the user,  do you want to refresh the schedule now or not?  So I can quickly refresh.  It's a bit slow to be honest.  I need to put it in another thread probably.  So now the schedule should be updated.  The schedule itself, the talks itself,  descriptions, videos, links, etc.  The third thing and the third types of resources,  I would like to discuss here,  are the resources that are actually real time.  So this is another killer feature I didn't tell you about.  So I'm not caching them at all.  So there is a little thingy.  I noticed that it's not completely clear what it is.  That's why UX UI is very important.  But actually, ah, okay, let's continue like this.  So UX UI is actually this little thingy,  this little symbol means that the room is full.  Actually, we can also check this room,  but this thing is actually coming from Fosdm.  There's a Fosdm API that shows you the room is full or empty.  The little thingy tells you that the room is full.  I try to save space here.  That's why it should be some information about this.  But this is another cool thing,  and this is actually real time.  So if I lose connection,  this will stop updating basically or disappear.  I don't remember exactly.  Okay. So this is about offline.  The second offline first,  a cool thing about offline first I wanted to show you,  is actually the fact that I can search.  So I never considered this,  but actually, I didn't show you this,  but I should actually go offline.  You're talking about offline first.  So I forgot to do it.  So basically, I'm offline,  so I can search for progressive web apps,  and the search works because it's fully,  I have all the index on the local device.  So I can search locally without any access to network.  You can search for JavaScript.  So this is pretty cool.  Actually, the way I did it is actually pretty simple.  I just search in the JSON file.  I do some simple rankings.  So the title is more important than the other things.  But that's very simple. You can have full search engines  in JavaScript on the client side.  Okay. Enough about front-end,  about the offline first.  Now something about installation.  So how do progressive apps actually installs?  This is pretty magical.  Actually, the first time you visit a website,  the site installs itself,  and the user has nothing to do with it actually.  Then there's something that we  more consider as an installation.  It will be, we call it,  add to home screen.  So actually, I wouldn't show you this  because it's not so simple to show,  but there could be a little banner here that I'm  implementing that will ask you  to add something to the home screen.  It basically works on every platform.  So it works on, well,  I will show you where it works actually. This is it.  So on Chrome, it works everywhere,  even on desktop.  So you can add an app to the desktop on Linux as well.  On Firefox, it works only on Android.  On Safari, it works on iOS.  Actually, the biggest group of my app users actually use iOS,  use iPhones.  This is pretty interesting.  Because I suppose the Android app is good enough,  so everybody is sticking with the Android app,  the native one.  But iOS users seem to like my app.  That's cool. So little demo very quickly.  So yeah, so basically,  yeah, I have wet hands, sorry.  So yeah, so the app to home screen basically will  add something like this to my screen if I click it, right?  And then it will start behave like a normal app.  So yeah, it's actually, I'm actually fully offline, right?  So it's actually parsing the schedule,  because it's pretty big.  I should probably optimize a little bit.  So the app fully works, right?  I can add my bookmarks even,  and it will stay offline in my device,  and they will synchronize.  The way I do it, I use a proprietary software,  sorry for that, I use Firebase.  I could actually implement it with another one,  with the paste, but I haven't had time yet to do it.  So yeah, so this is how it looks.  So it looks pretty native, right?  It looks pretty like an native app.  Yeah, it stays as an app.  I can switch to it, et cetera.  Okay, how much time we have?  Four minutes.  So the last, yeah, so yes, 10 minutes left.  Oh great, because yeah, there's also  another five minutes for questions.  Cool, I will try to leave some room for questions,  because I'm really interested.  So if you have some questions, feedback about the app,  I'm really interested.  Okay, and what is also important is actually  we need to update those progressive elements sometimes.  So here is actually another, yeah,  sorry, it's not very visible.  So it says, new version is available,  and I can click refresh.  So basically what happens with the service worker  is that if the service worker detects a new version,  it downloads itself, but it doesn't activate itself.  It will activate itself next time I visit the site.  So what I can do, I can detect this information,  there's new version available,  and show a message to the user,  oh, there's a new version, refresh.  If you want to refresh immediately.  So actually, this is pretty cool.  I saw some discussion yesterday  on the, follow them mainly,  at least that there could be some issue  with one of the native mobile apps,  because something, the room names  don't match exactly to what's encoded in the app.  And it's difficult to update a mobile app,  the native app, a day before conference,  because even if you do it,  even if you release a new version,  users will not download it.  And here, I can make a new change,  and you immediately see this,  five minutes later with the continuous integration,  it will automatically pop up.  So actually, it behaves like a web app,  like a website, yeah?  So there is no problem of versioning,  there is no problem of,  this is a big selling point of progressive web apps.  So they are always up to date, always fresh, yeah?  So this is, yeah, so for example,  that's why this is one of the use cases  for progressive web apps for me,  conference apps.  So the stuff that changes quickly,  that you need to maybe adapt very quickly,  or that's useful only for a few days,  and then forgets, right?  So I don't need to install anything native on my phone,  I just install a little web app,  or even not install, if I prefer,  if I can prefer, I can add it to my home screen,  if I prefer, I can just use it as a website.  This is pretty cool.  Yes, and the next subject, oh, yeah, sorry,  the order is the new worker.  So yeah, actually my little Nokia is here,  I will try to switch it on,  it's actually the battery is actually dead.  So oh yeah, it's starting up.  So actually, this is the evolution  of the design of the interface,  I wouldn't show you the intermediate step.  So actually, the Sojourner app is a descendant  of an old app for Nokia N900 that I discovered a couple of years,  I still have it in Nokia, I still sometimes use it.  So actually, and the first progressive app  that I developed was actually based on this interface,  was very similar to this one.  And then I collaborated with a designer,  and I really suggest you to do it,  because especially for mobile devices,  the user experience is very important,  we have a very limited screen space, right?  We have, well, there are normal people out there,  I mean, I know Fosname is a bit special,  so yeah, you would accept interface like this,  but normal, what does colors mean, what does it do?  But yeah, definitely normal users much more prefer  something more beautiful.  Yeah, so I definitely recommend you  that look into the design,  and actually that's what differentiates your,  why can I say product, your projects, right?  It's often, I mean, often we forget about this aspect,  it's really important.  One thing, one important mention I wanted  to make is that if you know a bit about the,  about the front end, right, so there are design systems,  there is this idea to, for example,  follow Google guidelines that Google-based  material design, and Apple, for example,  has human interface guidelines,  and there's another thing from Microsoft.  So the question is, if I develop a progressive app,  what should I do, right?  The progressive app can work anywhere.  We'll work on Safari on an iPhone,  we'll work on my Android, we'll work on a desktop.  What do I do?  Which interface, which standards do I adapt?  And that's a very good question.  Actually, yes, you could implement different interfaces  for different devices, but that's a mess.  That's like a direction going to the native apps, right?  This is the same direction that developing  separate app for each platform.  Well, if you want really good experience,  then yes, perhaps you could do it.  But what I really recommend you to do  is actually develop your own style.  Develop your own identity, visual identity,  and try to follow it.  So actually, the more you diverge  from the standard material design of something,  the better you will look, because it will be yours.  It will be yours or your company, right?  Obviously, we live in the commercial context too.  So actually, good idea for me is try to diverge,  to create something different.  Not try to replicate exactly the standard  to interface guidelines from anyone.  So I think it's an interesting advice  to try to make it different, because the more it's similar,  but because it will look like material design,  but it's slightly different.  It's called uncanny valley, right?  It looks slightly different, so it feels wrong.  So it's better to make it completely different  than if it's right.  So I didn't completely achieve it.  I'm actually basing my design on material design,  but pretty much modified.  Yeah.  So, okay, so just to finish, okay,  we are running out of time.  So our Progressive Apps ready to take over the works.  The answer is it depends.  There are some use cases that are much better in.  I think conferences are a good example.  I think Progressive Apps give us more power  as a front-end developer.  If you are a front-end developer,  give us more, it's just a continuation  of the more features to the front-end.  And I see them also as a descendant  of stuff like Firefox OS.  I was a big fan of this one.  And the idea to write apps in the web technologies.  So I find it interesting.  In relation to free open source,  I think Progressive Apps could be a step  to break the Android versus iOS dual poly.  Because if at some point,  all your apps, all your important apps are web apps,  then you don't care what device you use.  It's like for me, for Linux, I can many users,  I can just propose Linux because most of the stuff,  they use on the web.  The most of the apps they use on the web.  So I think if we can get more Progressive Web Apps,  then perhaps it would be easier to switch  between Android, iOS, and maybe some free open source system  that will emerge.  There would be no friction.  Friction would be lower to switch  because if I lose all my apps,  if I switch the operating system, it sucks.  So obviously there are use cases for native apps,  so I'm not telling you to only use Progressive Apps,  but it's developing, it's in interesting technology.  Okay, that's all I wanted to say.  Thank you very much.  So if you have any questions or feedback,  yeah, please, should now or later, if you have time.  Do you have some questions?  Yeah. Hi.  There are a couple of differences  between native application and PWA,  such as speed and removing cache, how to solve it?  You mean, yeah, I mean, if you want to write an AR, VR,  up for example, they even start out for this, right?  But if you try to do something that requires native power  or write a game, I would stick to the native apps,  unfortunately, right?  So far, but the web is progressing,  like what you can do with JavaScript, right?  You can write games in JavaScript too.  So basically it's just a web app.  So, well, they are ready, they are getting ready.  But yeah, they will not,  I think this is a wrong distinction,  actually I have a text here saying,  why Progressive Apps versus native  is the wrong question to ask.  Let's not, I wouldn't ask this question.  I think let's use the best tool for the target task.  Cheers.  Do you use web sockets behind notifications  or just like querying all the time the server?  No, no, the notifications actually is a mechanism  built into the service worker.  So the service worker knows that the new version  is available and it will send something in my,  so it's all happening in the front end.  Okay, but...  I make an HTTP request to check  if the new version is available.  So it's querying all the time.  Wait.  Is it a web socket client behind or just?  No, it's not web socket,  but if you ask about the schedule,  yes, actually it's polling,  it's polling every minute,  but actually it's not downloading the whole thing  because it's checking the itag,  the last modified itag.  Okay, just tech.  Yeah, yeah, so it's checking the header, right?  I send the check some or it's modified.  Okay, I download the whole thing.  So it's not...  I think it will be better if you use web socket client,  just try for changes and server will notify you about each...  You are right, I was thinking about something even better,  right?  I'm actually using Firebase, as I said,  if you know this technology, right?  So I could put the whole schedule in Firebase  and Firebase will, it's a real-time database,  will push me that data.  But I wanted to increase the dependency on Google,  so that's why I keep it minimal,  only to Firebase is actually used for bookmarks  to actually synchronize them between devices  because if I can actually log in in this app,  I didn't show you that.  I can log in and then I can have my bookmarks  between all the devices the same.  I will show it very quickly.  Is it okay?  It does not matter question.  Yeah, try my best.  Yeah, so there are very good resources about this.  I didn't include them in the talk.  But yeah, it's approaching.  So actually you have notifications,  you have geolocation, you have camera,  you cannot ask Bluetooth, as far as I know,  for example, from the web yet.  So obviously, there will be things that you couldn't do.  It's like a website, basically.  But as usual, it keeps surprising me  how much you can do each next year.  But it's really evolving.  Like last two years ago, there wasn't  a two-home screen on iOS.  In 2018, it was added.  It's evolving very quickly.  So yeah.  Yeah, so just to prove it very quickly,  I can actually log in.  I cannot do my, well, it's not here.  Yeah, so I can actually log into this app  and then synchronize bookmarks between devices.  Okay, I think we run into this.  Are there any specific frameworks  that make it easy to write progressive web apps?  Yeah, good question.  I use Workbox.  That's the library, very popular one.  Sorry, yeah, sorry.  So me, in terms of technology, I use Vue.js here.  But yeah, the library that actually enables  progressive apps is called Workbox.  Sorry.  Okay, thank you.  Thank you, thank you.  Thank you.
are_pwas_ready_to_take_over_the_world_0_143.png are_pwas_ready_to_take_over_the_world_144_935.png are_pwas_ready_to_take_over_the_world_936_2615.png are_pwas_ready_to_take_over_the_world_2616_4211.png are_pwas_ready_to_take_over_the_world_4212_4379.png are_pwas_ready_to_take_over_the_world_4380_7319.png are_pwas_ready_to_take_over_the_world_7320_7391.png are_pwas_ready_to_take_over_the_world_7392_7499.png are_pwas_ready_to_take_over_the_world_7500_8075.png are_pwas_ready_to_take_over_the_world_8076_8351.png are_pwas_ready_to_take_over_the_world_8352_10331.png are_pwas_ready_to_take_over_the_world_10332_12119.png are_pwas_ready_to_take_over_the_world_12120_15431.png are_pwas_ready_to_take_over_the_world_15432_16763.png are_pwas_ready_to_take_over_the_world_16764_17063.png are_pwas_ready_to_take_over_the_world_17064_17159.png are_pwas_ready_to_take_over_the_world_17160_17315.png are_pwas_ready_to_take_over_the_world_17316_17363.png are_pwas_ready_to_take_over_the_world_17364_18227.png are_pwas_ready_to_take_over_the_world_18228_18287.png are_pwas_ready_to_take_over_the_world_18288_18479.png are_pwas_ready_to_take_over_the_world_18480_19403.png are_pwas_ready_to_take_over_the_world_19404_19727.png are_pwas_ready_to_take_over_the_world_19728_21611.png are_pwas_ready_to_take_over_the_world_21612_21875.png are_pwas_ready_to_take_over_the_world_21876_23087.png are_pwas_ready_to_take_over_the_world_23088_26315.png are_pwas_ready_to_take_over_the_world_26316_26399.png are_pwas_ready_to_take_over_the_world_26400_31259.png are_pwas_ready_to_take_over_the_world_31260_35279.png are_pwas_ready_to_take_over_the_world_35280_37931.png are_pwas_ready_to_take_over_the_world_37932_39143.png are_pwas_ready_to_take_over_the_world_39144_39407.png are_pwas_ready_to_take_over_the_world_39408_40079.png are_pwas_ready_to_take_over_the_world_40080_40343.png are_pwas_ready_to_take_over_the_world_40344_40467.png