我下线后删除了Cache,IndexedDB,serviceworker和菜单

时间:2018-10-05 18:48:10

标签: javascript node.js caching progressive-web-apps workbox

所以我建立了一个服务工作者,它缓存了网站文件(在devtools上检查了它,它们被缓存在IndexedDB和Cache Storage中。

我正在使用工作箱,并且做了以下事情:

1)在所有必填变量/常量之后,我就在我的nodejs服务器(index.js)中使用了它:

 const https = require('https');
 const fs = require('fs');
 var path = require('path');
 const express = require('express');
 const app = express();
 const router = express.Router();
 const pool = require('./mysqldb.js');
 const pathView = __dirname + "/views/";
 const IMGPath = "/public";
 var bodyParser = require("body-parser");
 const listenPort = 8010;
 const workboxBuild = require('workbox-build');

 app.use(bodyParser.urlencoded({ extended: true }));

 app.use(bodyParser.json());

 app.set('view engine', 'ejs');

 app.use(express.static('public'));
 app.use('/public', express.static('public'));
 app.use(express.static('views'));
 app.use('/views',express.static('views'));
 router.use(function (req, res, next) {
   next();
 });

 router.get('/', function (req, res) {
    res.render(pathView + 'home.ejs', { msg:" > "  });
 });//and few more .ejs files just like this one

 app.use( "/", router);

 app.use("*",function(req,res){
 res.setHeader('Content-Type', 'text/html');
 res.status(404).send('Page introuvable !');
 });

 app.listen(listenPort, function () {
 console.log('PWA listening on port ' + listenPort );
 });

 const buildSW = () => {
 return workboxBuild.generateSW({
 globDirectory:      '/var/www/ww1sites.app/emil/NETWORLD/makenavbar/networld/samples/networldfinalv3/',
     globPatterns: [
       '**\/*.{html,json,js,css,ejs}',
     ],
     swDest:      '/var/www/ww1sites.app/emil/NETWORLD/makenavbar/networld/samples/networldfinalv3/public/ServiceWorker.js',
     clientsClaim: true,
     skipWaiting: true
   });
 }

 buildSW();

 https.createServer(options, app).listen(8000);

此buildSW()生成了具有以下内容的ServiceWorker.js文件:

  importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.2/workbox-sw.js");

  workbox.skipWaiting();
  workbox.clientsClaim();

  self.__precacheManifest = [
  {
  "url": "index.js",
  "revision": "09b1cd28e310f1e9aed3d11c967e36bf"
  },
  {
  "url": "mysqldb.js",
  "revision": "2f375ec22385cde075c3027a45f712fe"
  },
  {
  "url": "public/addSW.js",
  "revision": "db7d09ac05f8d7da77a7bccbdb037f91"
  },
  {
  "url": "public/manifest.json",
  "revision": "0addc89535552310fe57e848156eba13"
   },
    {
      "url": "public/TOKEO-ServiceWorker.js",
      "revision": "c7972d42d60771b41f1499491c3632a6"
    },
    {
      "url": "views/about.ejs",
      "revision": "11d729194a0669e3bbc938351eba5d00"
    },
    {
      "url": "views/details.ejs",
      "revision": "881d8ca1f2aacfc1617c09e3cf7364f0"
    },
    {
      "url": "views/head.ejs",
      "revision": "eaa0f2065cf822351c1f2490f9380e30"
    },
    {
      "url": "views/home.ejs",
      "revision": "7e50eec344ce4d01730894ef1d637d4d"
    },
    {
      "url": "views/home1.ejs",
      "revision": "a34ea6e5245b45aefba102dab23f68ac"
    },
    {
      "url": "views/map.ejs",
      "revision": "c3942a2a8ac5b713d63c53616676974a"
    },
    {
      "url": "views/mapbox-script.ejs",
      "revision": "1363899a94e5cb63333f8c79886cdf1b"
    },
    {
      "url": "views/navbar.ejs",
      "revision": "97aacd7b7705e72ed7696673412b96e1"
    },
    {
      "url": "views/scripts.ejs",
      "revision": "15c88be24be624a683f7be97fd8abcce"
    },
    {
      "url": "workbox-config.js",
      "revision": "20dcffa419f1b8c9e06c630df4821446"
    }
  ].concat(self.__precacheManifest || []);
  workbox.precaching.suppressWarnings();
  workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

所有文件都按照我所说的进行了缓存,但是,我意识到在IndexedDB中有一个小东西,node.js和mysqldb.js被缓存了,但是在缓存存储中却没有。我认为这很奇怪。 当我单击网页上的按钮或其他内容后从Devtools脱机时,它为我提供了标准的缺少Internet连接页面,并且Cache Storage,IndexedDB,ServiceWorker.js和manifest.json从devtools中消失了,它们是“全部删除。

我该怎么办? 帮助我了解一件事,如果我不缓存index.js(nodejs服务器),我将无法使网站脱机工作,或者即使没有缓存nodejs服务器也可以做到这一点? / p>

项目结构如下:

 PROJECT|--index.js
        |--mysqldb.js
        |--public|--addSW.js(this is the script that I used to register the servic worker to the first page that I access on the website(I places it in the home.ejs just before the </body> with a <script src=... /> and it contains only the clasic&standard registration for a service worker)
                 |--manifest.json
                 |--ServiceWorker.js
        |--views|--home.ejs
                |--home1.ejs
                |--scripts.ejs
                |--navbar.ejs
                |--map.ejs
                |--about.ejs
                |--details.ejs
                |--head.ejs

我要做的就是让该应用程序离线运行。请帮助我...

0 个答案:

没有答案