0

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('');
    })
  );
});
2
  • A onde viu que o SW precisa ter HTTPS?
    – Costamilam
    Commented 7/01/2019 às 20:42
  • Na documentação diz que você pode usar services workers no localhost em desenvolvimento, mas como pode ver não estou conseguindo fazer funcionar. Commented 7/01/2019 às 21:08

1 Resposta 1

2

Service worker precisa de um ambiente seguro, e "localhost" na porta 80 é considerado um ambiente seguro.

Caso você precise realizar um teste em um ambiente não seguro, pode ligar uma flag no chrome: Insecure origins treated as secure e cadastrar o url.

chrome://flags/#unsafely-treat-insecure-origin-as-secure

obs.: lembre que não adiante apenas cachear o index.html. Precisa cachear qualquer arquivo linkado além das imagens inclusive o favicon.ico...

Nos seus exemplos acima, existe um erro no ws.js, segue arquivo sem erro...

self.addEventListener(
  'install', 
  event => {
    event.waitUntil(
      caches.open('v1')
      .then(
        cache => {
          return cache.addAll(
            [
              '/',
              '/index.html'
            ]
          )
        }
      )
    );
  }
);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .