Capacitor、Nuxt 和 VueJS - 推送通知

Question

我是应用程序构建新手，我开始使用 nuxt 和电容器来开发 ios 和 android 应用程序。我在将推送通知与我的应用程序集成时遇到问题。我正在使用

@capacitor/push-notifications

包。关于如何使用此包将推送通知与 nuxt 和电容器集成有任何指示吗？如果有人可以一步一步地完成这个过程，将会有所帮助。

这是我的 nuxt.config.json 文件

import colors from 'vuetify/es5/util/colors'

export default {
  // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
  ssr: false,

  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    titleTemplate: '%s - title',
    title: 'title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '@/plugins/parse',
    '@/plugins/axios',
    { src: '~plugins/leaflet.js', src: '~plugins/vuesocial.js', ssr: false },
  ],

  // Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    // '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/moment',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/toast',
    //nuxt-leaflet
    'nuxt-leaflet',
    ['nuxt-stripe-module', {publishableKey:'...',}],
  ],

  // Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {},

  toast: {
    position: 'bottom-left',
    duration: 3000,
  },

  // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    transpile: ['parse', 'axios'],
  },
}

这是我的capacitor.config.json

{
    "appId":"com.undefined.mobile",
    "appName":"undefined",
    "bundledWebRuntime":false,
    "npmClient": "yarn",
    "webDir":"dist",
    "plugins": {
        "SplashScreen": {
          "launchShowDuration": 0
        }
    },
      "cordova": {},
      "server": {
        "iosScheme": "nuxtmobile"
    }
}

这是我的Podfile

platform :ios, '13.0'
use_frameworks!

# workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
  pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
  pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'
end

target 'App' do
  capacitor_pods
  # Add your Pods here
end

Answer 1

您需要在ios文件夹上设置推送通知

ios/App/App/AppDelegate.swift

更多信息请访问：https://capacitorjs.com/docs/v5/apis/push-notifications