Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cansin/next-with-offline
A monorepo for tools needed to easily create a PWA with an offline view for Next.js + React.
https://github.com/cansin/next-with-offline
nextjs offline progressive-web-app react react-hooks workbox
Last synced: about 2 months ago
JSON representation
A monorepo for tools needed to easily create a PWA with an offline view for Next.js + React.
- Host: GitHub
- URL: https://github.com/cansin/next-with-offline
- Owner: cansin
- License: mit
- Created: 2020-05-11T15:07:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:36:01.000Z (about 2 years ago)
- Last Synced: 2024-10-30T04:50:18.466Z (2 months ago)
- Topics: nextjs, offline, progressive-web-app, react, react-hooks, workbox
- Language: JavaScript
- Size: 4.23 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @next-with-offline
[](https://travis-ci.com/github/cansin/next-with-offline)
[](https://github.com/cansin/next-with-offline/blob/master/LICENSE)
A suite of libraries that enables you to have a Workbox, Next.js, and React based Progressive Web App
with basic offline support.
- **[`@next-with-offline/next-plugin`](packages/next-plugin):** Next.js plugin for generating a Workbox.
- **[`@next-with-offline/react-hook`](packages/react-hook):** React hook for registering/using a Workbox.
- **[`@next-with-offline/service-worker`](packages/service-worker):** Code utilities for configuring a service worker.
## Install
```bash
yarn add @next-with-offline/next-plugin @next-with-offline/react-hook @next-with-offline/service-worker workbox-window
```
## Basic Usage
1. Update or create `next.config.js` with:
```js
const withOffline = require("@next-with-offline/next-plugin");
module.exports = withOffline({
offline: {
path: "/offline",
},
// .
// ..
// ... other Next.js config
});
```
2. Add `public/sw.js` and `public/sw.js.map` to your `.gitignore`:
```git
public/sw.js
public/sw.js.map
```
3. Create `worker.js` with:
```js
import withNext from "@next-with-offline/service-worker";
withNext({ offlinePath: "/offline", showReloadPrompt: true });
```
4. Update or create `pages/_app.js` with:
```js
import useWorkbox from "@next-with-offline/react-hook";
import { ThemeProvider } from "@material-ui/core/styles";
import { SnackbarProvider } from "notistack";
export default function App({ Component, pageProps }) {
useWorkbox({
offlinePath: "/offline",
showReloadPrompt() {
// A function that returns a Promise
// that resolves when user agrees to reload,
// or rejects if the user dismisses.
},
});
return ;
}
```
5. Create a basic `pages/offline.js` page:
```js
import React from "react";
export default function OfflinePage() {
return (
Oops, you appear to be offline. This app requires an internet connection.
);
}
export default Page;
```
### Available Options
- **offlinePath:** string or boolean - a string pathname to the offline page.
Or `false` if you want to disable.
- defaults to `/offline`.
- **showReloadPrompt:** function or boolean - set to a function that returns
a Promise that resolves when user agrees to reload, or rejects if
the user dismisses. set to `true` if you simply want to rely on the default implementation
that uses `window.confirm`, or to `false` if you want to skip waiting and claim clients.
- defaults to `false`.