通过 Share_Target 将图像从 whatsapp 共享到 angular 应用程序不起作用

Question

我正在尝试将 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';
import { CaseService } from '../services/case.service';
import { EmergencyRegisterTabBarService } from '../services/emergency-register-tab-bar.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
    // tslint:disable-next-line:component-selector
    selector: 'emergency-register-page',
    templateUrl: './emergency-register-page.component.html',
    styleUrls: ['./emergency-register-page.component.scss'],
})
export class EmergencyRegisterPageComponent implements OnInit {
    constructor(private printService: PrintTemplateService,
        private route: ActivatedRoute,
        private caseServie: CaseService,
        private tabBar: EmergencyRegisterTabBarService) {}

    ngOnInit() {

        this.printService.initialisePrintTemplates();

// I printed the this.route and tried to find the image in there but failed.
// Also used params,querParams from route.
        const data = this.route.snapshot.paramMap.get('files');
        console.log(data);

    }
}

我还尝试从这里扩展现有的 service worker 。我创建了一个新的 service worker 文件 apoms-sw.js

importScripts('./ngsw-worker.js');


self.addEventListener('fetch', event=>{
  console.log(event);
});

在我的 app.module.ts

@NgModule({
    declarations: [AppComponent, ConfirmationDialog, TreatmentRecordComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        MatDialogModule,
        NavModule,
        HttpClientModule,
        MaterialModule,
        ServiceWorkerModule.register('apoms-sw.js', { enabled: environment.production }),
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        AngularFireMessagingModule,
        AngularFireStorageModule,
        AngularFireModule.initializeApp(environment.firebase)
    ],
    exports: [],
    providers: [
        DatePipe,
        { provide: HTTP_INTERCEPTORS, useClass: HttpConfigInterceptor, multi: true },
        // { provide: LOCALE_ID, useValue: 'it-IT' },
        { provide: ErrorHandler, useClass: UIErrorHandler }
    ],
    bootstrap: [AppComponent],
})

我可以看到在远程调试过程中文件正在被命中，但它没有触发 fetch 事件侦听器。因此，如果有人能告诉我如何访问路线附带的图像。那会很好。

Answer 1

所以这里的问题之一是 Angular 创建了自己的 Service Worker。并且一个应用程序只能有一个 Service Worker。您可以在这个问题中阅读更多相关信息。

Service Worker 一个接一个地触发重复的函数，直到其中一个函数调用 respondWith。原始服务 (ngsw-worker.js) 工作线程定义的 fetch 函数中有一个 respondWith，这意味着不再传递任何消息。这意味着您需要在 ngsw-worker 火灾中的 fetch 函数之前定义任何函数。您可以在这个问题中阅读更多内容。

因此 webmanifest 应该如下所示，它位于 webmanifest 的根目录中：

"share_target": {
    "action": "/nav/emergency-register",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "image",
          "accept": "image/*"
        },
        {
          "name": "video",
          "accept": "video/*"
        }
      ]
    }
  },

然后您需要一个新文件来包含您的获取函数并导入服务工作人员。首先定义您的获取函数非常重要：

self.addEventListener('fetch', event => {

  // Handle the share_target shares
  if (event.request.method === 'POST') {

    // Make sure we're only getting shares to the emergency-register route
    const path = event.request.url.split("/").pop();

    if(path === "emergency-register"){

        //Get the images and videos from the share request
        event.request.formData().then(formData => {

            // Find the correct client in order to share the results.
            const clientId = event.resultingClientId !== "" ? event.resultingClientId : event.clientId;
            self.clients.get(clientId).then(client => {

                // Get the images and video
                const image = formData.getAll('image');
                const video = formData.getAll('video');

                // Send them to the client
                client.postMessage(
                    {
                        message: "newMedia",
                        image: image,
                        video: video
                    }
                );
            });
        });
    }
  }
});


importScripts('./ngsw-worker.js');

然后在您的 app.component 中，您可以定义捕获发布消息的函数，如果您使用 firebase 消息传递或其他向客户端发布消息的函数，请小心，您需要以某种方式区分它们：

// Set up to receive messages from the service worker when the app is in the background.
navigator.serviceWorker.addEventListener('message', (event:MessageEvent) => {

    if(event.data.hasOwnProperty('image')){

        this.emergencyTabBar.receiveSharedMediaItem(event.data);
    }

    if(event.hasOwnProperty('data')){

        this.messagingService.receiveBackgroundMessage(event.data?.firebaseMessaging?.payload);
   }

});