标签: next-pwa

我一直在尝试将我的应用程序部署到 vercel 一段时间，并且已经阅读了大量关于 stackoverflow 的帖子，其中存在相同/类似的fsevents问题。尽管如此，我仍然收到下面发布的相同错误。

我尝试过的事情：

• 卸载node_modules& package-lock.json，然后运行：npm i -f
• 添加 "optionalDependencies": {"fsevents": "^2.3.2"}，然后npm i -f
• 没有安装fsevents在package.json
• ...以及许多其他尝试

我的部署中总是发生的事情的屏幕截图

我对整个 fsevents/chokidar 包的内容/原因不是很熟悉，但在我阅读完之后，我的 MacOS 似乎需要它，我真的很感激一些解决这个问题的想法。

当前包.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix ."
    ] …

nextjs我将如何使用 预缓存我的应用程序的所有页面next-pwa？假设我有以下页面：

• /
• /关于
• /帖子

我希望所有这些都被预先缓存，以便在第一次加载应用程序后它们都可以离线使用。目前我正在使用自定义 webpack 配置将.next/build-manifest.json文件复制到public/build-manifest. 然后，一旦应用程序第一次加载，我就会注册一个activated处理程序来获取build-manifest.json文件，然后将它们添加到缓存中。它有效，但似乎是实现它的一种迂回方式，并且它在某种程度上取决于实现细节。我如何以更规范的方式完成同样的事情？

目前，我的next.config.js文件如下所示

const pwa = require('next-pwa')
const withPlugins = require('next-compose-plugins')
const WebpackShellPlugin = require('webpack-shell-plugin-next')

module.exports = withPlugins([
  [
    {
      webpack: (config, { isServer }) => {
        if (isServer) {
          config.plugins.push(
            new WebpackShellPlugin({
              onBuildExit: {
                scripts: [
                  'echo "Transfering files ... "',
                  'cp -r .next/build-manifest.json public/build-manifest.json',
                  'echo "DONE ... "',
                ],
                blocking: false,
                parallel: true,
              },
            })
          )
        }

        return …

我想install在网站内为我的渐进式网络应用程序添加自定义按钮。我红色了很多文章并尝试了他们提供的答案。他们使用beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    deferredPrompt = e;
});

但我面临的问题是我希望按钮直接安装 PWA，而不是触发安装提示。是否可能，如果可以，我怎样才能实现这一目标。预先感谢您。

尝试使用 Next.js + next-pwa 制作一个网站 + PWA。安装了 next-pwa，遵循此包的文档，特别是“离线后备” https://github.com/shadowwalker/next-pwa#offline-fallbacks。该网站可以作为 PWA 安装，我可以将其安装在 PC 和手机上，但除非手动在 url 中输入，否则我无法访问 _offline 页面。

next.config.js：

const withPWA = require('next-pwa');

/** @type {import('next').NextConfig} */
const nextConfig = withPWA({
  reactStrictMode: true,
  pwa: {
    dest: 'public',
    register: true,
    skipWaiting: true
  }
})

module.exports = nextConfig

sw.js 由 next-pwa 在 public 文件夹中自动生成。它有一行包含另一个文件，该文件也是由 next-pwa 生成的： importScripts("fallback-development.js"); fallback-development.js 包含：

/******/ (() => { // webpackBootstrap
/******/    "use strict";
var __webpack_exports__ = {};


self.fallback = async request => {
  // https://developer.mozilla.org/en-US/docs/Web/API/RequestDestination
  switch (request.destination) …

我有一个 Next.js 应用程序，我使用next-pwa离线模式。现在我想添加推送通知（OneSignal解决方案），我看过很多文章/教程，它们都需要创建/更新服务工作者。

所以我的问题是：我该如何做到这一点，因为服务工作人员是由 生成的next-pwa，并且由于它已缩小而似乎不可编辑。

我一直在尝试运行本地 Next.js (v 12.2.2) 项目，但由于某种原因，开发脚本无法正常工作。所有依赖项都已安装，但我仍然无法缩小脚本不起作用的原因。

运行脚本后终端看起来像这样

错误 - 请检查您的GenerateSW插件配置：[WebpackGenerateSW]“reactStrictMode”属性不应出现在此处。您的意思是财产“排除”吗？

这是next.config.js文件

const withPWA = require("next-pwa");

module.exports = withPWA({
    reactStrictMode: true,
    webpack5: true,
    webpack: (config) => {
        config.resolve.fallback = { fs: false };
        return config;
    },
    pwa: {
        dest: "public",
        register: true,
        disable: process.env.NODE_ENV === "development",
    },
    images: {
        domains: ["pbs.twimg.com", "img.icons8.com", "gateway.moralisipfs.com", "ipfs.moralis.io", "lh3.googleusercontent.com", "www.artnews.com"],
    },
    // for running with docker
    output: "standalone",
});

这是package.json文件

{
  "name": "musixverse-client",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next …