У меня есть очень простое веб-приложение, на котором можно попрактиковаться в работе с сервисными работниками.У меня проблема в том, что я использую EJS, а EJS требует, чтобы html хранился в папке Views.Чтобы кэшировать HTML, мне нужно, чтобы JS-файл работника службы находился в том же месте, что и HTML-файл, но если я это сделаю, произойдет сбой!Я получаю сообщение об ошибке, в котором говорится, что HTML-код должен быть в файле представлений EJS
Если я переместил HTML-код в представления, то я не получу сообщение об ошибке, но работник службы ничего не кеширует!
Пожалуйста, кто-нибудь может мне посоветовать?
Вот моя текущая структура папок, в которой работник службы не выдает ошибки - но затем тоже ничего не кэширует:
Где я могу получить свой файл EJS, чтобы он кэшировался?По-видимому, для размещения HTML
требуется собственная папка. Вот мой server.js:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const request = require('request');
const apiKey = '<api key>';
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
app.get('/', function (req, res) {
res.render('weather_html');
})
app.post('/', function (req, res) {
let city = req.body.city;
let url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`
request(url, function (err, response, body) {
if(err){
res.render('weather_html', {weather: null, error: 'Error, please try again'});
} else {
let weather = JSON.parse(body)
if(weather.main == undefined){
res.render('weather_html', {weather: null, error: 'Error, please try again'});
} else {
let weatherText = `It's ${weather.main.temp} degrees in ${weather.name}!`;
res.render('weather_html', {weather: weatherText, error: null});
}
}
});
})
app.listen(3000, function () {
console.log('server is listening on port 3000!')
});
Вот файл bastard service_worker.js:
const filesToCache = [
'/'
];
const staticCacheName = 'this is the SW\'s cache';
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache whatever is in filesToCache');
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('fetch', event => {
console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log('Found ', event.request.url, ' in cache');
return response;
}
console.log('Network request for ', event.request.url);
return fetch(event.request)
.then(response => {
return caches.open(staticCacheName).then(cache => {
cache.put(event.request.url, response.clone());
return response;
});
});
}).catch(error => {
})
);
});
Мой EJS / HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test weather app</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
</head>
<body>
<p>Test weather search app</p>
<img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/AECE/production/_99805744_gettyimages-625757214.jpg">
<div class="container">
<fieldset>
<form action="/" method="post">
<input name="city" type="text" class="ghost-input" placeholder="Enter a City" required>
<input type="submit" class="ghost-button" value="Enter a city name for temperature in celsius">
</form>
<% if(locals.weather !== null){ %>
<p><%= locals.weather %></p>
<% } %>
<% if(locals.error !== null){ %>
<p><%= locals.error %></p>
<% } %>
</fieldset>
</div>
<!-- Service Worker - Checks if the browser supports a service worker, if so, registers the file server_worker.js as the SW, then logs to console-->
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service_worker.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>
</body>
</html>
Вот скриншот программного обеспечения без ошибок с использованием текущей структуры папок.Я хочу, чтобы он мог кэшировать HTML в папке представлений:
