Vue CLI4-清单中的PWA插件预缓存无法获取index.html，并且未注册服务工作者
Vue CLI4是一个基于Vue.js的脚手架工具，用于快速搭建Vue.js项目。PWA（Progressive Web App）是一种使用现代Web技术构建的应用程序，具有类似原生应用的体验。
在Vue CLI4的清单中，PWA插件用于将Vue.js应用转换为PWA应用。预缓存是PWA的一个重要特性，它可以在用户访问应用时提前缓存应用的资源，以提高应用的加载速度和离线访问能力。
然而，如果PWA插件无法获取index.html并且未注册服务工作者，可能是由以下原因导致：
- 路径配置错误：请确保在Vue CLI4的配置文件中（通常是vue.config.js）正确配置了publicPath和outputDir选项，以确保生成的index.html文件能够正确被PWA插件获取。
- 缓存策略配置错误：PWA插件提供了一些缓存策略配置选项，例如workboxOptions，可以用于指定需要缓存的文件或排除不需要缓存的文件。请检查这些配置选项是否正确设置，以确保index.html被正确缓存。
- 服务工作者注册错误：PWA应用需要一个服务工作者（Service Worker）来处理离线缓存和其他PWA功能。请确保在Vue CLI4的入口文件（通常是main.js）中正确注册了服务工作者，例如通过调用register()方法。
如果以上步骤都正确配置，但问题仍然存在，可能需要进一步检查Vue CLI4和PWA插件的版本兼容性，或者查看相关文档和社区讨论，以获取更多解决方案。
对于腾讯云相关产品，推荐使用腾讯云的云开发（CloudBase）服务，它提供了一站式的云端开发平台，支持前端开发、后端开发、数据库、存储等多种功能，可以方便地部署和管理Vue.js项目，并且提供了丰富的文档和示例代码供参考。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
2回答
vue/cli-plugin:服务工作者不缓存服务器请求(带有axios)。
vue.js、progressive-web-apps、service-worker
我试图将PWA添加到项目中，但没有成功。服务工作者不会缓存服务器请求。请求地址不会添加到缓存存储中。因此，脱机模式无法工作。
项目配置：
vue温泉
使用axios库对服务器的请求
服务器响应不包含缓存控制头。
pwa使用标准的vue插件: vue /cli-plugin实现。
vue.config.js:中的PWA配置
module.exports = {
publicPath: '/',
pwa: {
name: 'Old Vehicles',
manifestOptions: {
浏览 5提问于2020-08-05得票数 1
1回答
如何在使用HTML5历史api时启用脱机支持
vue.js、offline、progressive-web-apps、html5-history、offline-mode
当使用用于url重写的历史api时，支持脱机html5模式的最佳实践(以及如何做到这一点)是什么？
例如，(假设)我在上有一个PWA应用程序，它内置了国际化。所以当我访问这个链接时，Vue路由器(理想情况下可以是任何框架- vue，react，角等)把我转到/en.
当我在线的时候，这是完美的(当然，when服务器也在处理这个重定向，所以即使你直接访问该链接，应用程序也能工作)。
然而，当我离线的时候，情况就不一样了。服务工作人员正确地缓存所有资源，因此当我访问时，所有内容都会按预期加载。但是，如果我手动输入/en，的URL，应用程序就无法加载。
关于如何实现这一点，有什么建议吗？
指向git
浏览 1提问于2018-05-25得票数 3
回答已采纳
1回答
获取缓存数据Vue CLI Vuex PWA
javascript、vue.js、caching、vuex、progressive-web-apps
如何在脱机模式下将缓存的数据从服务工作者转移到vuex商店？
该应用程序在浏览器中以脱机模式工作，但是当我将包含manifest.json文件的站点添加到主屏幕时，它不会显示缓存的数据，只显示一般的js、css和html。
我很难弄清楚，我是如何从我的PWA中获得缓存数据的。我已经缓存了数据。问题是将其检索回名为“游戏”的vuex商店状态，以便在应用程序脱机时显示。
用于缓存服务工作者的api调用的vue.config.js代码。
module.exports = {
pwa: {
workboxPluginMode: "GenerateSW",
浏览 1提问于2019-05-18得票数 1
1回答
使用Vue CLI 3创建PWA的工作盒CacheFirst策略问题
vuejs2、service-worker、progressive-web-apps、cache-control、workbox-webpack-plugin
我的PWA是最近使用Vue CLI 3创建的，它工作得很好，只是我不能让它缓存我的字体超过max-age=0的一段时间。
这是我的设置：
vue.config.sys (适用部分)
module.exports = {
pwa: {
workboxOptions: {
exclude: [/\.eot$/, /\.ttf$/],
clientsClaim: true,
skipWaiting: true,
navigateFallback: 'index.html',
runtimeCaching: [
浏览 0提问于2018-12-03得票数 1
回答已采纳
1回答
vuejs pwa防止在请求/api/ routes时使用缓存
vue.js、caching、progressive-web-apps
我已经创建了一个支持PWA的Vuejs项目，但是当我构建它的产品时，它总是使用api请求的缓存版本，我想阻止它使用api请求的缓存，或者将它的策略从cacheFirst改为NetworkFirst for api我发现我已经更改了vue.config.js以防止缓存，但它不起作用。 pwa: {
workboxOptions: {
exclude: [/.*\/api\//,],
},
}, 关于如何防止api路由上的缓存或设置networkFirst策略的帮助
浏览 19提问于2020-07-25得票数 0
1回答
如何用角8更新桌面上的PWA主屏幕图标
angular、progressive-web-apps、angular-pwa
我有一个有棱角和PWA的项目。操作系统为Windows 10，角核版本为8.2.14，pwa版本为0.803.19。清单文件是
{
"name": "App Name",
"short_name": "App Name",
"theme_color": "#313643",
"background_color": "#fafafa",
"display": "standalone",
"scope&#
浏览 3提问于2019-11-28得票数 0
3回答
将WordPress网站转换为渐进网络应用程序
wordpress、progressive-web-apps
我正在构建一个进步的Web应用程序，但到目前为止，在线文档和支持非常少。我在这封电子邮件中列出了我所有的问题。
当前对桌面的服务工作者API (脱机模式)的支持是什么？我写了一个小应用程序，它在离线模式下工作(Android-Chrome)，但不适用于我的桌面(Chrome 42)。我们需要为此配置开发环境，所以我们需要知道我们需要什么来测试我们的应用。它甚至不适用于IOS-Safari/Chrome。
服务工作广泛地使用缓存，并且有一种很好的方法可以在Dekstop Chrome上调试或未注册服务工作者内部；但是如果我在Mobile上运行我的应用程序，我将如何删除服务工作者缓存？
浏览 7提问于2016-04-12得票数 24
回答已采纳
1回答
使用Google的sw方案构建的服务人员真的可以是networkFirst吗？
javascript、caching、service-worker、progressive-web-apps、sw-precache
我运行运行Hugo的网站，最近我安装了一名服务人员，跟踪谷歌的。
这是Config文件：
module.exports = {
staticFileGlobs: [
'dist/css/**.css',
'dist/**/*.html',
'dist/images/**.*',
'dist/js/**.js'
],
skipWaiting: true,
stripPrefix: 'dist',
runtimeCaching: [{
urlPattern:
浏览 0提问于2017-05-06得票数 9
2回答
服务工作进程无法加载资源: net::ERR_INTERNET_DISCONNECTED
javascript、polymer、service-worker、sw-precache
我目前正在实施一个PWA使用聚合物+服务工作者。
一般来说，服务人员工作得很好。如果我运行我的应用程序，一切都很好。我可以看到服务工作者缓存中填满了图像、html文件、字体等等。这一切都很好。即使在离线的情况下，包含图像等的页面也可以正确加载。
问题是动态数据什么时候开始发挥作用。
我得到了以下信息：
只有在脱机模式下，服务工作者才会生成真正不会说太多并且不可调试的错误：“获取脚本时发生未知错误”
只有在脱机模式下，控制台中才会显示错误。当然，我想实现的是没有错误；在中，我希望“离线时网址响应为200”是绿色的/选中的。
我的文件夹结构如下：
- images
- fonts
- dat
浏览 29提问于2016-12-16得票数 7
回答已采纳
1回答
web应用程序如何在服务工作人员的基础上进行非正式使用？
web、service-worker
我知道有很多关于服务人员的文件，也有很多问题。
但是今天对我来说是漫长的一天，所以我现在很累读了很多文档。
我只想解释一下我对服务工作者的想法，它如何帮助我们提供web应用程序离线，我希望每个人都能告诉我它是否正确。
我所知道的关于服务工作者的全部信息是，拦截了浏览器的网络请求作业上的，并做了一些事情。所以我猜当它截取时，它会缓存每个请求。因此，当网络未连接时，服务工作者使用它缓存的数据为用户服务
谢谢你的回复，
浏览 1提问于2020-07-17得票数 0
回答已采纳
1回答
使用PWA服务工作人员在脱机模式下保存/服务web服务
javascript、cordova、vue.js、web-worker、progressive-web-apps
我有一个vue.js/Cordova应用程序，我希望从Rest web服务获得的数据可以在离线模式下使用，我首先想到的一个简单的解决方案是通过索引每个w.s响应来使用本地存储API，并使我的前端服务以脱机模式或在互联网连接缓慢的情况下从本地存储中返回数据。但是我认为直接使用本地存储API来完成这个任务是非常棘手的，我想也许使用服务工作者和pwa概念可以正确地完成任务。现在，我的问题是:在我的用例中，服务人员能完成这项工作吗？第二，在Cordova android/iOS应用程序中是否有服务人员？最后，在移动设备上运行时，兼容性问题/使用风险可能是什么？
浏览 0提问于2018-11-10得票数 1
回答已采纳
1回答
Angular PWA和缓存API
angular、typescript、caching、progressive-web-apps、browser-cache
我用Angular做了一个PWA。PWA运行良好，缓存工作正常。当离线时，所有需要的API调用都被保存到缓存中，并由服务工作者访问。 我的问题很简单，我如何通过命令访问这些数据。 当PWA离线时，服务工作者能为我做这件事是很棒的，然而，缓存中的数据是我希望其他组件使用的数据。考虑到它已经在缓存中准备好了，我不想再进行API调用。 我正在研究不同的选项，但我真的找不到任何结论。缓存API似乎很有趣，但我不知道这是否是Angular PWA保存数据的方式。 那么，有人知道如何访问服务工作者使用的缓存数据吗？
浏览 8提问于2020-01-15得票数 2
回答已采纳
1回答
sw-precache webpack -plugin webpack服务工默认模板
javascript、express、webpack、ejs、sw-precache
我正在使用sw-precache the the plugin为我的项目生成一个服务工作者，我可以在缓存中看到我所有的字体、js和css文件，但不能看到index / html文件，并且当我离线时它不能工作。我还收到一个“无法安装站点:未检测到匹配的服务工作者”的提示。当我尝试在应用程序清单上添加到主页时。
我的堆栈是一个通用的React + redux应用程序，其中Express + ejs用于索引文件。我不确定是不是因为我使用的是ejs而不是默认的html文件，但它似乎找不到该文件。有没有一种方法可以指定模板？我的sw-precache webpack -plugin的设置是：
new S
浏览 8提问于2017-01-07得票数 1
回答已采纳
2回答
Vue Cli 3如何使用官方PWA插件( Service Worker )
vue.js、service-worker、vue-cli、pwa
在我的第一个vue项目中，我尝试使用官方的PWA插件( )。我的具体问题是:捕获已注册的服务工作者并将其用于任何事情。github自述文件显示了生成的确切文件，并且在实例化后，似乎没有关于如何使用此服务工作者的文档(我要捕获注册实例吗？如果是，是如何实现的？)
我发现了这个问题：和我提供了一个更好的地方来讨论这个问题，因为我还没有找到任何关于如何使用它的示例代码或清晰的文档。
如果有人有一些示例代码，请分享。Vue和新的cli是令人难以置信的工具，记录像这样的东西是增加平台采用率的必要一步。
浏览 6提问于2018-07-07得票数 48
回答已采纳
1回答
如何在不破坏Angular PWA的情况下使用Docker运行时更改的环境变量
angular、docker、environment-variables、progressive-web-apps
我有一个用Angular编写的web应用程序，用Docker进行容器化。我以前用这些很好的解决方案解决了运行时环境变量的问题(用于开发/生产环境)：How to pass environment variables to a frontend web application? 但是！当您编写Angular PWA时，对文件的任何构建后更改，甚至是index.html，都会破坏您的PWA:服务工作者将无法验证您的文件，因为与ngsw.json相比，散列发生了变化。 我想不出用Angular PWA和Docker保持“一次构建，到处部署”模式的好方法。 有什么想法吗？ 谢谢你的帮助。
浏览 17提问于2020-12-08得票数 1
4回答
如何使用服务工作者处理index.html文件的缓存？
javascript、reactjs、service-worker、create-react-app
我目前正在使用create-react-app默认服务工作者开发一个渐进的web应用程序。
当发布一个新版本的javascript块时，我遇到了破坏缓存的问题。
在构建时，输出javascript文件使用contenthash来确保当JS文件中的内容发生变化时，文件名也会发生变化。在没有服务工作者的情况下运行时，这会成功地关闭缓存。
但是，当使用create-react-app服务工作人员时，所有静态资产(包括我的index.html文件)都会被缓存。这意味着将向用户提供旧的index.html，其中包括一个<script>标记到我的旧的缓存的javascript文件，而不是使用更
浏览 0提问于2019-11-13得票数 8
2回答
如何使Workbox与.php文件一起工作
javascript、php、json、service-worker、workbox
我对PWA很陌生，并且使用工作框；所以我有一个具有以下文件结构的测试文件夹，使用localhost作为我的服务器(即localhost/ test )
index.html
test.css
test.jpg
test.js
sw.js (代码如下所示)；
importScripts('')；
if (工作盒){ console.log(Yay! Workbox is loaded)；} console.log(Boo! Workbox didn't load)；} //precache所有站点文件workbox.precaching.precach
浏览 0提问于2018-04-16得票数 3
回答已采纳
1回答
有一种方法可以避免PWA中的每个请求都下载Spa Bundle
single-page-application、service-worker、progressive-web-apps
所以我有一个完整的客户关系管理应用程序在Vue.js中这个捆绑包大约有3mb大小，现在我正在处理PWA功能，我想知道是否有可能避免用户浏览器下载应用程序，即使用户在线，从缓存中加载它，就像它离线时的工作方式一样。类似于： 1-用户在应用程序中输入： 2- Service works检查它是否已缓存并且是最新版本。 3-如果应用程序被缓存并更新，则加载缓存存储，否则请求新的bundle.js
浏览 17提问于2019-09-06得票数 0
回答已采纳
2回答
配置sw-precache插件以加载服务器呈现的页面作为navigateFallback路由
reactjs、express、webpack、sw-precache
考虑以下场景：
我的express服务器为我的单页面应用程序的"/“路由动态生成HTML。
当用户离线时，我想将这个生成的超文本标记语言重新作为服务工作者navigateFallback提供服务。
我在我的webpack配置中使用了。
比方说，如果我通过html-webpack- index.html生成一个插件，并将index.html设置为我navigateFallback文件，那么生成的文件将由服务工作者正确地提供服务。
但是，我看不到任何方法可以使实时呈现的索引html (实时服务器为"/“路径返回的内容)被缓存并用作脱机html。
浏览 11提问于2017-01-22得票数 0
1回答
Angular6 ServiceWorker不缓存所有文件
progressive-web-apps、angular6、angular-service-worker、pwa
我生成了一个干净的Angular6项目，并使用ng add @angular/pwa获取此ngsw-config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"
浏览 0提问于2018-06-25得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
