服务工作人员不能使用nodejs服务器以脱机模式运行

我已经创build了新的项目PWA。 当我开发没有使用节点js的(socket.io运行)只是在离线运行,如我所料,需要。

但在与nodejs服务器集成时。 当上网时,运行良好的应用程序不会有任何问题。 但是当我切换到离线模式我的服务工作不运行,但显示离线浏览器。

这是我的代码节点js服务器:

var express = require('express'); var app = express(); var server = require('http').Server(app); var io = require('socket.io')(server); var cors = require('cors'); app.use(cors()); app.use(express.static(__dirname + '/')); app.use(function(req, res, next){ res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); io.on('connection', function(socket) { console.log('new connection'); socket.on('afterBid', function(data) { io.emit('bcCurrentBid', { current_bidding: data.auction_current_bidding, user_id_dominated: data.user_id_dominated }); }); }); server.listen(9991, function() { console.log('server up and running at 2205 port'); }); 

这是我的服务注册在索引js

 if ('serviceWorker' in navigator && 'PushManager' in window) { console.log('Service Worker and Push is supported'); window.addEventListener('load', function() { navigator.serviceWorker .register('./service-worker.js') .then(function() { console.log('Service Worker Registered'); }); }); } 

这是我的service-worker.js文件:

 var cacheName = 'Auction-v2'; var filesToCache = [ 'index.html', 'server.js', '/', './app/app.js', './app/listAuctionController.js', './app/auctionDetailController.js', './app/service/auctionDataService.js', './media/frontend/images/auction_logo_white.png', // './media/frontend/', // './media/catalog/', // './view/', './lib/css/materialize.min.css', './lib/css/owl.carousel.min.css', './lib/css/jquery.countdown.css', './lib/css/owl.theme.default.min.css', './lib/css/materialize-icon.css', './lib/js/jquery.min.js', './lib/js/jquery.lazyLoad.js', './lib/js/jquery.maskMoney.js', './lib/js/jquery.countdown.min.js', './lib/js/materialize.min.js', './lib/js/owl.carousel.min.js', './lib/js/angular/angular.min.js', './lib/js/angular/angular-route.min.js', './lib/js/angular/angular-sanitize.min.js', './lib/js/angular/angular-locale_id-id.js', './lib/js/angular/angular-animate.min.js', ]; var dataCacheName = 'Auction-Data-v1'; // SW Install self.addEventListener('install', function(e) { console.log('[ServiceWorker] Install'); e.waitUntil( caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); }); self.addEventListener('fetch', function(e) { // console.log('[Service Worker] Fetch', e.request.url); var dataUrl = '/backendFrame/public/api/v1/'; var dataUrl2 = '/view/'; if (e.request.url.indexOf(dataUrl) > -1 || e.request.url.indexOf(dataUrl2)) { /* * When the request URL contains dataUrl, the app is asking for fresh * weather data. In this case, the service worker always goes to the * network and then caches the response. This is called the "Cache then * network" strategy: * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network */ e.respondWith( caches.open(dataCacheName).then(function(cache) { return fetch(e.request).then(function(response){ // console.log('url to cache =' + e.request.url); cache.put(e.request.url, response.clone()); return response; }); }) ); } else { /* * The app is asking for app shell files. In this scenario the app uses the * "Cache, falling back to the network" offline strategy: * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network */ e.respondWith( caches.match(e.request).then(function(response) { return response || fetch(e.request); }) ); } }); // SW Activate self.addEventListener('activate', function(e) { console.log('[ServiceWorker] Activate'); e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if (key !== cacheName && key !== dataCacheName) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } })); }) ); return self.clients.claim(); }); 

也许有人可以给我解决scheme

服务人员只是从您的networking服务器提供的JavaScript文件。 不要紧,如果它是node.js或不。

你检查了铬debugging工具中的“应用程序”选项卡,看看服务工作者是否被加载? 如果是,请分享您的'service-worker.js'文件的代码。 注册服务人员时,您也可以添加“catch”部分。 这可能会告诉你,如果服务人员无法加载,发生了什么事情。

 window.addEventListener('load', function() { navigator.serviceWorker .register('./service-worker.js') .then(function() { console.log('Service Worker Registered'); }) .catch(function (err) { console.log('ServiceWorker registration failed: ', err); }); }); 

我在这里发布了一个类似的问题,得到了一个答案: 服务工作者不工作在离线模式与节点js服务器

为了简短起见,请记住服务人员的范围是它自己的目录和文件夹下面…它不能访问您的lib或应用程序目录…

更详细地说,这意味着如果您的内容从https://example.com/开始,则您的服务工作人员必须位于https://example.com/service-worker.js 。 如果您将其设置为https://example.com/js/service-worker.js ,它将无法正常工作。