International JavaScript Conference 2019
October 23 2019, Munich, Germany
International JavaScript Conference 2019
Video
Progressive React Apps | Sebastian Springer
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
159
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

Sebastian Springer is a JavaScript developer at MaibornWolff in Munich and is mainly concerned with the architecture of client-side and server-side JavaScript. He is a JavaScript consultant and lecturer and regularly conveys his knowledge at national and international conferences.

About the talk

A Progressive Web App with React isn’t finished just by integrating a Service Worker. That task is completed automatically for you on the initialization of the project. However, the actual work begins just after this point. The PWA can be installed on a target device in just a few steps. With the right architecture, it is finally possible to make the application work completely offline. This requires the data that the components of your application need to be stored locally and kept in sync with the server. In addition to these aspects, the browser provides numerous other interfaces that bring the application closer to native apps. In this presentation, we will take a look at the steps that make an ordinary browser application a fully-fledged PWA.


Share

I'm here to talk about Progressive web apps and cats and react. 00:07 Leave out the cats. So what is this about this is? Progressive react 00:17 Progressive web apps applied to react so what do you need to think about when you are implementing your react 00:26 application and you wanted to be a little bit Progressive so yeah, I will come out some of 00:35 the basics but I hope you will learn how to put pwa in in a real world application. 00:45 I brought you two very very very small pwas made in react so I can show you some code. 00:55

That's me, if you're interested in me or buying me just get in touch with me. This is one of our applications. 01:05 As I said, it's very small and very simple and it's just for demo purpose. It's a crap application. So we're talking to 01:16 a back-end. It's something everyone needs. So it's another to do application. And it 01:26 should be a pwa. So yeah. Who has ever used a pwa of 01:36 you? Yes, not abused but used. just used 01:46 so what the heck is a pwa the most popular one? is this 01:56

the mobile Twitter website With lunch with this is very very good 02:05 example of a pwa. And this is mostly referred as the best example of a pwa because they 02:15 did a very very good job in implementing it so if we want to do something like Twitter mobile, what do we have to do or 02:25 at least how do you find out? What is a pwa? Just go for Chrome double door double slash so I can smoke internals and then 02:35 you get all the service workers listed. And now we want our application to be listed here as well. 02:45

What does replication need to do it needs to run on all available application available Platforms in the web 02:57 and there is a lot so you have your mobile phone if your desktop computer screen readers, which also consume 03:06 web or text browsers, which also consume the web and the idea behind a pwa is it runs everywhere? 03:16 So there is some work for us to do. The platforms are slightly different. So if you 03:25 imagine. Viewing your application on the mobile phone is a little bit different to viewing it on a desktop PC or 03:35

a screen not viewing but hearing it on the screen reader. end a very very 03:45 important side note pwa is more than just two of us working. So if you just Google for TWA you end up with service worker. 03:54 This is a very important part but it's not the only one it's a shift in mind and it's got something to do with other topics, which will be 04:04 covered here in this talk. So luckily for us all the major JS Frameworks support pwa already. So 04:14 react comes with integrated support which needs to be enabled at some point and you Lord has service worker package and the same as proof of you. 04:23

We will focus on react because I like react the most and hopefully you too. So some react Specialties if 04:33 you're interested in the topic of pwa just go for the Google developer guides which are a perfect resource to dig 04:42 into this topic. So just read that through excellent stuff. What is the pwa? 04:52 this don't read it through we will cover every single item of this list in our application. First 05:03 one is directly in the name Progressive. But what means Progressive write once run everywhere, 05:13

you know that slogan from somewhere. This is another attempt to create 05:22 an application which runs everywhere. The brawls is all run time and we are using HTML CSS JavaScript 05:32 to create an application that feels good on every environment and create some benefit for the users. 05:42 Use up. Can I use it anywhere? So if you're asking yourself the question am I able to use a certain 05:54 API? Can I use. Calm and ask it so for example service workers or something and then you see 06:03

can you use it or not? First important thing. Don't break the web. So some error message or 06:13 blank pages are a no-go. So you need to deal with nearly every exception case. This is taken straight out of a 06:23 react application. So the first problem might be turned off JavaScript. No one ever turns off 06:32 JavaScript, but we need to deal with it. Put some HTML in your page. React helps 06:42 us here because we can do some of a side rendering and you can put in your pre-rendered HTML structure here 06:52

covering service hydrant ring will lead a little bit too far. But this is also a small piece in 07:00 creating Progressive web apps because you can pre-render the application or some static version of your application server side deliver HTML 07:10 CSS and then hydrated with react and make Dynamic. So you have at least a static version of the application which makes some sense 07:20 more sense than that and provided to your users. If someone has the good idea of 07:30 turning off JavaScript. Yeah, you're facing a problem. But run everywhere does mean run everywhere with 07:40

every single feature so you can strip your application down to the absolute minimum, which is displaying some data. This is the the bottom line of 07:50 our application. So it has to at least display some data and be just this information. So Progressive it 08:00 gets bigger and bigger with the browser feature. It's just can use next thing 08:08 taken directly out of react Subway Smokehouse, the major part of your Progressive web app 08:18 is only activated if the service worker API is available. This will lead to a slightly 08:28

problematic situation in our development process. But the service worker feature is only available in the production mode 08:37 and only available if the API itself is a feature detection. If you use 08:47 some fancy feature of your browser asked the browser is this feature available for me. If not, then just provide an alternative 08:57 solution. Coming back to different devices responsive design. another major 09:07 part of progressive web apps your application needs to fit on every device and behave like it's meant for 09:17

that device. It doesn't make any sense. If you put a desktop version of your application on her mobile phone. It won't be of any use so design 09:27 your application for every single device and bead for some kind of smartwatch. This is 09:36 not a very good example of an application that fits on a device. This is by the way our example. 09:46 Recognize it if you reduce the screen size, then it should at some points are react to this 09:56 screen size reduction and behave in some useful manner. So 10:05

this doesn't make any sense because we cannot read anything and we cannot interact with our application. So we have to do something. 10:15 Put your application to a certain platform means. Behave like it's designed for it. You can use 10:26 media queries and breakpoints and design your application for example for a mobile phone or a tablet or something. 10:35 These are the suggested breakpoints off material IO the design guides from Google for Android. Don't use 10:48 every single break point because they're way too much take two or three of them and optimize your application for those and everything's 10:58

fine. Luckily, there is some assistance for you. Goreact, especially there is material 11:07 UI which is the material implementation for react. So you have a number of material components that are 11:17 implemented in react if some styling assistance such as style components, which you can use in order to 11:27 make your application responsive so you don't have to solve the problem on your own but just use some pretty fine component libraries. 11:37 Especially useful is this material UI grid grid system, which is responsive. 11:48

in the implementation, it looks like this for the lodge breakpoint big-screen. It's 6 11:57 rows with six columns white. And for a smaller screen is 12 columns wide its at 12, So in 12:07 a smaller breakpoint. This one here. All the tasks list takes up the whole width of our screen if we 12:17 have a bigger screen than it just takes half of the screen. If two columns here to columns here and 12:27 it just distributes the application in some reasonable way. How does this look like large-screen? 12:36

You have a column here on your six columns here to here and two on the right side if I reduce the size. 12:46 Then just jumps over to the smaller breakpoint and it just throws away this sidewalks here 12:58 because it's not necessary to display this in a smaller breakpoint. If you use this feature and want to create some 13:07 marketing snapshot of your application, you can just display some device skin in in the browser and then just trade some fancy 13:17 screenshot like this. notary act future for the browser feature respond, 13:26

okay. Responsiveness. Now it gets interesting because we need to deal with 13:36 connectivity. Clients of a communication as usual in the web. But 13:45 TWA means this connection can be interrupted at any point. so offline versus the new mobile 13:54 1st and This Frontier is not an exception. So you all hopefully no the offline dinosaur. 14:04 Pwa means especially it's not a problem if you're in a tunnel or in the Subway or in the German train where there 14:17 is no internet connection. You need to design your application in an offline first way. So this is not an 14:27

exception case, but the standard if you design your application with that in mind, then gets much more easy to create such an application 14:37 and not put it in afterwards. So not create your application and we have some money left. Let's make it offline. 14:46 That doesn't make any sense. Now this is where service worker come into play. Such a service Mark 14:56 is just like a proxy between client and server. So it just sit right here where you can interrupt the connection 15:06

and this proxy process is implemented in the browser and it just can't take every request to the server and answer directly. So 15:16 your requests don't get here, but are just caught up here and answer directly. And this is how this offline 15:26 ability works. Can we use it? Well, if you're using Internet 15:35 Explorer until 11 or Edge, which support service worker from version 17 on it's 15:45 fine, except if you use Oprah mini, then you're out of the game. Even iOS 15:55 supports this Annapolis having a hard time supporting pwa because rumor says they have their own app 16:04

store, which is used to distribute mobile apps and mobile apps and pwa are just on the same level. So 16:13 Apple doesn't have any interest of letting pwas on iOS devices because you can Implement 16:23 your app not by a native IOS app, but just like a baby and distributed on your own so you don't need to go over the Apple 16:33 App Store, but just use the Vape capabilities. Right now they are supporting service workers from 11.3 16:43 on so this is just fine. very important side note use 16:53

https to test it. It's not available in HTTP only. No one ever uses HTTP in production. 17:03 Hopefully, okay fine. This is life cycle of a service workout. Why is this important? Because a service worker 17:13 needs to be installed. Doing stuff and then it's activated. So they are not activated on the first visit of the 17:22 page, but afterwards they are delayed. This is a problem. So you don't have the the service work active in the first 17:32 place, but you have to wait some time. Most important steps for you installation step and activate step in the installation you 17:42

trade Cassius and fill them or let them be filled automatically and in the activate part, you can manage the the Cassius 17:52 so you can invalidate them. This catching mechanism is mainly for Statics static assets such as images HTML 18:02 files JavaScript files CSS 5, so they are all written in the service worker cash and then your application is basically offline 18:11 able How can you detox the stuff just go to? 18:21 Your death Tools application then service worker and then you see nothing your application in 18:32

development mode does not have service workers enabled by default. What does a service worker do it cashes? What don't you want 18:41 in your development process a cash? Why not because your application is not updating if it's cashed. So this is a 18:51 reasonable decision that they don't activated by default because you won't have any fun with an activated service worker process in 19:01 development. So what do we need to do to enable them? go for production and 19:10 change this one here to register. This is very important. If you don't register the service worker, it's not registered and it doesn't work. 19:22

So you need to go for production. You need to build up your application and you need to change this. By the way. This is the index 19:32 JS or in my case TSX file. So the entry fall in your application and hear you find the service worker 19:42 registration if you're interested in more information at this link, And then busy or 19:51 application software or application that everything's fine. And finally, you see the information about your 20:01 service worker. You can test offline ability of your application. You can updated you can unregistered. You can 20:11

stop the service worker. You can bring the page with the service worker instance to the front 20:21 and all the stuff. You can't even to test push notifications in here. Just write something hit the push button push to push button 20:29 and the message of here, hopefully. Another helpful resource in the service worker 20:39 context is service working. RS. This is a cookbook written by some people of Mozilla, 20:49 which is very helpful. When you experiment with service workers just have a look and hear you find some receipts for push 20:59

notification and stuff. So this is a tool which is very relevant for us as 21:08 react developers, which one to have a proper Progressive web app because the default catching strategy 21:18 is not optimal. And with this tool made by Google you have a very fine grains a possibility 21:27 to modify the caching strategies off your service worker you have to do some stuff but you can easily integrate this. This is by the way the 21:37 b-42 when it gets to service worker configuration. It's named workbox. It's on workbox, I think and yeah just go 21:46

for it. I just traded some 21:56 script in order to mix up the new configuration. You need to change some 22:06 stuff in your application. And this is the consecration for work box. So this is just an 22:16 easy examples. I want to inject a file with with a proper configuration 22:26 which is here and here you can change or choose certain 22:36 caching strategies for certain parts in your application in my case. I just traded a cash for 22:45 images. I named it images and I use the cash first strategy. So a request first hits the cash 22:54

if the file is in the cash, then it gets delivered directly out of the cash. So it doesn't hit the network connection. The catch has 23:04 a maximum 60 entries. So they're only 60 image is cached and the lifetime is 30 days. 23:14 And that's it. So it's that easy to catch certain files and we have a reggae mix saying everything that ends on P&G is 23:24 cashed in that cash up to 3260 entries for 30 days and that's it. And you can easily create Cassius 23:34 for HTML for JavaScript and stuff like that. Update process is running automatically in the back and 23:44

transparently for you so you don't have to deal with it. If there is a new version of the service worker file or something, then it gets automatically 23:53 updated and you don't have to deal with it. So far so good. So configuration is relatively easy. 24:02 But we have another problem. What about Dynamic request? So API request we need in our 24:12 example case I want to do data which comes from a certain API. It doesn't make any sense to cash 24:22 first an API because then it doesn't get updates. So we need to think of an alternative for this one. 24:32

We need to take care of persistence in our application. The easiest way is to write the data the dynamic date of our 24:42 application into the index TV, which is browser default for storing large amounts of data, which can be use nearly everywhere. 24:52 In nearly every Extant. Thought you don't want 25:03 to mess around with the next DB because it doesn't have a nice API. It's called back based. You need to deal with 25:13 management and stuff like that. Luckily, there is something called Dixie which is an abstract library for 25:22

indexeddb, which can be used easily in a in your application. And if you want to 25:32 integrated entry application. You can do it like this. So this is a costume hook which talks to the 25:42 server. Navigate to request here. If we are online. Your browser knows whether it's 25:52 online or not. We can talk to the server as soon as we have the data pack weekly all local 26:01 database. So this is the abstraction layer for the index DB which comes from This one here. 26:11 This is just a wraparound deck see which creates. An index DB table with this index structure 26:20

and just gives me a a handle on that. So I clear my current database table 26:30 and I do about a cat with the data. I got back from the server. So I throw away all the old data and write 26:39 the new data into my cash. If I'm not online. I go to my 26:49 previous list or database. converted to an array and work with my previously cached version. 26:59 So this one is the online version. This is to offline version. And that's it. nearly 27:09 don't know if this is this is the reading process. This is relatively easy. You will get in trouble if it comes to writing data 27:20

because you need to deal with synchronization. So just imagine I'm sitting in a train traveling through 27:29 Germany don't have any Internet connection, and I'm creating some information. Hit the safe button. Nothing happens because of no 27:39 internet then I arrive at the train station and bring some to you produced in the meantime some other data entry. 27:49 I arrive at the train station. got my internet connection back and I get the online event and my 27:59 application tries to sync itself with the server. We have a conflict. You just created a new entry. I created a new entry and what happens 28:09

so my applications back end needs to deal with the conflict and we're different conflict resolution strategies, which 28:18 the most easy won. His last ride wins. So you created the entry previously and then I arrive at the train station and I 28:28 just overwrite your previously generated entry. Which is okay, but not feasible in any case better solution would be 28:38 I get presented the message. Hey, we have a conflicting entry. This is your version. This is the version from the server tell 28:47

me what to do or you just ride some intelligent algorithm that merges data automatically, which is very expensive. So 28:57 you need to just decide which way of conflict resolution you want to have and then just implemented. 29:07 However, there is also a solution for that. You can go with pouchdb which is a client-side database that 29:16 is able to swing itself with solvent-based couchdb which might solve your problems. And is easily 29:26 integrated in our application? so How do I where do 29:36

we implement this data handling mechanism their conflict resolution and stuff like that. Two possibilities 29:46 either the service worker or in our application. Any suggestions, what's the best place to put this 29:56 data handling stuff in? Service walk out why? 30:06 Yes, what's the downside of your of your idea? 30:18 Yeah, but this is also possibly if you if you work in the service worker because you can exchange messages or you can set up like 30:30 in the index DB that's not the big problem. But you have to Applications you have to application in the service worker and you have the application in 30:40

your main application. So You have to think about if you want to dublicate or not table cake, but have two applications 30:50 one. Beckoned on the client side and one front end on the client's site. So in the most cases I 31:00 decided for I put everything in the application and keep the service work as stupid as possible. Because in this at this 31:09 application can be tested on every run the service worker. I need to build my application put it in some HTTP contact 31:19

and then I can test it a service Mark has relatively hard to test and in my original front end. I have all the features and all the bells 31:29 and whistles of my react application and I can deal with it. We can extend this even further if we use redox and some isn't Kronos side 31:39 effect handling Library. This is where it gets. So you have two possibilities and you have to think of what is the right solution for me. 31:49 So it's it's not about this is my one is the correct one or your one is the correct one, but you have to decide on your youth case. 31:59

Speaking of side effect handling. So if you want to create a big application, you might think of using Redux, which is a state handling 32:10 Library. Another Frameworks you have ngrx for angular or vuex for view. Which just do the same job. 32:20 In redox, you have a defined flow of data. You have some action which tells your application I want to do something. 32:32 This goes into the dispatcher. This goes into the store where it's persisted and the store provides the information to the view to your react 32:43

components your components are able to Dispatch another action. So for example in our to-do app you hit the 32:52 disc to do is done button. Then this action is dispatched. The information goes to the store a check mark is put nearby 33:02 the the task and it's rain. We don't have any server Communication in here. So it's perfect for 33:11 pwa because we're basically offline able because there is no survey in this. The summer comes into play 33:20 if we talked about. Side effect handling for example Redux observable or Redux. Thunk 33:30

or Redux Saga. These are the three major implementations. and you have 33:40 epic sin in the case of Redux observable you have sagas or thanks in the other two cases and you have to serve a communication right here. 33:51 So this is the perfect spot to make your application offline table because you can have a local persistence to want such as the indexeddb 34:01 here and you can communicate with the server. So it's relatively easy to decide. 34:11 If you have two possibility to talk to the server or not. A little bit messy. I know. summer communication 34:21

with Apache API database communication with indexeddb You can. 34:31 I have them together. And whether it's possible to talk to the sub or not, the data is stored in your 34:41 local indexeddb. So it's by default offline able and everything's fine. As soon as you 34:51 get back your connection, you can find out if the service got all the information it needs or you need to swing back some data 35:01 that we have one point in your application which deals with this offline thingy and you don't have to deal it over all in your application. 35:10

But only in this side effect handling stuff. So the offline part of your application is encapsulated 35:20 here and not spread over your application. You just tell your application. I want to eat something or delete something or whatever 35:30 and this part takes care of all the offense. which is epic 35:40 okay so we are now offline April how does this look like I have my application 35:52 I'm talking I'm talking to myself network connection stuff happens and I'm 36:04 and I'm offline able so I change the network 36:14

speed. to offline and reload my application and it's 36:24 there. So if I reload my wrong path here. I got the 36:33 internet signal so. We can play around but we don't have any Internet connection. So my pwa just 36:43 works as expected. Can we go back online? This happens because 36:52 disc / game is my routing part and I don't catch this part in my service work a cash. 37:01 So it just hits the internet and goes boom. Okay, this is how the offline ability works. With 37:11 the whole text act you need to think of if you needs a redox and all the stuff or if it's easier for 37:20

you to just catch your request directly in the application. That's up to your application bigger ones. Go for redox smaller 37:30 ones use it directly in your custom Hooks and stuff. Okay, pwa should behave like 37:40 a native app not a native mobile app, but a native app you have desktop applications. You have mobile applications. 37:50 You haven't have you even have come online applications. So you need to deal with that and pwa 38:00 supports you. In this by it lets you define a how the browser looks like 38:09

if your application is installed so you can either go with full screen that is only your application. No browser or you can go with 38:19 browser that is application with browser and you have intermediate steps with reduce browser County. 38:28 This is my fancy application in full-screen mode. So you don't see any browser feature. You have no back button. You have no address line. 38:38 Nothing, you can hit F12 or some Shortcut to open the dev tools and fill around with it. But at the first place you 38:48

don't see anything of your browser just fine. We will have a look at the Manifest file very soon. We can Define 38:58 that stuff. Other things we need to fulfil is that our application is always up-to-date which comes out of the box 39:08 because we're using web Technologies such as HTML CSS JavaScript, which comes from the Sabah you need to deploy your application to the VIP 39:18 server and it gets automatically updated on the client-side. So nothing to do for us here, except if you need to actively 39:28

update the data, so Just think of my fancy to-do app and I received a new to-do from 39:38 the server. You need something like server sent events or websockets that pushed the data actively to look like which is possible 39:48 which can be extended with some other features. We will cover very very soon. But this always up-to-date thing 39:57 is already covered by using web Technologies. Always use https for some reason because 40:07 service workers payment request Porsche is disabled by default. If you deliver your application HTTP without 40:17

encryption not secure means not pwa. Well in some extent you have a 40:26 pwa but not the whole feature set. In our testing 40:36 environment, you can create a small npm script which allows you to test it in your local 40:45 development environment. You just need a package called HTTP server, you need a certificate which you can easily generate with 40:55 openssl or something and then just surf your bill fold up. With some options and then your application is 41:04 locally delivered via HTTP and it just behaves like production application. In my 41:14

case. This is delivered on HTTP localhost 8080 with exactly this command and everything else works. 41:24 So it's just similar to the production environment. 41:33 I have a preserved stripped app. You have three steps of npm script free. 41:44 Then the actual step and then a post step the reserve Reserve step boost application the surf step search 41:53 the application from the bill folder. So I just need to learn surf and then the application runs in rock 42:03 mode. Your application needs to be identified 42:13

as a pwa. And some of the search engines are actively looking for a pwa. 42:22 the most popular one is Microsoft They have the the Microsoft store and if you create a really really really good 42:33 pwa. Thank you. It gets indexed by by the Bing search engine and it gets listed in the Microsoft store 42:43 for free. So create a good pwa and it's you're able to install your application over the Microsoft store on 42:52 any Windows system. Out of the box. What do you need for that manifest file and an active registered service 43:02

worker and that's it and then some peaches. Now it gets annoying because your application needs to be re engageable. 43:12 10 or you can send your users notifications not in browser pop-up notifications, but real sister 43:25 messages. With a push API you can use the notification feature of the browser or the 43:34 system to send messages. The browser doesn't have to be in the foreground, but it just needs to run 43:44 you're the perfect example of my browser just is in the background. End with this push notification API. 43:53

I'm able to send notifications to my browser. Even if it's not focused. The idea behind is that if there 44:03 is some new content, you can notify the user can send a link to the user the user clicks on the link and the application goes in the focus. 44:13 So that's re-engage herbal be very very careful with that feature. Because if you send your users five messages in a minute 44:23 your application blue be deleted and you will get blocked by the user to send notifications. This is a very simple 44:32

example to be included in our work box configuration to receive messages. So just extend the 44:42 service worker configuration and everything's fine. By the way, this is stolen directly from the service worker 44:51 cookbook. So just go for it find some example that fits your needs and copied over your application and make it running. 45:00 This one is one of the most exciting features. Your application needs to be installable. So I will login. 45:12 With my top secret password and I get prompted with install application. Okay, 45:25

whenever an application asks you off. Directly after the login, can I install please? I 45:34 will hit the Conch button. Be very careful with that feature to because I'm no user will ever hit the 45:44 install button if you pop up directly. So things happen. And my application is installed. 45:54 And my browser is gone. No. Stop application is installed. Looks like a proper application 46:06 not to browse anymore. You have it in the app switcher like a real application. You have it in the 46:15

system bar like a real application. And all out of the box. You can ask 46:25 your user. Actively for installation with 30 lines of code. 46:35 You just need to add an event listener for the before installation prompt and then you can include it in your application. 46:45 This is a custom book for my react application. So at some point when I recognize the uses actively using this application 46:55 and I think it's a good moment. Then I triggered this hook and tell the user. Hey, you're 47:04

using this application. It might be a good idea to install it and half for the benefits. So be very careful 47:13 and use this API in order to engage your users and in order to install the application on the use of system and then 47:23 use a can just say, okay. This is so cool. I will keep it in the dark and Oh, yeah, I just want to play around. 47:33 And everything's fine. So it just behaves like a normal app. Yeah, we need to talk about the design but game of Harper's 47:46

but that's the idea behind. So by the way, there is no no reason why you should think of a browser 47:55 in this context except for this so you have to hold developer infrastructure at hand so you can do whatever 48:05 you want. Okay, so we installed our application and to be able to install 48:15 your application. You need to have a manifest file with some description with icons. Your application needs some icons to be identified 48:24 in the system. You can tell the application how it should be displayed either in full screen 48:34

or in the browser mode or something. You can give it a theme in the background color and provide some information and then you can install 48:44 it and have fun with it. Either you use this automatic process. I just showed you or you hit this 48:54 install. Fucking here in the in the menu of after 49:03 application. So just go for this. It's installed. And you can uninstall the application via 49:13 this link to remove it. and Can you just can 49:22 reinstall it? So you don't need to annoy your users, but if the user thinks it's a good idea. You can 49:31

trigger this manually and if you installed it by accident, you can remove it again. So everything's okay. 49:41 This is an I can you provide it so. Don't use just emojis, but reasonable I can so. 49:55 The user knows your application to user knows how to find it and just create brand over your application and pull it through. 50:06 This one comes out of the box as well because we are using web standards HTML CSS JavaScript. 50:17 But if you use a router in your application such a strict router use the history API, this 50:27

is the suggested way of navigating in an application. Every user every router of every JavaScript 50:37 framework supports the history API, which is the modern feature or the hash navigation don't go for hash navigation because Google 50:47 just says not a good idea. So react router supports everything you can use to react router 50:56 in your pwa. No problem. Just as you store in my early example, this is using react router and the 51:06 history API. Last question how much of a pwa is our 51:16

application there are multiple ways to find out first one is the Google checklist. So this is a checklist 51:26 which gives you some hints what to check in your application. So for example side to serve of HTTP, 51:35 what do you need to test and how to fix this? You've got plenty of information on every topic just 51:44 tried out. This is a manual process and manual processes. Are not that good so there is a tool called Lighthouse 51:54 and luckily. This is included in every Chrome browser so we can just find out how good our 52:03

application is. We just hit all pwa. 52:13 Go for audits. Lighthouse and you can perform various audits 52:23 performance Progressive web apps best practice accessibility. 52:31 run multiple types of being control. Yes, you're right. Okay. Now it's 52:41 runs the audits on Twitter and very soon. We will see if they did a good job or if they messed it up. 52:51 Okay, they can do better don't hear you steam and the current page does not respond with a 200 when offline. 53:12 What can we do against it run more? So for every phase test there is a learn more link where you find out what 53:23

to do better. So it doesn't leave you with a you messed it up, but this is how you can improve. NPR this is how it goes. So 53:33 I'm so worried about I think we cannot test it in the local environment. just 53:45 And you can only have one instance of your application open at one time when you want to perform it. We are fast 53:59 and reliable we are. We cannot control which is a pity. Nope. 54:09 Yeah, okay, at least we're fast and reliable and we are nearly install a book. Yeah, okay. 54:19

So if you implemented your application or you want to find out whether your application is already a pwa just hit this audit thing and then 54:29 find it. This is how it should look like. 54:39 This is cool. And yeah, that should be dealt with and then you can go home and feel good. This should be. 54:48 Do you have any questions? Yes. 55:01 login when offline this is a very excellent question because this is 55:11 this is the topic of a big discussion. So When you catch the stuff, 55:20

then you write it into the next EP. What's the problem of index TV is available for every user that sitting in front of your computer. 55:28 So there are multiple solutions for that problem. You can either in trip the content of the next DB and use some 55:38 decryption key and you have to deal with it. So if you're offline, you don't provide a login form, but some kind of decription feature 55:48 that dtrips the content of the index DB Which is one solution or you don't cash a secure data, 55:58

but the only public data which is another solution and their various Solutions. But yeah, this is a very good question because 56:07 you need to deal with that. Any further questions? Yes, please turn 56:17 pens on the browser and there is a Google now. It's a list 56:23 of the five sizes of the browser because they are changing over time. I don't know I didn't run into problems with 56:33 fire sizes. So yeah, you need to find out we did a test with a 1GB file and it was okay. 56:43

Yeah. That should be fine. IOS, just close to browser when we tested it. 56:54 Yes. 57:04 Is that died in your bike and no there is no way to M bet that into your 57:17 application. You can embed a button that triggers this installation dialogue. The installation is the browser feature in the browser keeps 57:27 it in the browser context in order to keep it secure. So if you have an excess or some vulnerability on your page, 57:37 you don't want to have to attack of the ability to install the application on your system. So the browser keeps it in the Brazos contacts the same is 57:47

true for the payment request API and all the security relevant apis. So the same is true 57:56 for for example for the blocking off notifications and stuff like that and all are there is always this ugly browser 58:06 notifications. Do you want to allow or block notifications? You cannot go by this one? 58:16 Yes. Yes, you can do that. Okay any further questions? 58:27 10 thanks a lot for listening. If you have any questions either come here or write me an email or contact me on Twitter 58:37

or something. Thanks a lot. And some of the examples are on my GitHub account. Just go there and find 58:47 it. 58:56

Cackle comments for the website

Buy this talk

Access to the talk «Progressive React Apps | Sebastian Springer»
Available
In cart
Free
Free
Free
Free
Free
Free

Video

Get access to all videos “International JavaScript Conference 2019”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Similar talks

Joel Lord
Developer Advocate at Red Hat OpenShift
Available
In cart
Free
Free
Free
Free
Free
Free
Phil Hawksworth
Principal Developer Experience Engineer at Netlify
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk 'Progressive React Apps | Sebastian Springer'
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
439 conferences
17532 speakers
6299 hours of content