You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Instructions/20480C_MOD09_LAB_MANUAL.md
+75-72Lines changed: 75 additions & 72 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,15 +4,15 @@
4
4
5
5
#### Scenario
6
6
7
-
The conference organizers are concerned that the venue has poor Wi-Fi coverage in some locations, meaning that attendees might not always be able to access the conference website on their tablets and laptops. The Schedule page is especially important because attendees need to know when sessions are running.
7
+
The conference organizers are concerned that the venue has poor Wi-Fi coverage in some locations, so the attendees might not always be able to access the conference website on their tablets and laptops. The **Schedule** page is especially important because attendees need to know when sessions are running.
8
8
9
9
You have decided to make parts of the web application available offline by using the offline web application features of HTML5. After an attendee has visited the online website once, their browser will have downloaded and cached the important pages. If a Wi-Fi connection is unavailable, the attendee will still be able to view the website by using the cached information.
10
10
11
11
#### Objectives
12
12
13
13
After completing this lab, you will be able to:
14
14
15
-
- Use the Application Cache API to make web pages available offline.
15
+
- Use the Application Cache API to make webpages available offline.
16
16
- Use the Local Storage API to persist user data locally between browser sessions.
In this exercise, you will make the **Home**, **About**, **Schedule**, and **Location** pages available offline.
27
27
28
-
First, you will complete the creation of an application manifest file, which lists all of the files that should be cached for offline access. Next, you will reference the manifest file from the **Home**, **About**, **Schedule**, and **Location** pages. Then, you will write JavaScript code that adapts the page navigation, hiding links to pages that are not available offline. Finally, you will run the application and view the **Schedule** page. You will stop the web server and then reload the **Schedule** page to verify that it works offline.
28
+
First, you will complete the creation of an application manifest file, which lists all the files that should be cached for offline access. Next, you will reference the manifest file from the **Home**, **About**, **Schedule**, and **Location** pages. Then, you will write a JavaScript code that adapts the page navigation, hiding links to pages that are not available offline. Finally, you will run the application and view the **Schedule** page. You will stop the web server, and then reload the **Schedule** page to verify that it works offline.
29
29
30
-
#### Task 1: Configure the application cache manifest.
30
+
#### Task 1: Configure the application cache manifest
31
31
32
-
1. Configure Microsoft Edge to enable support for application caching:
32
+
1. To enable support for application caching, configure Microsoft Edge:
33
33
- Start Microsoft Edge.
34
-
-In the Microsoft Edge, press F10 to display the menu bar.
34
+
-To display the menu bar, in Microsoft Edge, press F10.
35
35
- On the **Tools** menu, click **Internet options**.
36
36
- In the **Internet Options** dialog box, click **Settings**.
37
37
- In the **Website Data Settings** dialog box, click the **Caches and databases** tab.
38
38
- Select the **Allow website caches and databases** check box, and then click **OK**.
39
39
- In the **Internet Options** dialog box, click **OK**.
40
40
- Close Microsoft Edge.
41
-
2. Start Visual Studio and open the **ContosoConf.sln** solution from the **Allfiles\Mod09\Labfiles\Starter\Exercise 1** folder.
42
-
3. Open the **appcache.manifest** file. This file contains a partial application manifest that lists the resources a web browser must cache for offline access.
43
-
4. After the comment near the start of the file, insert the following URLs to cache the **Home**, **About**, **Schedule**, and **Location** pages:
44
-
```javascript
41
+
2. Start Microsoft Visual Studio.
42
+
3. Browse to **Allfiles\Mod09\Labfiles\Starter\Exercise 1**, and then open the **ContosoConf.sln** solution.
43
+
4. Open the **appcache.manifest** file. This file contains a partial application manifest that lists the resources that a web browser must cache for offline access.
44
+
5. After the comment near the start of the file, insert the following URLs to cache the **Home**, **About**, **Schedule**, and **Location** pages:
45
+
```javascript
45
46
/index.htm
46
47
/about.htm
47
48
/location.htm
48
49
/schedule.htm
49
-
```
50
-
5. Add the **manifest="/appcache.manifest"** attribute to the **<html>** element of the **Home**, **About**, **Schedule**, and **Location** pages. These are the pages that will operate offline by using the application cache.
50
+
```
51
+
6. Add the **manifest="/appcache.manifest"** attribute to the **<html>** element of the **Home**, **About**, **Schedule**, and **Location** pages. These are the pages that will operate offline by using the application cache.
51
52
52
-
#### Task 2: Detect offline mode by using JavaScript code.
53
+
#### Task 2: Detect offline mode by using JavaScript code
53
54
54
-
1. Open **offline.js**file in the **scripts**folder. This script contains methods that hide or show links depending on whether a page is currently running in online or offline mode. The pages that support offline mode reference this script.
55
-
2. After the comment // TODO:if currently offline, hide navigation links that require online, add JavaScript code to detect if the web browser is currently offline, and call the **hideLinksThatRequireOnline()** function.
56
-
- Examine the **navigator.onLine** property to determine whether the browser is online of offline.
57
-
3. After the comment that starts with // TODO: add onoffline and ononline events to document.body, handle the **ononline** and **onoffline** events for the document body; call the **hideLinksThatRequireOnline** and **showLinks** functions as appropriate.
58
-
4. After the comment // TODO: also handle the applicationCache error event to hide links, add an event listener to the **applicationCache error** event, which calls the **hideLinksThatRequireOnline** function.
55
+
1. In the **scripts**folder, open the **offline.js**file. This script contains methods that hide or show links depending on whether a page is currently running in the online or offline mode. The pages that support the offline mode reference this script.
56
+
2. After the __// TODO:__ comment, if currently in the offline mode, hide navigation links that require the online mode, add JavaScript code to detect if the web browser is currently offline, and then call the **hideLinksThatRequireOnline()** function.
57
+
- Examine the **navigator.onLine** property to determine whether the browser is online or offline.
58
+
3. After the comment that starts with __// TODO:__, add the **onoffline** and **ononline** events to **document.body**, handle the **ononline** and **onoffline** events for the document body, and then call the **hideLinksThatRequireOnline** and **showLinks** functions as appropriate.
59
+
4. After the __// TODO:__ comment, handle the **applicationCache** error event to hide links, and then add an event listener to the **applicationCache error** event, which calls the **hideLinksThatRequireOnline** function.
59
60
60
-
#### Task 3: Test the application.
61
+
#### Task 3: Test the application
61
62
62
-
1. Run the application and view the **index.htm** page.
63
-
2. Expand the Windows notification area, rightclick **IIS Express**, and then click**Exit**. Allow IIS Express to exit when prompted.
63
+
1. Run the application, and then open the **index.htm** page.
64
+
2. Expand the Windows notification area, right-click **IIS Express**, and then select**Exit**. Allow **IIS Express** to exit when prompted.
64
65
65
-
>**Note:** When IIS Express first starts running, the IIS Express icon may appear in the Windows task bar rather than the notification area. If this occurs, right-click the **IIS Express** icon and then click**Exit**.
66
+
>**Note**: When **IIS Express** first starts running, the **IIS Express** icon may appear in the taskbar rather than the notification area. If this occurs, right-click the **IIS Express** icon, and then select**Exit**.
66
67
67
68
![alt text](./Images/20480B_9_IIS-Express.png"The IIS Express icon in the Windows notification area")
68
69
69
-
3. In Microsoft Edge, view the **Schedule** page. Verify that the page loads and displays the schedule information. Also verify that, after a brief delay, the **Register** link in the navigation bar is removed. This occurs because the Register page is not cached (it is not included in the **appcache.manifest** file), and registration requires an active connection to the web site.
70
-
4. View the **About** page and verify that this page displays correctly, and that the **Register** link disappears from the navigation bar.
70
+
3. In Microsoft Edge, open the **Schedule** page. Verify that the page loads and displays the schedule information. Also verify that after a brief delay, the **Register** link in the navigation bar is removed. This occurs because the **Register** page is not cached (it is not included in the **appcache.manifest** file), and registration requires an active connection to the website.
71
+
4. View the **About** page, verify that this page displays correctly, and then verify that the **Register** link disappears from the navigation bar.
71
72
5. Close Microsoft Edge.
72
73
73
-
>**Results:** After completing this exercise, you will have modified the web application and made the **Home**, **About**, **Schedule**, and **Location** pages available offline.
74
+
>**Results**: After completing this exercise, you will have modified the web application and made the **Home**, **About**, **Schedule**, and **Location** pages available offline.
74
75
75
-
### Exercise 2: Persisting User Data by Using the Local Storage API.
76
+
### Exercise 2: Persisting User Data by Using the Local Storage API
76
77
77
78
#### Scenario
78
79
79
-
Currently, the **Schedule** page is able to display sessions when offline, but this information does not include whether the attendee selected the session by using the star icon. This information is stored on a remote server that is inaccessible when the application is running offline. However, attendees also need to see the sessions they have selected. This information should be saved locally on an attendee’s computer, so it is available offline.
80
+
Currently, the **Schedule** page is able to display sessions when offline, but this information does not include whether the attendee selected the session by using the star icon. This information is stored on a remote server that is inaccessible when the application is running offline. However, attendees also need to see the sessions they have selected. This information should be saved locally on an attendee’s computer, so that it is available offline.
80
81
81
-
In this exercise, you will update the JavaScript code for the Schedule page to record an attendee's selected sessions. You will create an object that wraps the Local Storage API. Then you will use this wrapper to save information locally about starred sessions. Finally, you will run the application, view the Schedule page, and verify that the starred sessions are persisted even when the web server is not available.
82
+
In this exercise, you will update the JavaScript code for the **Schedule** page to record an attendee's selected sessions. You will create an object that wraps the Local Storage API. Then, you will use this wrapper to save information locally about starred sessions. Finally, you will run the application, view the **Schedule** page, and then verify that the starred sessions are persisted even when the web server is not available.
82
83
83
-
>**Note:** The Local Storage API is very simple. It can only save and load string key-value pairs. Persisting more complex data requires serialization. In this exercise, you will use a wrapper around the Local Storage API.
84
+
>**Note**: The Local Storage API is very simple. It can only save and load string key-value pairs. Persisting more complex data requires serialization. In this exercise, you will use a wrapper around the Local Storage API.
84
85
85
-
#### Task 1: Observe the current behavior of the Schedule page.
86
+
#### Task 1: Observe the current behavior of the Schedule page
86
87
87
-
1. In Visual Studio, open the**ContosoConf.sln** solution in the **Allfiles\Mod09\Labfiles\Starter\Exercise 2** folder.
88
-
2. Run the application and view the **schedule.htm** page.
89
-
3. Close IIS Express by using the icon in the Windows notification area.
90
-
4. On the Schedule page, click some of the stars, and then refresh the page.
91
-
5. Notice that information about which sessions are starred is not saved when the application is running offline (the yellow stars turn white again).
92
-
6. Close Microsoft Edge.
88
+
1. In Visual Studio, browse to**Allfiles\Mod09\Labfiles\Starter\Exercise 2**, and then open the **ContosoConf.sln** solution.
89
+
2. Run the application, and then open the **schedule.htm** page.
90
+
3. Close **IIS Express** by using the icon in the Windows notification area.
91
+
4. On the **Schedule** page, click some of the stars, and then refresh the page.
92
+
Notice that the application does not save the information about which sessions are starred when the application is running offline (the yellow stars turn white again).
93
+
5. Close Microsoft Edge.
93
94
94
-
#### Task 2: Save information about starred session to local storage.
95
+
#### Task 2: Save information about starred sessions to local storage
95
96
96
-
1. In the **scripts** folder, open the **LocalStarStorage.js** file. The code in this file wraps the Local Storage API to provide a higher-level interface used by the application code.
97
+
1. In the **scripts** folder, open the **LocalStarStorage.js** file. To provide a higher-level interface used by the application code, the code in this file wraps the Local Storage API.
97
98
98
-
>**Note:** The Schedule page will use the **addStar**, **removeStar**, **isStarred**, and **initialize** functions defined in this file. These functions in turn call the **save** and **load** methods that you will implement in this task.
99
+
>**Note**: The **Schedule** page will use the **addStar**, **removeStar**, **isStarred**, and **initialize** functions defined in this file. These functions call the **save** and **load** methods that you will implement in this task.
99
100
100
101
2. Implement the **LocalStarStorage save** method.
101
-
- The IDs of the starred sessions to be saved are held in the array **this.sessions**.
102
-
- Convert the array to a string by using the **JSON.stringify** function, and save this string to local storage with the key **stars**.
102
+
- The IDs of the starred sessions to be saved are held in the **this.sessions** array.
103
+
- Convert the array to a string by using the **JSON.stringify** function.
104
+
- Save this string to local storage with the **stars** key.
103
105
104
-
#### Task 3: Load information about starred session from local storage.
106
+
#### Task 3: Load information about starred sessions from local storage
105
107
106
-
1. In the **LocalStarStorage.js** file, implement the **LocalStarStorage load** method.
107
-
- Get the **stars** item from local storage.
108
-
- Parse the JSON string into an array and assign it to **this.sessions**.
109
-
- Handle the cases when the local storage returns no data or invalid JSON. In these situations, set **this.sessions** to be an empty array.
108
+
In the **LocalStarStorage.js** file, implement the **LocalStarStorage load** method.
109
+
- Get the **stars** item from local storage.
110
+
- Parse the JSON string into an array, and then assign it to **this.sessions**.
111
+
- Handle the cases when the local storage returns no data or a JavaScript Object Notation (JSON) that is not valid. In these situations, set **this.sessions** to be an empty array.
110
112
111
-
#### Task 4: Use the local storage wrapper to save and load data in the Schedule page.
113
+
#### Task 4: Use the local storage wrapper to save and load data in the Schedule page
112
114
113
115
1. In the **scripts** folder, open the **ScheduleItem.js** page.
114
116
2. In the **initialize** method, find the following comment:
115
-
```javascript
117
+
```javascript
116
118
// TODO: Check if item is starred
117
-
```
118
-
3. Add JavaScript code after this comment to:
119
-
-Detect whether the session identified by **this.id** is starred (use the **isStarred** method of the **localStarStorage** object).
120
-
- If the session is starred, tag the element with the **starred** CSS class so that it is rendered correctly (use the statement this.element.classList.add(this.starredClass);).
119
+
```
120
+
3. Add a JavaScript code after this comment:
121
+
-To detect whether the session identified by **this.id** is starred, use the **isStarred** method of the **localStarStorage** object.
122
+
- If the session is starred, to tag the element with the **starred** CSS class so that it is rendered correctly, use the **this.element.classList.add(this.starredClass);)** statement.
121
123
4. In the **unsetStar** method, find the following comment:
122
-
```javascript
124
+
```javascript
123
125
// TODO: remove the star from the item
124
-
```
125
-
5. After this comment, add JavaScript code to remove the star from the session identified by **this.id**. Use the **removeStar** method of the **localStarStorage** object.
126
+
```
127
+
5. After this comment, to remove the star from the session identified by **this.id**, add a JavaScript code. Use the **removeStar** method of the **localStarStorage** object.
126
128
6. In the **setStar** method, find the following comment:
127
-
```javascript
129
+
```javascript
128
130
// TODO: add a star to the item
129
-
```
130
-
7. After this comment, add JavaScript code to add a star to the session identified by **this.id**. Use the **addStar** method of the **localStarStorage** object.
131
+
```
132
+
7. After this comment, to add a star to the session identified by **this.id**, add a JavaScript code. Use the **addStar** method of the **localStarStorage** object.
131
133
132
-
#### Task 5: Test the application.
134
+
#### Task 5: Test the application
133
135
134
-
1. Open the appcache.manifest file and insert a version comment near the top of the file. As follows:
135
-
```javascript
136
+
1. Open the **appcache.manifest** file, and then insert a version comment near the top of the file. As follows:
137
+
```javascript
136
138
CACHEMANIFEST
137
139
# version 2
138
140
139
141
...
140
-
```
142
+
```
141
143
142
-
>**Note:** The JavaScript files are listed in **appcache.manifest**, and they will have been cached by the web browser. Making a change to the **appcache.manifest** file forces the browser to download the updated scripts.
144
+
>**Note**: The JavaScript files are listed in **appcache.manifest**, and they will have been cached by the web browser. Making a change to the **appcache.manifest** file forces the browser to download the updated scripts.
143
145
144
-
2. Run the application and view the **schedule.htm** page.
145
-
3. In Microsoft Edge, refresh the page to ensure the updated scripts are used.
146
-
4. Close IIS Express by using the icon in the Windows notification area.
147
-
5. On the **Schedule** page, click some of the stars, and then refresh the page.
148
-
6. Verify that the same sessions are still starred.
149
-
7. Close Microsoft Edge.
146
+
2. Run the application.
147
+
3. Open the **schedule.htm** page.
148
+
4. In Microsoft Edge, refresh the page to ensure the updated scripts are used.
149
+
5. Close **IIS Express** by using the icon in the Windows notification area.
150
+
6. On the **Schedule** page, click some of the stars, and then refresh the page.
151
+
7. Verify that the same sessions are still starred.
152
+
8. Close Microsoft Edge.
150
153
151
-
#### Task 6: Reset Microsoft Edge caching.
154
+
#### Task 6: Reset Microsoft Edge caching
152
155
153
156
1. Configure Microsoft Edge to disable support for application caching:
154
157
- Start Microsoft Edge.
155
-
- In the Microsoft Edge, press F10 to display the menu bar.
158
+
- In Microsoft Edge, to display the menu bar, press F10.
156
159
- On the **Tools** menu, click **Internet options**.
157
160
- In the **Internet Options** dialog box, click **Settings**.
158
161
- In the **Website Data Settings** dialog box, click the **Caches and databases** tab.
159
162
- Clear the **Allow website caches and databases** check box, and then click **OK**.
160
163
- In the **Internet Options** dialog box, click **OK**.
161
164
- Close Microsoft Edge.
162
165
163
-
>**Result:** After completing this exercise, you will have updated the Schedule page to locally record starred sessions.
166
+
>**Result**: After completing this exercise, you will have updated the **Schedule** page to locally record starred sessions.
0 commit comments