Na minha tentativa de entender o funcionamento dos services workers estou tentando implementar o mesmo numa aplicação básica que estou servindo localmente, o problema é que o service worker falha ao se registrar, olhando mais atentamente a documentação percebo que os mesmos necessitam de HTTPS o que me leva a pergunta é possível testar um service worker localmente ou somente no server em produção? Eis meus scripts:
Meu app implementado com express.
# app.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.listen(8080, () => {
console.log('Application running...');
});
Minha página inicial(e única) que quero cachear.
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<img src="https://vuejs.org/images/logo.png" alt="Vue logo">
<h1>{{ greeting }}</h1>
<ul>
<li>
To learn more about Vue, visit
<a :href="docsURL" target="_blank">
{{ humanizeURL(docsURL) }}
</a>
</li>
<li>
For live help with simple questions, check out
<a :href="discordURL" target="_blank">
the Discord chat
</a>
</li>
<li>
For more complex questions, post to
<a :href="forumURL" target="_blank">
the forum
</a>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
greeting: 'Welcome to your Vue.js app!',
docsURL: 'http://vuejs.org/guide/',
discordURL: 'https://chat.vuejs.org',
forumURL: 'http://forum.vuejs.org/'
},
methods: {
humanizeURL: function (url) {
return url
.replace(/^https?:\/\//, '')
.replace(/\/$/, '')
}
}
})
</script>
<script charset="utf-8">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/basic-pwa/sw.js')
.then(function(reg) {
if(reg.installing) {
console.log('Service worker installing');
} else if(reg.waiting) {
console.log('Service worker installed');
} else if(reg.active) {
console.log('Service worker active');
}
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
</script>
</body>
</html>
Meu arquivo referente ao service worker.
# sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('v1').then(cache => {
return cache.addAll([
'/basic-pwa/',
'/basic-pwa/index.html'
]);
});
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(resp) {
return resp || fetch(event.request).then(function(response) {
caches.open('v1').then(function(cache) {
cache.put(event.request, response.clone());
});
return response;
});
}).catch(function() {
return caches.match('');
})
);
});