Web Standard Technologies in Firefox OS

[? Music ?] [Treehouse presents] 0:00 [Quick Tips] [Web Standard Technologies] [Firefox OS with Jim Hoskins] 0:02 [In association with Mozilla] 0:04 Because web apps use standard web technologies, 0:06 you have the ability to do some amazing things 0:08 that you may not have used before in web development. 0:11 Many of these features are widely available 0:13 in most browsers but are particularly powerful 0:16 in the context of creating web apps. 0:19 APIs like geolocation allow you to get the current location of the user 0:23 as detected by the device, 0:27 meaning that if a device supports GPS, 0:29 you can get the location as accurately as any other GPS device. 0:32 Non-GPS devices can also provide less precise information 0:36 using a variety of methods, which is still very useful, 0:41 particularly in mobile apps. 0:44 The notifications API can be used to send notifications 0:47 to the user outside of your web page. 0:50 The way the notifications are displayed 0:53 vary from environment to environment. 0:55 You can use APIs like local storage and IndexedDB 0:58 to store information right on the device for later use. 1:02 If your app is saving information to your web server 1:06 and database, consider instead storing it to the local IndexedDB. 1:09 That way your users can always access their information 1:13 even if no network connection is available. 1:16 Considering the offline experience is crucial. 1:20 If your web app does not rely on a web server to run, 1:22 a user can use your app even when offline. 1:26 The online/offline APIs allow you to detect whether a device 1:30 has a working network connection, 1:34 so you can adjust your experience appropriately. 1:36 For instance, if the user is on a train and the connection drops, 1:39 you can communicate that to the user by doing something like 1:42 disabling the save button if the save button required a network connection. 1:46 Now let's see how this API can be used. 1:49 I have this basic HTML application 1:52 that I'd like to be able to detect whether we're online or offline. 1:54 Right now it's really not doing anything, 1:58 but ultimately, I'd like for it to be able to detect 2:00 if we're offline, and if that happens, we'll change the background color of the page, 2:03 and based on our status, we'll also update this message 2:06 to have offline or online. 2:10 Now, if you have your own application, 2:12 the behavior of online versus offline will vary. 2:15 But for right now, we're going to make some very simple stylistic changes. 2:18 All of our page is contained in this index.html file. 2:23 I've created some basic CSS, 2:26 and by adding offline class to the body tag, 2:29 we'll be able to change the background color, 2:33 and I've also isolated the status message here 2:35 into a span with the ID of status. 2:38 Because our network status may come off and online 2:41 multiple times, I'm going to encapsulate the logic 2:44 for changing from online to offline 2:47 into a single function, which I will call "update status." 2:49 And we'll be setting this up to run anytime that the network status changes. 2:57 In order to change the text status 3:03 in this span right here, we'll need to grab the element, 3:07 and then we'll have to decide what word goes in it. 3:10 First, let's figure out what the text that should go in it should be. 3:13 I'll start a new variable. 3:16 I'll call "textStatus," 3:18 and based on the navigator.online property, 3:21 we're going to change it, so to do it, 3:25 we'll do navigator.onLine with a capital L. 3:27 And based on this, we'll use a ternary operator. 3:35 If the online is true, we'll say we're online, 3:38 otherwise we'll say we're offline, 3:43 and then all we need to do is grab that span 3:45 using document.getElementById, 3:48 and you could select this however you want, 3:52 and we'll grab it by the status ID, 3:54 and then we'll set its inner HTML to our text status. 3:57 Now, we want this to run initially when the page loads up, 4:03 so I'll immediately execute update status right in our script. 4:06 Now if we refresh, the only thing that should change right now 4:13 is this text message, so if I refresh, 4:16 we have online. 4:20 I'm also going to add in a little bit of code that will add or remove 4:22 the class offline to our document body 4:25 based on whether or not navigator.online 4:29 has the true value. 4:31 Now this update status, based on the navigator.online, 4:33 will change the status and will also change the class 4:36 on document.body. 4:40 If we refresh, we're going to see it's the same thing, 4:43 but in order to simulate it being offline, 4:45 we're going to go to File, Work Offline. 4:47 Now, nothing is going to happen, however, if I refresh, 4:51 it's still accessible, however, now that we've refreshed it 4:54 and the update status has been called, it now has navigator.online 4:57 equal to false, hence, we get our offline message, 5:02 and the offline class has been applied to the body, 5:06 producing this gray background. 5:08 Now we actually want to listen for changes 5:11 in the network status. 5:14 There are a few different ways of doing this. 5:16 One way we'll do it is to add an online and offline event listener 5:18 to the window. 5:23 We'll do this using standard window.addEventListener, 5:25 and the name of the event is onLine, 5:30 and the function we want to execute is updateStatus. 5:33 Now, there are 2 different events we need to listen to, 5:37 online and offline, and so since we want to detect both, 5:40 we will add event listeners for both of them, 5:44 so online and offline, and they'll both use the update status, 5:47 because this function here can handle either condition, 5:53 whether online or offline. 5:57 If I save it out and we refresh, we still have our offline status, 6:00 but if I go to our file and uncheck "Work Offline," 6:03 we should get it to update. 6:07 However, I will need to refresh while we're online, I believe, 6:09 and now if we try it, there we go. 6:12 Now, I had to switch to online in order to get the latest version of the code, 6:15 otherwise, since we were offline, it was using the older version. 6:19 Now it has the latest version with our events listening, 6:23 and so as we switch from offline to online, 6:26 this will change the status of our page. 6:30 Now, on a device or on most computers, 6:32 if you lose Internet connectivity, the online property of navigator 6:34 will update, and the events will fire. 6:39 However, it appears while testing that on the Mac 6:41 if you disconnect your network connection, 6:44 the events will not fire in Firefox as of the current version. 6:47 However, you can use the Work Offline 6:51 to test it reliably. 6:53

You need to sign up for Treehouse in order to set up Workspace

Sign up