相关疑难解决方法(0)

我有一个服务工作者脚本,它在多个站点级别上重复注册.

换句话说,同一服务工作者在www.site.ca/,www.site.ca/text-text,www.site.ca/example-example等注册.

该网站建立在PHP上,根据内容生成不同的网址,因此类似API.服务工作者注册在这些页面上的原因是因为大多数站点流量落在这些页面而不是主页上.结果是同一服务工作者在不同页面上注册了不同的ID.

有没有人有办法防止多个子级别上的同一脚本多次注册？

编辑:

即使用户不在站点上,服务工作者的目的是设置通知.此外,我所遇到的问题会对将来更新服务工作者的任何尝试产生负面影响,因为要更新多个副本.结果是当用户在特定页面上再次登陆站点时,只有一个副本会被更新.无法保证该服务工作文件的所有副本都将得到更新.此外,多个副本的结果导致用户从站点获得通知堆栈,因此这是一个问题.

编辑:

以下是我到目前为止的情况,我的理解范围定义了它的注册位置.然而问题是它需要能够在人进入站点的任何地方进行注册,因此范围被设置为"/".

我想解决的问题是防止相同服务工作文件的后续寄存器.

Localhost是实际站点的占位符.

navigator.serviceWorker.register('localhost/service-worker.js', {scope: './'})
.then(initialiseState);

在用于调试的Chrome开发工具中,生成的服务工作者的格式如下:

范围:localhost/url/stuff/
注册ID:110
活动工作者:
安装状态:ACTIVATED
运行状态:STOPPED
脚本:localhost/service-worker.js
...

范围:localhost/
注册ID:111
活动工作者:
安装状态:ACTIVATED
运行状态:STOPPED
脚本:localhost/service-worker.js
...

范围:localhost/url
注册ID:112
活动工作者:
安装状态:ACTIVATED
运行状态:STOPPED
脚本:localhost/service-worker.js
...

理想情况下,我想以某种方式将它保存到一个条目.

我有一个 angular/nodejs 应用程序，用户可以在其中查看资源列表、更新、创建和删除它们（一个基本的 CRUD 应用程序）。我想把它变成一个 PWA，这样用户就可以离线工作。它必须 ：

• 缓存资产（html、css ...）
• 缓存 GET 请求的结果
• 存储 POST/PUT/DELETE 请求，以便稍后在连接可用时分派它们。

因此，首先，我尝试按照此处的文档将 Angular 的 Service Worker 添加到我的应用程序中：https : //angular.io/guide/service-worker-getting-started ng add @angular/pwa

前两点效果很好：离线时我仍然可以查阅资源列表。但是 POST/PUT/DELETE 请求都失败了，因为它只缓存非变异请求

然后我偶然发现了这个教程，它描述了如何扩展 Angular Service Worker。

使用此代码：

importScripts('./ngsw-worker.js');
self.addEventListener('fetch', (event) => {
  console.log('fetch event !')
  // Here do something to store request if method is POST/PUT/DELETE
});

我的自定义 fetch 事件永远不会被触发，因为里面ngsw-worker.js已经定义了一个捕获事件的“fetch”事件处理程序。如果我在 Angular 之前声明我的听众：

self.addEventListener('fetch', (event) => {
  console.log('fetch event !')
  // Here do something to store request if …

我正在尝试将 WhatsApp 中的图像共享到我的应用程序。每当我将媒体项目从 WhatsApp 共享到我的应用程序时，它都会访问 webmanifest 文件并定位到 /nav/emergencyRegister 路由。我确信它会到达目标路线，因为当我从 WhatsApp 共享图像时，它会在前端打开相同的路线。

这是我的 manifest.webmanifest 文件中的代码。

{
  "name": "Apoms",
  "short_name": "Apoms",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "gcm_sender_id": "275309609166",
  "share_target": {
    "action": "/nav/emergency-register",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "images",
          "accept": "image/*"
        },
        {
          "name": "videos",
          "accept": "video/*"
        }
      ]
    }
  }

但是在EmergencyRegisterComponent.ts文件中，我不知道如何访问应该在路由参数中的图像。

这是我来自emergency-register-page.component.ts 文件的代码。

import { Component, OnInit } from '@angular/core';
import { PrintTemplateService } from '../../print-templates/services/print-template.service'; …