服務工作程序不使用nodejs服務器在脫機模式下運行

Question

我一直在創建新項目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(); }); 

謝謝也許有人可以給我解決方案

Answer 1

我在這里發布了一個類似的問題並得到了答案： 服務工作者不在離線模式下使用節點js服務器

為了簡短起見，請記住服務工作者的范圍是它自己的目錄和文件夾......並且它無法訪問您的lib或app目錄......

更詳細地說，這意味着如果您的內容從https://example.com/開始，則您的服務工作者必須位於https://example.com/service-worker.js 。 如果您將其設置為https://example.com/js/service-worker.js ，它將無法正常運行。

Answer 2

服務工作者只是從您的網絡服務器提供的javascript文件。 它是不是node.js並不重要。

您是否檢查了chrome調試工具中的“應用程序”選項卡，以查看是否已加載服務工作者？ 如果是，請分享您的'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); }); });