Progressive Web Applications and Offline Defining PWA

[00:00:00]
>> Mike: So with that, let's begin with talking about what a progressive web app is, right? It's it is a term of art these days, and it was coined I believe in 2014 by Alex Russel and Jake Archibald, who are Google Developer advocates that work closely on the Chrome team.

[00:00:22] And it was an effort to put a name behind a forward looking web experience, right? Something that is no longer looking at the oldest most limited browser that we have to support, but rather adopting this idea of progressive enhancement. So we say progressive enhancement as a core tenet and the idea is, where something is available to enrich our users experience?

[00:00:51] We use it, we don't wait for everyone, all of the browsers that we need to support to build in what we need. It's not the lowest common denominator that is driving the way we think anymore. It is allowing us to have a rich experience with these superhero characteristics for those modern browsers that can support it and then gracefully, degrading or falling back to a more basic experience.

[00:01:20] And this would be what like maybe your IE10 user or IE9 user might see. A common characteristic of PWAs or Progressive Web Apps is that they surprise and delight users by delivering things that people don't typically see in web applications, and this includes working offline, the ability to have push notifications.

[00:01:44] These are things we typically see in native apps. These used to be reasons where you'd say, a web experience is not, that's not going to cut it for our flagship mobile app, web technology is holding us back. And the idea is we're starting to chip away at that and now there are fewer and fewer little reasons that would sort of kick you into developing a native app.

[00:02:13] Nowadays it's almost like if you need games, if you need hardware accelerated graphics, things like that, now maybe that is what propels you into we must use a native app. But more and more, like the web is offering better primitives and options for us that look pretty promising.

[00:02:33] As far as what these options are, and again, I'm borrowing this from Alex Russel and Jake Archibald. So these are ten characteristics that they list and these are sort of the superhero powers. So progressive web apps, they are progressive in that they work for a variety of browsers.

[00:02:57] But where modern features are available, like the ability to send push notifications, we take advantage of that. They're responsive because mobile web traffic has eclipsed desktop traffic in every way. In page views, in number of unique users, we're past every benchmark that we care about. Mobile web that is not the niche experience anymore, it is the the main sharer of most business' traffic.

[00:03:29] So progressive web apps should work regardless of flaky or absent network connections. And this is traditionally, a big limitation that you have to deal with when building for the web. If you have no Internet, you can't download that java script for that CSS, your AJAX doesn't work. These are things we need in order to do anything interesting at all.

[00:03:55] Progressive web apps are app like, meaning you are prompted to add them to your home screen with the home screen icon, and you can launch them from there, potentially without the browser UI. Like the back button in the bookmark button, it can be a sort of full screen web experience that a user might forget that they didn't get this from the App Store.

[00:04:17] They might be so seamless that it trick them to that extent. PWAs should get up to date content when it's available without a complex installation process. So raise your hand if you enjoy app updates when you have 14 apps that I need to download. And that's like a gigabyte of Swift code and libraries that are compiled just for that device.

[00:04:42] We wanna be able to stay at most a couple hundred kilobytes and be able to send a new file over to the user seamlessly. Where they don't have to click anything or install anything. Security is a big deal, so we've got about 56% of the Internet on HTTPS now and it is linearly increasing.

[00:05:07] So many of these technologies we'll be working with today require HTTPS. And so, it was an opportunity where certain things were getting rewritten, and these standards were developed. And while we were at it the idea is, well, let's say that this feature only works if we're operating in a secure way.

[00:05:30] And so we will start to see that become a common theme. And that by the way is why the setup process for this project is a little complicated. Currently and hopefully in the future, this will be less necessary or unnecessary. Currently we need to build our own self-signed certificate that we can use so that even in development mode we're working in HTTPS.

[00:05:55]
>> Mike: PWAs are discoverable so they should have rich metadata associated with different URLs so that when you search on a search engine, you got a rich tile that comes back with all that needs structuring data around it. And not sort of the Wikipedia article not to ripe with the Wikipedia but that is the basic experience.

[00:06:17] If the web browser is a document viewer, that is a site that is comprised of documents. PWA should be re-engageable and we will see that today in the form of notifications. Meaning the user can do something, close their tab, walking away, and then get a notification that sorta pulls them back into the app.

[00:06:40] Again, this might have been the leading reason, or it was very high on the list for reasons people opted out of using web technology for mobile apps. They needed push notifications and there was only way to get that.
>> Mike: PWA should be durable and by that we mean they should be able to store data in a way that survives across different browser tab lifetimes.

[00:07:07] And you're probably used to cookies, local storage, things like that, we're not going to be using those today. They're very limited and we'll go into reasons why they are limited, but that is what we mean by durable. Like we store data in a way that it doesn't evaporate as soon as the user walks away.

[00:07:24] And then finally, one of the great things about the web that is influenced native mobile apps is URLs. The ability to hand someone something to click on and they'll get just to the right view that they were shared, that someone shared to someone else. In native apps, this is done by way of deep links.

[00:07:47] So if you've ever seen Spotify:// and then some song title you can click on that and Spotify will kinda grab that and respond accordingly. PWA should bring along all of these important defining characteristics of web applications while introducing this native paper as well. So we're trying to have the best of both worlds not compromising any of that web goodness.

[00:08:15] So, a lot to think about, we're going to touch on all of this, we have 14 exercises plan for you. And we're going to take every one of these boxes, which it is gonna be a very well rounded PWA experience, will get today and tomorrow.