├── .gitignore
├── LICENSE
├── README.md
├── favicon.ico
├── index.html
└── service-worker.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | ### OSX ###
 2 | *.DS_Store
 3 | .AppleDouble
 4 | .LSOverride
 5 | 
 6 | # Icon must end with two 
 7 | Icon
 8 | # Thumbnails
 9 | ._*
10 | # Files that might appear in the root of a volume
11 | .DocumentRevisions-V100
12 | .fseventsd
13 | .Spotlight-V100
14 | .TemporaryItems
15 | .Trashes
16 | .VolumeIcon.icns
17 | .com.apple.timemachine.donotpresent
18 | # Directories potentially created on remote AFP share
19 | .AppleDB
20 | .AppleDesktop
21 | Network Trash Folder
22 | Temporary Items
23 | .apdisk
24 | 
25 | ### Node ###
26 | # Logs
27 | logs
28 | *.log
29 | npm-debug.log*
30 | 
31 | # Runtime data
32 | pids
33 | *.pid
34 | *.seed
35 | *.pid.lock
36 | 
37 | # Directory for instrumented libs generated by jscoverage/JSCover
38 | lib-cov
39 | 
40 | # Coverage directory used by tools like istanbul
41 | coverage
42 | 
43 | # nyc test coverage
44 | .nyc_output
45 | 
46 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
47 | .grunt
48 | 
49 | # node-waf configuration
50 | .lock-wscript
51 | 
52 | # Compiled binary addons (http://nodejs.org/api/addons.html)
53 | build/Release
54 | 
55 | # Dependency directories
56 | node_modules
57 | jspm_packages
58 | 
59 | # Optional npm cache directory
60 | .npm
61 | 
62 | # Optional eslint cache
63 | .eslintcache
64 | 
65 | # Optional REPL history
66 | .node_repl_history
67 | 
68 | # Output of 'npm pack'
69 | *.tgz
70 | 
71 | # Yarn Integrity file
72 | .yarn-integrity
73 | 
74 | # Nuxt build
75 | .nuxt
76 | 
77 | # Nuxt generate
78 | dist


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Sarah Drasner
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🚨 Firefighter Offline Demo
 2 | 
 3 | ![Firefighter Offline Demo](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/firefighter-sm.gif 'Firefighter Offline Demo')
 4 | 
 5 | ### 🔗 Live demo at
 6 | 
 7 | [https://sdras.github.io/firefighter-demo/](https://sdras.github.io/firefighter-demo/)
 8 | 
 9 | ### ➡ check the console
10 | 
11 | There’s a firehouse near where I live, and they have some sufficiently complex systems to help make sure that everything is online and functioning. I went out to their station to learn about how everything works and see if there was anything I could build that might help. Here’s what I learned:
12 | 
13 | When the fire truck goes out, it has to communicate with a dispatcher, which will help facilitate if they need more water, supplies, or backup.
14 | 
15 | The app is very simple, purposefully so- because they want everyone to be able to use it, quickly, at a glance, and there aren’t that many things they might need. For their use case, what they created is perfect.
16 | 
17 | But what happens if they're all sudden offline? What happens if they can't communicate?
18 | 
19 | Right now, currently, it fails. They’re just hosed. Get it? Hosed. `dad joke alert`
20 | 
21 | So, here’s our opportunity. What I did was make a project that uses the following technologies to solve this problem for them:
22 | 
23 | * service workers
24 | * `backgroundSync`
25 | * `client.postMessage`
26 | 
27 | Additionally:
28 | 
29 | * Vue.js
30 | 
31 | Articles explaining the demo will be available soon.
32 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sdras/firefighter-demo/8836729ca39c2d97b8462f03a5a657550ff478b7/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>Firefighter App Offline</title>
  7 |   <style>
  8 |     html,
  9 |     body {
 10 |       margin: 0;
 11 |       padding: 0;
 12 |       font-family: 'Assistant', sans-serif;
 13 |       background: #222;
 14 |       color: white;
 15 |     }
 16 | 
 17 |     .button-area {
 18 |       display: flex;
 19 |       justify-content: center;
 20 |       align-items: center;
 21 |       align-items: stretch;
 22 |       flex-direction: row;
 23 |       margin-top: 50px;
 24 |     }
 25 | 
 26 |     button {
 27 |       height: 100px;
 28 |       display: inline-block;
 29 |       border-radius: 20px;
 30 |       background: red;
 31 |       margin: 5px;
 32 |       width: 11%;
 33 |       cursor: pointer;
 34 |       font-size: 16px;
 35 |       text-transform: uppercase;
 36 |       border: none;
 37 |       letter-spacing: 0.03em;
 38 |       box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .1),
 39 |       inset 0 -.3em 0 hsla(0, 0%, 0%, .25),
 40 |       0 .3em .3em hsla(0, 0%, 0%, .05);
 41 |       font-weight: bold;
 42 |       text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
 43 |       transition: 0.2s all ease;
 44 |       transform: translate3d(0, 0, 0);
 45 |     }
 46 | 
 47 |     button:focus {
 48 |       outline: 1px dashed #666;
 49 |       border-radius: 20px;
 50 |     }
 51 | 
 52 |     button:active {
 53 |       box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .2),
 54 |       inset 0 2px 0 hsla(0, 0%, 100%, .1),
 55 |       inset 0 .25em .5em hsla(0, 0%, 0%, .05);
 56 |       transform: translate3d(0, 5px, 0);
 57 |       padding-bottom: .5em;
 58 |     }
 59 | 
 60 |     .green,
 61 |     .enroute,
 62 |     .status {
 63 |       background: #19a974;
 64 |     }
 65 | 
 66 |     .blue,
 67 |     .water {
 68 |       background: #659ce4;
 69 |     }
 70 | 
 71 |     .yellow,
 72 |     .clear {
 73 |       background: #ffde37;
 74 |     }
 75 | 
 76 |     .purple,
 77 |     .details {
 78 |       background: #a463f2;
 79 |     }
 80 | 
 81 |     .orange {
 82 |       background: #ff6300;
 83 |     }
 84 | 
 85 |     .red,
 86 |     .scene {
 87 |       background: #fb2a34;
 88 |     }
 89 | 
 90 |     .dark-red,
 91 |     .backup {
 92 |       background: #e7040f;
 93 |     }
 94 | 
 95 |     .light-blue,
 96 |     .available {
 97 |       background: #96ccff;
 98 |     }
 99 | 
100 |     .status {
101 |       padding: 2px 10px;
102 |       text-align: center;
103 |     }
104 | 
105 |     .status p {
106 |       margin: 7px 0;
107 |     }
108 | 
109 |     .info {
110 |       margin: 50px auto 0;
111 |       width: 60%;
112 |       padding: 10px;
113 |       border: 1px solid #555;
114 |       background: #111;
115 |     }
116 | 
117 |     .info p {
118 |       padding: 12px;
119 |       margin: 0;
120 |       border-bottom: 1px solid #333;
121 |       color: #ccc;
122 |       letter-spacing: 0.03em;
123 |     }
124 | 
125 |     .info p span {
126 |       color: white;
127 |       text-transform: uppercase;
128 |     }
129 | 
130 |     .info p:last-child {
131 |       border-bottom: 0;
132 |     }
133 |   </style>
134 |   <link href="https://fonts.googleapis.com/css?family=Assistant:400,700" rel="stylesheet">
135 | </head>
136 | 
137 | <body>
138 |   <div id="app">
139 |     <div :class="[{ red: offline }]" class="status">
140 |       <p>{{ status }}</p>
141 |     </div>
142 |     <div class="button-area">
143 |       <button @click="requestButton(type)" v-for="type in typesOfRequest" :class="type">
144 |         {{ type }}
145 |       </button>
146 |     </div>
147 |     <div v-if="responseSuccess" class="info">
148 |       <p v-for="item in messageQueue" v-html="item"></p>
149 |     </div>
150 |   </div>
151 | 
152 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
153 | 
154 |   <script>
155 |     var vm = new Vue({
156 |       el: '#app',
157 |       data: {
158 |         status: '',
159 |         offline: false,
160 |         responseSuccess: false,
161 |         messageQueue: [],
162 |         typesOfRequest: ['enroute', 'on scene', 'water', 'backup', 'clear returning', 'get details', 'available']
163 |       },
164 |       methods: {
165 |         isOnline() {
166 |           if (navigator.onLine) {
167 |             this.status = `Online. Clear to send.`
168 |             this.offline = false
169 |           }
170 |           else {
171 |             this.status = `Offline. But don't worry, your requests will still be processed soon as you are connected.`
172 |             this.offline = true
173 |           }
174 |         },
175 |         updateRequest(response, type) {
176 |           if (response === 200) {
177 |             this.responseSuccess = true
178 |             this.messageQueue.push(`You successfully sent a message: <span>${type}</span>`)
179 |           }
180 |         },
181 |         requestButton(type) {
182 |           var vueThis = this
183 |           if ('serviceWorker' in navigator) {
184 |             navigator.serviceWorker.register('./service-worker.js').then((registration) => {
185 |               return navigator.serviceWorker.ready;
186 |             }).then((registration) => {
187 |               registration.sync.register(`request-${type}`).then(() => {
188 |                 console.log('%c sync registered', 'font-size: 16px; background: #e27403; color: #ffffff; border-radius: 5px; padding: 5px 25px 5px 10px; line-height: 30px;');
189 |               }).catch(function (error) {
190 |                 console.log('Unable to fetch resources.');
191 |               });
192 |             }).catch(function (error) {
193 |               console.log('Unable to register Service Worker.');
194 |             });
195 |           }
196 |           else {
197 |             console.log('Service Worker functionality not supported.');
198 |           }
199 |         }
200 |       }
201 |     })
202 | 
203 |     window.addEventListener('online', vm.isOnline);
204 |     window.addEventListener('offline', vm.isOnline);
205 |     vm.isOnline();
206 | 
207 |     navigator.serviceWorker.addEventListener('message', function handler(event) {
208 |       vm.updateRequest(event.data.response, event.data.resource)
209 |     });
210 | 
211 |   </script>
212 | </body>
213 | 
214 | </html>


--------------------------------------------------------------------------------
/service-worker.js:
--------------------------------------------------------------------------------
 1 | const styles =
 2 |   'font-size: 16px; border-radius: 5px; padding: 5px 25px 5px 10px; line-height: 30px;'
 3 | 
 4 | self.addEventListener('install', event => {
 5 |   self.skipWaiting()
 6 | })
 7 | 
 8 | self.addEventListener('activate', event => {
 9 |   if (self.clients && clients.claim) {
10 |     clients.claim()
11 |   }
12 | })
13 | 
14 | self.addEventListener('sync', event => {
15 |   let type = event.tag.split('-')[1]
16 |   console.log(
17 |     `%c sync event fired: request ${type}`,
18 |     `${styles} background: #00449e; color: #cdecff;`
19 |   )
20 |   event.waitUntil(fetchResource(type))
21 | })
22 | 
23 | const fetchResource = resource => {
24 |   console.log(
25 |     `%c getting response info: ${resource}`,
26 |     `${styles} background: #5e2ca5; color: #d3b9f3;`
27 |   )
28 |   fetch('//jsonplaceholder.typicode.com/users')
29 |     .then(response => {
30 |       return response
31 |     })
32 |     .then(text => {
33 |       console.log(
34 |         '%c Request successful:',
35 |         `${styles} background: #137752; color: #9eebcf;`
36 |       )
37 |       console.log(text)
38 | 
39 |       const message = {
40 |         response: text.status,
41 |         resource: resource
42 |       }
43 | 
44 |       self.clients
45 |         .matchAll()
46 |         .then(all => all.map(client => client.postMessage(message)))
47 |     })
48 |     .catch(error => {
49 |       console.log('Request failed', error)
50 |     })
51 | }
52 | 


--------------------------------------------------------------------------------