我正在设置一个支持脱机浏览的渐进式Web应用程序。
我已经为我的主要路线('domainsample.com/')设置了脱机浏览,即使脱机也可以响应200。
但是当我导航到其他路线('domainsample.com/about')时,我收到No Internet Page
错误。
这里是我在Heroku中部署的示例URL:https://pwa-hehe.herokuapp.com
[我使用Vue CLI 3设置了项目,并使用Node.js和Express.js在服务器中运行我的dist文件夹。
// server.js
const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')
const app = express()
const staticFileMiddleware = express.static(path.join(__dirname + '/dist'))
app.use(staticFileMiddleware)
app.use(history({
disableDotRule: true,
verbose: true
}))
app.use(staticFileMiddleware)
app.get('/', function (req, res) {
res.render(path.join(__dirname + '/dist/'))
})
var server = app.listen(process.env.PORT || 3000, function () {
var port = server.address().port
console.log("App now running on port", port)
})
// manifest.json
{
"name": "pwa-offline",
"short_name": "pwa-offline",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
// service-worker.js
/**
* Welcome to your Workbox-powered service worker!
*
* You'll need to register this file in your web app and you should
* disable HTTP caching for this file too.
*
*
* The rest of the code is auto-generated. Please don't update this file
* directly; instead, make changes to your Workbox build configuration
* and re-run your build process.
*
*/
importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
importScripts(
"/precache-manifest.d3f1ce5d8331bddc555348f44cfba9d8.js"
);
workbox.core.setCacheNameDetails({prefix: "pwa-offline"});
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
*
*/
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
问题是您的服务工作者不知道要缓存哪些资产。 self.__precacheManifest
的值是多少? (可能是网络清单文件)。
您需要配置工作箱才能为precacheAndRoute
方法拥有一些资产,因为这将指示服务工作者在哪些文件上缓存缓存以及何时缓存。类似于:
workbox.precaching.precacheAndRoute([
'/styles/example.ac29.css',
'/app/offlinePage.js',
'/app/offlinePage.html',
// ... other entries ...
]);
默认情况下,服务工作者不知道要缓存哪些资产或HTTP响应,因此我们必须根据我们的要求定义和实施缓存策略。
我写了一篇有关service workers and the available caching strategies的文章。如果您想加深话题,请看一下。