标签: service-worker

我不明白如何在 Service Worker 的一部分中从清单 v2 迁移到 v3。发生错误Service worker registration failed

// manifest.json
"background": {
    "service_worker": "/script/background/background.js"
},

// background.js
chrome.runtime.onInstalled.addListener(onInstalled);

尝试注册服务工作者时出现此错误:

无法注册ServiceWorker:获取脚本时收到了错误的HTTP响应代码(404).

我正在使用离子,这就是我在app.js中所拥有的:

   if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      //registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }else {
    console.log('No service-worker on this browser');
  }

在目录中,我在同一文件夹上的app.js旁边有service-worker.js文件.

在ubuntu桌面上使用最新的chrome版本.

我了解到,通过正确制作的Progressive Web App,移动浏览器将显示一个横幅,提示用户在其主屏幕上"安装"该应用.

我一直在寻找一种方法来从应用程序中触发该提示,但一直无法找到任何东西.

是否有一行JavaScript可用于随时调用安装提示横幅？例如,我可以添加到安装按钮中隐藏在帮助屏幕中的东西？

如果某些用户错过了安装横幅提示,则可能很难找到"添加到主屏幕"选项.我想给他们一个按钮,他们可以点击再次提示.

我咨询过很多关于服务工作者的资源:

• 更新ServiceWorker
• ServiceWorker:Web平台的革命
• 杰克阿奇博尔德可爱的SVGOMG.

但是,我不能为我的生活找出如何在安装新的ServiceWorker后更新页面.无论我做什么,我的页面都停留在旧版本上,只有硬刷新(Cmd-Shift-R)才能修复它.1)关闭标签,2)关闭Chrome或3)的组合location.reload(true)不会为新内容提供服务.

我有一个超级简单的示例应用程序,主要基于SVGOMG.在安装时,我使用缓存一堆资源cache.addAll(),skipWaiting()如果当前版本的主要版本号与活动版本的编号不匹配(基于IndexedDB查找),我也会这样做:

self.addEventListener('install', function install(event) {
  event.waitUntil((async () => {
    var activeVersionPromise = localForage.getItem('active-version');
    var cache = await caches.open('cache-' + version);
    await cache.addAll(staticContent);
    var activeVersion = await activeVersionPromise;
    if (!activeVersion ||
      semver.parse(activeVersion).major === semver.parse(version).major) {
      if (self.skipWaiting) { // wrapping in an if while Chrome 40 is still around
        self.skipWaiting();
      }
    }
  })());
});

我正在使用一个由semver启发的系统,主要版本号表示新的ServiceWorker无法热插拔旧的ServiceWorker.这适用于ServiceWorker端 - 从v1.0.0到v1.0.1的颠簸导致工作程序立即安装在刷新上,而从v1.0.0到v2.0.0,它等待选项卡关闭并重新打开安装.

回到主线程中,我在注册后手动更新了ServiceWorker - 否则页面甚至都没有得到可用的新版本ServiceWorker的备忘录(奇怪的是我发现在ServiceWorker文献中的任何地方都很少提及):

navigator.serviceWorker.register('/sw-bundle.js', {
  scope: './'
}).then(registration => …

我尝试在fetch事件中缓存服务工作者的POST请求.

我用了cache.put(event.request, response),但退回的承诺被拒绝了TypeError: Invalid request method POST..

当我尝试使用相同的POST API时,caches.match(event.request)给了我未定义的内容.

但是当我为GET方法做同样的事情时,它起作用了:caches.match(event.request)因为GET请求给了我一个响应.

服务工作者可以缓存POST请求吗？如果他们不能,我们可以使用什么方法使应用程序真正脱机？

我ngsw-config.json(摘自文档):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

在我的网站上有一个指向RSS源的链接,该链接/api/rss应该在新的浏览器选项卡中打开而不加载Angular应用程序.如何将其从请求重定向到的资源列表中排除index.html？

UPD:我试过但没有使用以下配置(请参阅参考资料!/api/rss):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "patterns": ["!/api/rss"],
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "!/api/rss"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    } …

用于触发安装按钮的最小服务人员是什么？

我不想缓存任何内容，并且该应用程序无法在离线模式下工作，但我希望允许用户在桌面上创建快捷方式。

只有当我打开chrome时,我才会看到Chrome网页上的推送通知.我知道这个通知是通过服务工作者发送的.我想知道即使浏览器关闭或仅在打开chrome时这个后台同步是否继续,这些服务工作者同步过程才开始并开始发送推送通知.

我正在尝试将 Google 的 Firebase Cloud Messaging (FCM) 实施到我的 Nuxt.js APP 中。

到目前为止，我已经安装了 firebase，在 ./plugins 文件夹中创建了一个 firebase.js 插件，导入并初始化了 firebase 和消息传递服务，一切似乎都运行良好。

现在我不知道如何或从这里去哪里..

这个想法是在通知模块中处理 vuex 中的所有内容。

我想同时处理后台和前台通知。后台由 service-worker 处理，对于前台，我制作了一个简单的通知组件，我想在每次收到来自 FCM 的推送通知时显示该组件。

问题：

我将如何注册 Service Worker、请求许可和处理前台/后台通知？我的意思是特定于 Nuxt.js 的确切位置/文件/方式？我应该为此制作另一个插件，使用中间件文件夹还是只处理默认布局文件中的所有内容？

最干净的方法是什么？

提前致谢！

我在服务工作者中使用了sw预先缓存.我只缓存了服务工作者中的浏览器文件夹.所以服务器端渲染不能在服务工作者中工作任何人请帮助我解决这个问题.如果ssr工作服务工作者不工作,反之亦然

下面是我的sw precache config.json

module.exports = {
navigateFallback: '/index.html',
stripPrefix: 'dist/browser',
root: 'dist/browser',
staticFileGlobs: [

'dist/browser/index.html',
'dist/browser/**.js',
'dist/browser/**.css',
'dist/browser/**.ico',
'dist/browser/assets/images/**.jpg',
'dist/browser/assets/images/**.png',
'dist/browser/assets/images/**.gif',
'dist/browser/assets/js/**/**.js',
'dist/browser/assets/js/**.js',
'dist/browser/assets/css/**.css'


 ],

runtimeCaching: [{
urlPattern: /^https:\/\/tg\.s3\.rfyfg\.com\//,
handler: 'cacheFirst'
}]
};

谢谢