[英]Service worker not run in offline mode using nodejs server
i've been create new project PWA. 我一直在创建新项目PWA。 when i develop not using node js for (socket.io running) just running in offline like i expected and needed. 当我开发不使用节点js(socket.io运行)只是在线下运行像我期望和需要。
but when integration with nodejs server. 但是当与nodejs服务器集成时。 when go online the app running well not get any problem. 当上网时,运行良好的应用程序没有任何问题。 but when i change to offline mode my service work not run but show offline browser. 但是当我改为离线模式时,我的服务工作没有运行,但显示离线浏览器。
this my code node js server: 这是我的代码节点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'); });
and this is my service register in index js 这是我在索引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'); }); }); }
and this is my service-worker.js file: 这是我的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(); });
thanks maybe someone can give me solution 谢谢也许有人可以给我解决方案
I posted a similar question here and got an answer : Service Worker not working in Offline mode with node js server 我在这里发布了一个类似的问题并得到了答案: 服务工作者不在离线模式下使用节点js服务器
To make it short, keep in mind the service worker's scope is its own directory and folders below... and it cannot access your lib or app directories... 为了简短起见,请记住服务工作者的范围是它自己的目录和文件夹......并且它无法访问您的lib或app目录......
In more detail, this means that if your content starts at https://example.com/
, your service worker must live at https://example.com/service-worker.js
. 更详细地说,这意味着如果您的内容从https://example.com/
开始,则您的服务工作者必须位于https://example.com/service-worker.js
。 It won't function right if you put it as https://example.com/js/service-worker.js
. 如果您将其设置为https://example.com/js/service-worker.js
,它将无法正常运行。
The service worker is just a javascript file served from your webserver. 服务工作者只是从您的网络服务器提供的javascript文件。 It doesn't matter if it's node.js or not. 它是不是node.js并不重要。
Have you checked the 'application' tab in the chrome debugging tools to see if the service worker is loaded? 您是否检查了chrome调试工具中的“应用程序”选项卡,以查看是否已加载服务工作者? If it is, please share the code of your 'service-worker.js' file. 如果是,请分享您的'service-worker.js'文件的代码。 You can also add a 'catch' part when registering the service worker. 您还可以在注册服务工作者时添加“catch”部分。 That may show you what is going on if the service worker can't be loaded. 如果无法加载服务工作者,这可能会显示正在发生的事情。
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); }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.