33 | Dragotchi
34 | 35 | 40 | 41 |44 | 45 |
48 |
53 |
54 |
49 | 
50 |
51 |
52 |
50 | 74 | 75 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /step3-manifest/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /step3-manifest/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step3-manifest/dragon.png -------------------------------------------------------------------------------- /step3-manifest/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
FAQ
47 | 48 |-
49 |
- Are you serious? 50 |
- Yes. 51 |
- How cool are dragons? 52 |
- Well, it's not clear whether they are cold- or warm-blooded. 53 |
- Why does this exist? 54 |
- This site has been built as an example for Google Codelabs. 55 |
- Where are the images from? 56 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 57 |
62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /step3-manifest/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step3-manifest/icon-192.png -------------------------------------------------------------------------------- /step3-manifest/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
Home
47 | 48 |49 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 50 |
51 |52 | Soon it will be an excited little dragon eating villagers and burning houses down. 53 |
54 |55 | To get started, click on the Dragotchi link! 56 |
57 | 58 |
59 |
60 | 61 | Dragotchi is always !!! 62 |
63 | 64 |67 | 68 | 73 | 74 |
75 | 0
76 | 0
77 | 0
78 | 2
79 | 0
80 | 1
81 | 6
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/step3-manifest/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step3-manifest/logo.png
--------------------------------------------------------------------------------
/step3-manifest/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Most Awesome Dragon Site",
3 | "short_name": "🐉🐉🐉",
4 | "display": "minimal-ui",
5 | "start_url": "/",
6 | "theme_color": "#673ab6",
7 | "background_color": "#111111",
8 | "icons": [
9 | {
10 | "src": "icon-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/step3-manifest/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | /** Intentionally empty */
16 |
--------------------------------------------------------------------------------
/step3-manifest/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2016 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 |
18 | body {
19 | background: black url(background.jpeg) repeat-x center top;
20 | background-size: 200px;
21 | color: white;
22 | text-align: center;
23 | }
24 |
25 | a {
26 | color: #ff9249;
27 | }
28 |
29 | /** I'm so sorry. */
30 | blink {
31 | animation: blink 1s step-end infinite;
32 | }
33 | @keyframes blink {
34 | 67% { opacity: 0 }
35 | }
36 |
37 | header .logo {
38 | width: 100px;
39 | }
40 | header ul {
41 | list-style: none;
42 | padding: 0;
43 | color: #555;
44 | }
45 | header li {
46 | display: inline-block;
47 | }
48 | header li::before {
49 | content: " — ";
50 | }
51 | header li:first-child::before {
52 | content: "";
53 | }
54 |
55 | .counter {
56 | display: inline-flex;
57 | margin: 20px;
58 | }
59 |
60 | .counter span {
61 | border: 1px solid #333;
62 | width: 12px;
63 | font-family: Monospace;
64 | background: linear-gradient(to top, red, blue);
65 | }
66 |
67 | dl {
68 | width: 400px;
69 | margin: 0 auto;
70 | text-align: left;
71 | }
72 |
73 | dd {
74 | margin-bottom: 1em;
75 | }
76 |
77 | section table {
78 | margin: 0 auto;
79 | text-align: left;
80 | }
81 | section table td,
82 | section table th {
83 | min-width: 50px;
84 | }
85 |
86 | .dragon {
87 | box-sizing: border-box;
88 | padding: 20px;
89 | width: 280px;
90 | height: 280px;
91 | margin: 12px auto;
92 | border: 2px solid rgba(255, 255, 255, 0.125);
93 | background: #111;
94 | border-radius: 2px;
95 | position: relative;
96 | overflow: hidden;
97 | }
98 | .dragon #guy {
99 | position: absolute;
100 | width: 100px;
101 | margin-left: -50px;
102 | margin-top: -50px;
103 | z-index: 1000;
104 | transition: transform 1s ease-in-out;
105 | }
106 | .dragon img {
107 | width: 100%;
108 | cursor: pointer;
109 | transition: transform 0.25s;
110 | }
111 | .dragon img:hover {
112 | transform: scale(1.45) rotate(10deg);
113 | }
114 |
115 | .coin {
116 | position: absolute;
117 | opacity: 0.5;
118 | width: 10px;
119 | height: 5px;
120 | margin-left: -5px;
121 | margin-top: -2px;
122 | background: yellow;
123 | border-radius: 100%; /** oval */
124 | border-bottom: 1px solid rgba(0, 0, 0, 0.5);
125 | border-top: 1px solid rgba(255, 255, 255, 0.5);
126 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.25);
127 | }
128 |
129 | .actions {
130 | width: 280px;
131 | height: 80px;
132 | box-sizing: border-box;
133 | border: 2px solid rgba(255, 255, 255, 0.125);
134 | background: #211;
135 | border-radius: 2px;
136 | margin: 12px auto;
137 | display: flex;
138 | padding: 2px;
139 | }
140 |
141 | .actions button {
142 | border: 0;
143 | flex-grow: 1;
144 | width: 300%; /** forces equal size */
145 | margin-left: 2px;
146 | background: rgba(255, 255, 255, 0.125);
147 | color: white;
148 | font-size: 16px;
149 | padding: 12px;
150 | opacity: 0.8;
151 | }
152 | .actions button:first-child {
153 | margin-left: 0;
154 | }
155 | .actions button:disabled {
156 | text-decoration: line-through;
157 | }
158 | .actions button:hover:not(:disabled) {
159 | opacity: 1.0;
160 | cursor: pointer;
161 | }
--------------------------------------------------------------------------------
/step4-sw/background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step4-sw/background.jpeg
--------------------------------------------------------------------------------
/step4-sw/clear.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
33 | Dragotchi
34 | 35 | 40 | 41 |44 | 45 |
48 |
53 |
54 |
49 |
50 |
51 |
52 |
50 | 74 | 75 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /step4-sw/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /step4-sw/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step4-sw/dragon.png -------------------------------------------------------------------------------- /step4-sw/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
FAQ
47 | 48 |-
49 |
- Are you serious? 50 |
- Yes. 51 |
- How cool are dragons? 52 |
- Well, it's not clear whether they are cold- or warm-blooded. 53 |
- Why does this exist? 54 |
- This site has been built as an example for Google Codelabs. 55 |
- Where are the images from? 56 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 57 |
62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /step4-sw/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step4-sw/icon-192.png -------------------------------------------------------------------------------- /step4-sw/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
Home
47 | 48 |49 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 50 |
51 |52 | Soon it will be an excited little dragon eating villagers and burning houses down. 53 |
54 |55 | To get started, click on the Dragotchi link! 56 |
57 | 58 |
59 |
60 | 61 | Dragotchi is always !!! 62 |
63 | 64 |67 | 68 | 73 | 74 |
75 | 0
76 | 0
77 | 0
78 | 2
79 | 0
80 | 1
81 | 6
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/step4-sw/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step4-sw/logo.png
--------------------------------------------------------------------------------
/step4-sw/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Most Awesome Dragon Site",
3 | "short_name": "🐉🐉🐉",
4 | "display": "minimal-ui",
5 | "start_url": "/",
6 | "theme_color": "#673ab6",
7 | "background_color": "#111111",
8 | "icons": [
9 | {
10 | "src": "icon-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/step4-sw/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) {
16 | console.log('Excellent, registered with scope: ', registration.scope);
17 | });
--------------------------------------------------------------------------------
/step4-sw/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2016 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 |
18 | body {
19 | background: black url(background.jpeg) repeat-x center top;
20 | background-size: 200px;
21 | color: white;
22 | text-align: center;
23 | }
24 |
25 | a {
26 | color: #ff9249;
27 | }
28 |
29 | /** I'm so sorry. */
30 | blink {
31 | animation: blink 1s step-end infinite;
32 | }
33 | @keyframes blink {
34 | 67% { opacity: 0 }
35 | }
36 |
37 | header .logo {
38 | width: 100px;
39 | }
40 | header ul {
41 | list-style: none;
42 | padding: 0;
43 | color: #555;
44 | }
45 | header li {
46 | display: inline-block;
47 | }
48 | header li::before {
49 | content: " — ";
50 | }
51 | header li:first-child::before {
52 | content: "";
53 | }
54 |
55 | .counter {
56 | display: inline-flex;
57 | margin: 20px;
58 | }
59 |
60 | .counter span {
61 | border: 1px solid #333;
62 | width: 12px;
63 | font-family: Monospace;
64 | background: linear-gradient(to top, red, blue);
65 | }
66 |
67 | dl {
68 | width: 400px;
69 | margin: 0 auto;
70 | text-align: left;
71 | }
72 |
73 | dd {
74 | margin-bottom: 1em;
75 | }
76 |
77 | section table {
78 | margin: 0 auto;
79 | text-align: left;
80 | }
81 | section table td,
82 | section table th {
83 | min-width: 50px;
84 | }
85 |
86 | .dragon {
87 | box-sizing: border-box;
88 | padding: 20px;
89 | width: 280px;
90 | height: 280px;
91 | margin: 12px auto;
92 | border: 2px solid rgba(255, 255, 255, 0.125);
93 | background: #111;
94 | border-radius: 2px;
95 | position: relative;
96 | overflow: hidden;
97 | }
98 | .dragon #guy {
99 | position: absolute;
100 | width: 100px;
101 | margin-left: -50px;
102 | margin-top: -50px;
103 | z-index: 1000;
104 | transition: transform 1s ease-in-out;
105 | }
106 | .dragon img {
107 | width: 100%;
108 | cursor: pointer;
109 | transition: transform 0.25s;
110 | }
111 | .dragon img:hover {
112 | transform: scale(1.45) rotate(10deg);
113 | }
114 |
115 | .coin {
116 | position: absolute;
117 | opacity: 0.5;
118 | width: 10px;
119 | height: 5px;
120 | margin-left: -5px;
121 | margin-top: -2px;
122 | background: yellow;
123 | border-radius: 100%; /** oval */
124 | border-bottom: 1px solid rgba(0, 0, 0, 0.5);
125 | border-top: 1px solid rgba(255, 255, 255, 0.5);
126 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.25);
127 | }
128 |
129 | .actions {
130 | width: 280px;
131 | height: 80px;
132 | box-sizing: border-box;
133 | border: 2px solid rgba(255, 255, 255, 0.125);
134 | background: #211;
135 | border-radius: 2px;
136 | margin: 12px auto;
137 | display: flex;
138 | padding: 2px;
139 | }
140 |
141 | .actions button {
142 | border: 0;
143 | flex-grow: 1;
144 | width: 300%; /** forces equal size */
145 | margin-left: 2px;
146 | background: rgba(255, 255, 255, 0.125);
147 | color: white;
148 | font-size: 16px;
149 | padding: 12px;
150 | opacity: 0.8;
151 | }
152 | .actions button:first-child {
153 | margin-left: 0;
154 | }
155 | .actions button:disabled {
156 | text-decoration: line-through;
157 | }
158 | .actions button:hover:not(:disabled) {
159 | opacity: 1.0;
160 | cursor: pointer;
161 | }
--------------------------------------------------------------------------------
/step4-sw/sw.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | /** An empty service worker! */
16 |
17 | self.addEventListener('fetch', function(event) {
18 | /** An empty fetch handler! */
19 | });
20 |
--------------------------------------------------------------------------------
/step5-push/background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step5-push/background.jpeg
--------------------------------------------------------------------------------
/step5-push/clear.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
33 | Dragotchi
34 | 35 | 40 | 41 |44 | 45 |
48 |
53 |
54 |
49 |
50 |
51 |
52 |
50 | 74 | 75 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /step5-push/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /step5-push/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step5-push/dragon.png -------------------------------------------------------------------------------- /step5-push/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
FAQ
47 | 48 |-
49 |
- Are you serious? 50 |
- Yes. 51 |
- How cool are dragons? 52 |
- Well, it's not clear whether they are cold- or warm-blooded. 53 |
- Why does this exist? 54 |
- This site has been built as an example for Google Codelabs. 55 |
- Where are the images from? 56 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 57 |
62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /step5-push/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step5-push/icon-192.png -------------------------------------------------------------------------------- /step5-push/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
Home
47 | 48 |49 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 50 |
51 |52 | Soon it will be an excited little dragon eating villagers and burning houses down. 53 |
54 |55 | To get started, click on the Dragotchi link! 56 |
57 | 58 |
59 |
60 | 61 | Dragotchi is always !!! 62 |
63 | 64 |67 | 68 | 73 | 74 |
75 | 0
76 | 0
77 | 0
78 | 2
79 | 0
80 | 1
81 | 6
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/step5-push/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step5-push/logo.png
--------------------------------------------------------------------------------
/step5-push/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Most Awesome Dragon Site",
3 | "short_name": "🐉🐉🐉",
4 | "display": "minimal-ui",
5 | "start_url": "/",
6 | "theme_color": "#673ab6",
7 | "background_color": "#111111",
8 | "icons": [
9 | {
10 | "src": "icon-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/step5-push/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | const publicKey = '
33 | Dragotchi
34 | 35 | 40 | 41 |44 | 45 |
48 |
53 |
54 |
49 |
50 |
51 |
52 |
50 | 74 | 75 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /step6-cache/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /step6-cache/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step6-cache/dragon.png -------------------------------------------------------------------------------- /step6-cache/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
FAQ
47 | 48 |-
49 |
- Are you serious? 50 |
- Yes. 51 |
- How cool are dragons? 52 |
- Well, it's not clear whether they are cold- or warm-blooded. 53 |
- Why does this exist? 54 |
- This site has been built as an example for Google Codelabs. 55 |
- Where are the images from? 56 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 57 |
62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /step6-cache/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step6-cache/icon-192.png -------------------------------------------------------------------------------- /step6-cache/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
Home
47 | 48 |49 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 50 |
51 |52 | Soon it will be an excited little dragon eating villagers and burning houses down. 53 |
54 |55 | To get started, click on the Dragotchi link! 56 |
57 | 58 |
59 |
60 | 61 | Dragotchi is always !!! 62 |
63 | 64 |67 | 68 | 73 | 74 |
75 | 0
76 | 0
77 | 0
78 | 2
79 | 0
80 | 1
81 | 6
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/step6-cache/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step6-cache/logo.png
--------------------------------------------------------------------------------
/step6-cache/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Most Awesome Dragon Site",
3 | "short_name": "🐉🐉🐉",
4 | "display": "minimal-ui",
5 | "start_url": "/",
6 | "theme_color": "#673ab6",
7 | "background_color": "#111111",
8 | "icons": [
9 | {
10 | "src": "icon-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/step6-cache/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) {
16 | console.log('Excellent, registered with scope: ', registration.scope);
17 | });
--------------------------------------------------------------------------------
/step6-cache/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2016 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 |
18 | body {
19 | background: black url(background.jpeg) repeat-x center top;
20 | background-size: 200px;
21 | color: white;
22 | text-align: center;
23 | }
24 |
25 | a {
26 | color: #ff9249;
27 | }
28 |
29 | /** I'm so sorry. */
30 | blink {
31 | animation: blink 1s step-end infinite;
32 | }
33 | @keyframes blink {
34 | 67% { opacity: 0 }
35 | }
36 |
37 | header .logo {
38 | width: 100px;
39 | }
40 | header ul {
41 | list-style: none;
42 | padding: 0;
43 | color: #555;
44 | }
45 | header li {
46 | display: inline-block;
47 | }
48 | header li::before {
49 | content: " — ";
50 | }
51 | header li:first-child::before {
52 | content: "";
53 | }
54 |
55 | .counter {
56 | display: inline-flex;
57 | margin: 20px;
58 | }
59 |
60 | .counter span {
61 | border: 1px solid #333;
62 | width: 12px;
63 | font-family: Monospace;
64 | background: linear-gradient(to top, red, blue);
65 | }
66 |
67 | dl {
68 | width: 400px;
69 | margin: 0 auto;
70 | text-align: left;
71 | }
72 |
73 | dd {
74 | margin-bottom: 1em;
75 | }
76 |
77 | section table {
78 | margin: 0 auto;
79 | text-align: left;
80 | }
81 | section table td,
82 | section table th {
83 | min-width: 50px;
84 | }
85 |
86 | .dragon {
87 | box-sizing: border-box;
88 | padding: 20px;
89 | width: 280px;
90 | height: 280px;
91 | margin: 12px auto;
92 | border: 2px solid rgba(255, 255, 255, 0.125);
93 | background: #111;
94 | border-radius: 2px;
95 | position: relative;
96 | overflow: hidden;
97 | }
98 | .dragon #guy {
99 | position: absolute;
100 | width: 100px;
101 | margin-left: -50px;
102 | margin-top: -50px;
103 | z-index: 1000;
104 | transition: transform 1s ease-in-out;
105 | }
106 | .dragon img {
107 | width: 100%;
108 | cursor: pointer;
109 | transition: transform 0.25s;
110 | }
111 | .dragon img:hover {
112 | transform: scale(1.45) rotate(10deg);
113 | }
114 |
115 | .coin {
116 | position: absolute;
117 | opacity: 0.5;
118 | width: 10px;
119 | height: 5px;
120 | margin-left: -5px;
121 | margin-top: -2px;
122 | background: yellow;
123 | border-radius: 100%; /** oval */
124 | border-bottom: 1px solid rgba(0, 0, 0, 0.5);
125 | border-top: 1px solid rgba(255, 255, 255, 0.5);
126 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.25);
127 | }
128 |
129 | .actions {
130 | width: 280px;
131 | height: 80px;
132 | box-sizing: border-box;
133 | border: 2px solid rgba(255, 255, 255, 0.125);
134 | background: #211;
135 | border-radius: 2px;
136 | margin: 12px auto;
137 | display: flex;
138 | padding: 2px;
139 | }
140 |
141 | .actions button {
142 | border: 0;
143 | flex-grow: 1;
144 | width: 300%; /** forces equal size */
145 | margin-left: 2px;
146 | background: rgba(255, 255, 255, 0.125);
147 | color: white;
148 | font-size: 16px;
149 | padding: 12px;
150 | opacity: 0.8;
151 | }
152 | .actions button:first-child {
153 | margin-left: 0;
154 | }
155 | .actions button:disabled {
156 | text-decoration: line-through;
157 | }
158 | .actions button:hover:not(:disabled) {
159 | opacity: 1.0;
160 | cursor: pointer;
161 | }
--------------------------------------------------------------------------------
/step6-cache/sw.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | self.addEventListener('install', function(e) {
16 | e.waitUntil(
17 | caches.open('your-magic-cache').then(function(cache) {
18 | return cache.addAll([
19 | '/',
20 | '/index.html',
21 | '/dragon.html',
22 | '/faq.html',
23 | '/manifest.json',
24 | '/background.jpeg',
25 | '/construction.gif',
26 | '/dragon.png',
27 | '/logo.png',
28 | '/site.js',
29 | '/dragon.js',
30 | '/styles.css',
31 | ]);
32 | })
33 | );
34 | });
35 |
36 | self.addEventListener('fetch', function(event) {
37 | event.respondWith(
38 | caches.match(event.request).then(function(response) {
39 | return response || fetch(event.request);
40 | })
41 | );
42 | });
--------------------------------------------------------------------------------
/step7-imperative/background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step7-imperative/background.jpeg
--------------------------------------------------------------------------------
/step7-imperative/clear.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
33 | Dragotchi
34 | 35 | 40 | 41 |44 | 45 |
48 |
53 |
54 |
49 |
50 |
51 |
52 |
50 | 74 | 75 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /step7-imperative/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /step7-imperative/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step7-imperative/dragon.png -------------------------------------------------------------------------------- /step7-imperative/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
FAQ
47 | 48 |-
49 |
- Are you serious? 50 |
- Yes. 51 |
- How cool are dragons? 52 |
- Well, it's not clear whether they are cold- or warm-blooded. 53 |
- Why does this exist? 54 |
- This site has been built as an example for Google Codelabs. 55 |
- Where are the images from? 56 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 57 |
62 | 63 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /step7-imperative/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step7-imperative/icon-192.png -------------------------------------------------------------------------------- /step7-imperative/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
32 | Dragotchi
33 | 34 | 39 | 40 |43 | 44 |
Home
47 | 48 |49 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 50 |
51 |52 | Soon it will be an excited little dragon eating villagers and burning houses down. 53 |
54 |55 | To get started, click on the Dragotchi link! 56 |
57 | 58 |
59 |
60 | 61 | Dragotchi is always !!! 62 |
63 | 64 |67 | 68 | 73 | 74 |
75 | 0
76 | 0
77 | 0
78 | 2
79 | 0
80 | 1
81 | 6
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/step7-imperative/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/step7-imperative/logo.png
--------------------------------------------------------------------------------
/step7-imperative/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "The Most Awesome Dragon Site",
3 | "short_name": "🐉🐉🐉",
4 | "display": "minimal-ui",
5 | "start_url": "/",
6 | "theme_color": "#673ab6",
7 | "background_color": "#111111",
8 | "icons": [
9 | {
10 | "src": "icon-192.png",
11 | "sizes": "192x192",
12 | "type": "image/png"
13 | }
14 | ]
15 | }
--------------------------------------------------------------------------------
/step7-imperative/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | navigator.serviceWorker && navigator.serviceWorker.register('./sw.js').then(function(registration) {
16 | console.log('Excellent, registered with scope: ', registration.scope);
17 | });
--------------------------------------------------------------------------------
/step7-imperative/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2016 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 |
18 | body {
19 | background: black url(background.jpeg) repeat-x center top;
20 | background-size: 200px;
21 | color: white;
22 | text-align: center;
23 | }
24 |
25 | a {
26 | color: #ff9249;
27 | }
28 |
29 | /** I'm so sorry. */
30 | blink {
31 | animation: blink 1s step-end infinite;
32 | }
33 | @keyframes blink {
34 | 67% { opacity: 0 }
35 | }
36 |
37 | header .logo {
38 | width: 100px;
39 | }
40 | header ul {
41 | list-style: none;
42 | padding: 0;
43 | color: #555;
44 | }
45 | header li {
46 | display: inline-block;
47 | }
48 | header li::before {
49 | content: " — ";
50 | }
51 | header li:first-child::before {
52 | content: "";
53 | }
54 |
55 | .counter {
56 | display: inline-flex;
57 | margin: 20px;
58 | }
59 |
60 | .counter span {
61 | border: 1px solid #333;
62 | width: 12px;
63 | font-family: Monospace;
64 | background: linear-gradient(to top, red, blue);
65 | }
66 |
67 | dl {
68 | width: 400px;
69 | margin: 0 auto;
70 | text-align: left;
71 | }
72 |
73 | dd {
74 | margin-bottom: 1em;
75 | }
76 |
77 | section table {
78 | margin: 0 auto;
79 | text-align: left;
80 | }
81 | section table td,
82 | section table th {
83 | min-width: 50px;
84 | }
85 |
86 | .dragon {
87 | box-sizing: border-box;
88 | padding: 20px;
89 | width: 280px;
90 | height: 280px;
91 | margin: 12px auto;
92 | border: 2px solid rgba(255, 255, 255, 0.125);
93 | background: #111;
94 | border-radius: 2px;
95 | position: relative;
96 | overflow: hidden;
97 | }
98 | .dragon #guy {
99 | position: absolute;
100 | width: 100px;
101 | margin-left: -50px;
102 | margin-top: -50px;
103 | z-index: 1000;
104 | transition: transform 1s ease-in-out;
105 | }
106 | .dragon img {
107 | width: 100%;
108 | cursor: pointer;
109 | transition: transform 0.25s;
110 | }
111 | .dragon img:hover {
112 | transform: scale(1.45) rotate(10deg);
113 | }
114 |
115 | .coin {
116 | position: absolute;
117 | opacity: 0.5;
118 | width: 10px;
119 | height: 5px;
120 | margin-left: -5px;
121 | margin-top: -2px;
122 | background: yellow;
123 | border-radius: 100%; /** oval */
124 | border-bottom: 1px solid rgba(0, 0, 0, 0.5);
125 | border-top: 1px solid rgba(255, 255, 255, 0.5);
126 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.25);
127 | }
128 |
129 | .actions {
130 | width: 280px;
131 | height: 80px;
132 | box-sizing: border-box;
133 | border: 2px solid rgba(255, 255, 255, 0.125);
134 | background: #211;
135 | border-radius: 2px;
136 | margin: 12px auto;
137 | display: flex;
138 | padding: 2px;
139 | }
140 |
141 | .actions button {
142 | border: 0;
143 | flex-grow: 1;
144 | width: 300%; /** forces equal size */
145 | margin-left: 2px;
146 | background: rgba(255, 255, 255, 0.125);
147 | color: white;
148 | font-size: 16px;
149 | padding: 12px;
150 | opacity: 0.8;
151 | }
152 | .actions button:first-child {
153 | margin-left: 0;
154 | }
155 | .actions button:disabled {
156 | text-decoration: line-through;
157 | }
158 | .actions button:hover:not(:disabled) {
159 | opacity: 1.0;
160 | cursor: pointer;
161 | }
--------------------------------------------------------------------------------
/step7-imperative/sw.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | self.addEventListener('install', function(e) {
16 | e.waitUntil(
17 | caches.open('your-magic-cache').then(function(cache) {
18 | return cache.addAll([
19 | '/',
20 | '/index.html',
21 | '/dragon.html',
22 | '/faq.html',
23 | '/manifest.json',
24 | '/background.jpeg',
25 | '/construction.gif',
26 | '/dragon.png',
27 | '/logo.png',
28 | '/site.js',
29 | '/dragon.js',
30 | '/styles.css',
31 | ]);
32 | })
33 | );
34 | });
35 |
36 | self.addEventListener('fetch', function(event) {
37 | if (event.request.url == 'https://dragon-server.appspot.com/') {
38 | console.info('responding to dragon-server fetch with Service Worker! 🤓');
39 | event.respondWith(fetch(event.request).catch(function(e) {
40 | let out = {Gold: 1, Size: -1, Actions: []};
41 | return new Response(JSON.stringify(out));
42 | }));
43 | return;
44 | }
45 |
46 | event.respondWith(
47 | caches.match(event.request).then(function(response) {
48 | return response || fetch(event.request);
49 | })
50 | );
51 | });
--------------------------------------------------------------------------------
/work/background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/work/background.jpeg
--------------------------------------------------------------------------------
/work/clear.html:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
19 |
20 |
31 | Dragotchi
32 | 33 | 38 | 39 |42 | 43 |
46 |
51 |
52 |
47 |
48 |
49 |
50 |
48 | 72 | 73 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /work/dragon.js: -------------------------------------------------------------------------------- 1 | // Copyright 2016 Google Inc. 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // http://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | function refresh(action, callback) { 16 | var x = new XMLHttpRequest(); 17 | x.onload = function() { 18 | var out = x.response; 19 | if (typeof out == 'string') { 20 | out = JSON.parse(out); 21 | } 22 | callback(out); 23 | }; 24 | x.onerror = function() { 25 | alert('couldn\'t fetch dragon status'); 26 | }; 27 | 28 | if (action) { 29 | x.open('POST', 'https://dragon-server.appspot.com/?action=' + action); 30 | } else { 31 | x.open('GET', 'https://dragon-server.appspot.com/'); 32 | } 33 | 34 | x.send(); 35 | } 36 | 37 | window.addEventListener('load', function() { 38 | function createDataRow(name, value) { 39 | var row = document.createElement('tr'); 40 | 41 | var th = document.createElement('th'); 42 | th.textContent = name; 43 | row.appendChild(th); 44 | 45 | var td = document.createElement('td'); 46 | td.textContent = value; 47 | row.appendChild(td); 48 | 49 | return row; 50 | } 51 | 52 | var timeout; 53 | (function work(action) { 54 | window.clearTimeout(timeout); 55 | timeout = window.setTimeout(work, 60 * 1000); // 60s 56 | 57 | if (action) { // clicked action, clear future actions 58 | actions.textContent = ''; 59 | } 60 | refresh(action, function(status) { 61 | 62 | gold.textContent = ''; 63 | for (var i = 0; i < status.Gold; ++i) { 64 | var coin = document.createElement('span'); 65 | coin.className = 'coin'; 66 | coin.style.top = Math.random() * 100 + '%'; 67 | coin.style.left = Math.random() * 100 + '%'; 68 | gold.appendChild(coin); 69 | } 70 | 71 | data.textContent = ''; 72 | data.appendChild(createDataRow('Gold', status.Gold)); 73 | data.appendChild(createDataRow('Size', status.Size + 'kg')); 74 | 75 | // TODO: update size 76 | 77 | actions.textContent = ''; 78 | status.Actions.forEach(function(action) { 79 | var button = document.createElement('button'); 80 | button.addEventListener('click', function(ev) { 81 | ev.preventDefault(); 82 | work(action.ID); 83 | }); 84 | button.textContent = action.Name; 85 | actions.appendChild(button); 86 | }); 87 | 88 | }); 89 | 90 | }()); 91 | }); -------------------------------------------------------------------------------- /work/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/work/dragon.png -------------------------------------------------------------------------------- /work/faq.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
30 | Dragotchi
31 | 32 | 37 | 38 |41 | 42 |
FAQ
45 | 46 |-
47 |
- Are you serious? 48 |
- Yes. 49 |
- How cool are dragons? 50 |
- Well, it's not clear whether they are cold- or warm-blooded. 51 |
- Why does this exist? 52 |
- This site has been built as an example for Google Codelabs. 53 |
- Where are the images from? 54 |
- The logo is from Google Maps 8-bit, the "Under Construction" gif is generally available online, some assets from openclipart, other assets were built for this site. 55 |
60 | 61 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /work/icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/work/icon-192.png -------------------------------------------------------------------------------- /work/index.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 |
30 | Dragotchi
31 | 32 | 37 | 38 |41 | 42 |
Home
45 | 46 |47 | Click and play with your very own Dragon! Feed it gold and watch it grow over time. 48 |
49 |50 | Soon it will be an excited little dragon eating villagers and burning houses down. 51 |
52 |53 | To get started, click on the Dragotchi link! 54 |
55 | 56 |
57 |
58 | 59 | Dragotchi is always !!! 60 |
61 | 62 |65 | 66 | 71 | 72 |
73 | 0
74 | 0
75 | 0
76 | 2
77 | 0
78 | 1
79 | 6
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/work/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlecodelabs/migrate-to-progressive-web-apps/05cb262d5b591e8a601192eb44f0afe987949140/work/logo.png
--------------------------------------------------------------------------------
/work/site.js:
--------------------------------------------------------------------------------
1 | // Copyright 2016 Google Inc.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | /** Intentionally empty */
16 |
--------------------------------------------------------------------------------
/work/styles.css:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright 2016 Google Inc.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 |
18 | body {
19 | background: black url(background.jpeg) repeat-x center top;
20 | background-size: 200px;
21 | color: white;
22 | text-align: center;
23 | }
24 |
25 | a {
26 | color: #ff9249;
27 | }
28 |
29 | /** I'm so sorry. */
30 | blink {
31 | animation: blink 1s step-end infinite;
32 | }
33 | @keyframes blink {
34 | 67% { opacity: 0 }
35 | }
36 |
37 | header .logo {
38 | width: 100px;
39 | }
40 | header ul {
41 | list-style: none;
42 | padding: 0;
43 | color: #555;
44 | }
45 | header li {
46 | display: inline-block;
47 | }
48 | header li::before {
49 | content: " — ";
50 | }
51 | header li:first-child::before {
52 | content: "";
53 | }
54 |
55 | .counter {
56 | display: inline-flex;
57 | margin: 20px;
58 | }
59 |
60 | .counter span {
61 | border: 1px solid #333;
62 | width: 12px;
63 | font-family: Monospace;
64 | background: linear-gradient(to top, red, blue);
65 | }
66 |
67 | dl {
68 | width: 400px;
69 | margin: 0 auto;
70 | text-align: left;
71 | }
72 |
73 | dd {
74 | margin-bottom: 1em;
75 | }
76 |
77 | section table {
78 | margin: 0 auto;
79 | text-align: left;
80 | }
81 | section table td,
82 | section table th {
83 | min-width: 50px;
84 | }
85 |
86 | .dragon {
87 | box-sizing: border-box;
88 | padding: 20px;
89 | width: 280px;
90 | height: 280px;
91 | margin: 12px auto;
92 | border: 2px solid rgba(255, 255, 255, 0.125);
93 | background: #111;
94 | border-radius: 2px;
95 | position: relative;
96 | overflow: hidden;
97 | }
98 | .dragon #guy {
99 | position: absolute;
100 | width: 100px;
101 | margin-left: -50px;
102 | margin-top: -50px;
103 | z-index: 1000;
104 | transition: transform 1s ease-in-out;
105 | }
106 | .dragon img {
107 | width: 100%;
108 | cursor: pointer;
109 | transition: transform 0.25s;
110 | }
111 | .dragon img:hover {
112 | transform: scale(1.45) rotate(10deg);
113 | }
114 |
115 | .coin {
116 | position: absolute;
117 | opacity: 0.5;
118 | width: 10px;
119 | height: 5px;
120 | margin-left: -5px;
121 | margin-top: -2px;
122 | background: yellow;
123 | border-radius: 100%; /** oval */
124 | border-bottom: 1px solid rgba(0, 0, 0, 0.5);
125 | border-top: 1px solid rgba(255, 255, 255, 0.5);
126 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.75), 0 -1px 0 rgba(0, 0, 0, 0.25);
127 | }
128 |
129 | .actions {
130 | width: 280px;
131 | height: 80px;
132 | box-sizing: border-box;
133 | border: 2px solid rgba(255, 255, 255, 0.125);
134 | background: #211;
135 | border-radius: 2px;
136 | margin: 12px auto;
137 | display: flex;
138 | padding: 2px;
139 | }
140 |
141 | .actions button {
142 | border: 0;
143 | flex-grow: 1;
144 | width: 300%; /** forces equal size */
145 | margin-left: 2px;
146 | background: rgba(255, 255, 255, 0.125);
147 | color: white;
148 | font-size: 16px;
149 | padding: 12px;
150 | opacity: 0.8;
151 | }
152 | .actions button:first-child {
153 | margin-left: 0;
154 | }
155 | .actions button:disabled {
156 | text-decoration: line-through;
157 | }
158 | .actions button:hover:not(:disabled) {
159 | opacity: 1.0;
160 | cursor: pointer;
161 | }
--------------------------------------------------------------------------------