DEV Community: ArcCosine

Enable PWA with next.js 13 or later using next-pwa (disabled in development environment)

ArcCosine — Sun, 28 May 2023 00:50:39 +0000

Maybe next-pwa will support it in time, so you can wait and it will be fine, but this is a patch code for those who really want to support it right now. Version,

next ^13.4.2
next-pwa ^5.6.0

The file to be modified is next-pwa ^5.6.0. The file to be modified is next.config.js

next.config.js

/** @type {import('next').NextConfig} */

const path = require("path");

const isDev = process.env.NODE_ENV !== "production";

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

    dest: "public",

    disable: isDev,

    buildExcludes: ["app-build-manifest.json"],

});

const generateAppDirEntry = (entry) => {

    const packagePath = require.resolve("next-pwa");

    const packageDirectory = path.dirname(packagePath);

    const registerJs = path.join(packageDirectory, "register.js");

    return entry().then((entries) => {

        // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427

        if (entries["main-app"] && !entries["main-app"].includes(registerJs)) {

            if (Array.isArray(entries["main-app"])) {

                entries["main-app"].unshift(registerJs);

            } else if (typeof entries["main-app"] === "string") {

                entries["main-app"] = [registerJs, entries["main-app"]];

            }

        }

        return entries;

    });

};

const nextConfig = {

    experimental: {

        appDir: true,

    },

    reactStrictMode: true,

    webpack(config) {

        if( !isDev ){

            const entry = generateAppDirEntry(config.entry);

            config.entry = () => entry;

        }

        return config;

    },

};

module.exports = withPWA(nextConfig);

Referenced Sources

Next v13 app-build-manifest.json - Does not register a service worker that controls page and start_url #424

How add keyboard shortcuts on google search pages

ArcCosine — Thu, 18 Oct 2018 13:17:40 +0000

Hi, there.

How do you open a link when you go to the Google search results page?
Use mouse?
Use tab key?

If so, you are missing valuable user experience.

In the past, short cuts were installed on the Google search result page.
Unfortunately, that function was killed.

Solution

I wanted to get the impression, I made it.
This is an extension of Google Chrome.

fake-google-keyboard-shortcuts

I have not tested everything, but it should work in most countries.

Documentation

https://github.com/ArcCosine/fake-google-keyboard-shortcuts

See github.

How to use.

Easy to use.

Install, search keywords on google, and use j or k or enter or /.
Have a nice experience!

Multistage SSH's configuration.

ArcCosine — Thu, 02 Aug 2018 09:08:49 +0000

Multistage ssh

In some circumstances, it was necessary to use multistage SSH.
(It is bad that "ssh port 22 Operation timed out" comes out almost on AWS.)

Preparation

Create server1's private key.
Create server2's private key.

Update config

Edit ssh config file.

vim ~/.ssh/config

Add the following parameters.

Host preserver
  HostName server2.com
  ForwardAgent yes
  User server2user-name 
  IdentityFile ~/.ssh/server2key
  ProxyCommand ssh -l server1user-name -i ~/.ssh/server1key -p port-number server1.com -W %h:%p

Command

ssh-add ~/.ssh/server2key
ssh preserver

Enjoy!

Restore ftp and telnet erased by macOS High Sierra

ArcCosine — Mon, 27 Nov 2017 16:28:51 +0000

macOS High Sierra can not use ftp and telnet

https://discussions.apple.com/thread/8093031?start=0&tstart=0

I understand the idea of wanting to be secure, but how about erasing basic tools?

Resurrection spell

brew install inetutils

Reference

https://apple.stackexchange.com/questions/299758/how-to-get-bsd-ftp-and-telnet-back-in-10-13-high-sierra

How to use tag

ArcCosine — Wed, 15 Nov 2017 16:26:03 +0000

<ruby> tag? What is that?
If you see it for the first time, you may not know how to use it.

The <ruby> tag is used mainly to indicate how to read kanji.
For example,

<ruby><rb>花</rb><rp>(</rp><rt>はな</rt><rp>)</rp></ruby>

花(はな)

~~Because the style has been reset in dev.to, it is not displayed in the style that looks good in Japan:)~~
Since Ben responded quickly, it is displayed as expected. Great.

You can apply this to emoji.

For example,

<ruby><rb>🌼</rb><rp>(</rp><rt>Flower</rt><rp>)</rp></ruby>

🌼(Flower)

It's a nice feeling!

You can play like this.
🍺🍕🍺🍕🍺🍕🍺🍕(Today is Product Hunt)

Let's enjoy new expressions with <ruby> tag!