npmpackage.info

gatsby-plugin-offline

The best React-based framework with performance, scalability and security built in.

6.14.0

55,655

MIT

JavaScript

129.00 B

41,456,224 6.8

Installations

npm install gatsby-plugin-offline

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=18.0.0

Node Version

20.11.1

NPM Version

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Score

Supply Chain

53.8

Quality

Maintenance

Vulnerability

89.4

License

Pull Requests

Open

201

Total

22,284

Closed

3,936

Merged

18,147

Issues

Open

200

Total

14,087

Closed

13,887

Releases

149

gatsby-source-shopify@9.0.0

Published on 07 Jan 2025

gatsby-link@5.14.1

Published on 07 Jan 2025

gatsby-source-contentful@8.15.0

Published on 07 Jan 2025

v5.14.0

gatsby@5.14.0

Published on 06 Nov 2024

gatsby-source-shopify@8.13.2

Published on 28 Oct 2024

gatsby-source-wordpress@7.13.5 and 6 more...

gatsby-source-wordpress@7.13.5

Published on 28 Oct 2024

View all 149 releases

Contributors

3,984

View all 3,984 contributors

Languages

JavaScript

TypeScript

CSS

HTML

MDX

Shell

Dockerfile

PHP

EJS

Python

Less

SCSS

Stylus

JavaScript (59%)

TypeScript (38.63%)

CSS (1.05%)

HTML (0.69%)

MDX (0.44%)

Shell (0.12%)

Dockerfile (0.03%)

PHP (0.02%)

EJS (0.01%)

Developer

gatsbyjs

Download Statistics

Total Downloads

41,456,224

Last Day

8,457

Last Week

43,027

Last Month

197,276

Last Year

3,224,594

GitHub Statistics

55,655 Stars

21,720 Commits

10,304 Forks

727 Watching

473 Branches

3,984 Contributors

Bundle Size

142.00 B

Minified

129.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

6.14.0

Package Id

gatsby-plugin-offline@6.14.0

Unpacked Size

94.40 kB

Size

19.78 kB

File Count

NPM Version

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Node Version

20.11.1

Publised On

06 Nov 2024

Total Downloads

Cumulative downloads

Total Downloads

41,456,224

Last day

-0.8%

8,457

Compared to previous day

Last week

-15.7%

43,027

Compared to previous week

Last month

3.3%

197,276

Compared to previous month

Last year

-38%

3,224,594

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

gatsby-plugin-offline

Adds drop-in support for making a Gatsby site work offline and more resistant to bad network connections. It uses Workbox Build to create a service worker for the site and loads the service worker into the client.

If you're using this plugin with gatsby-plugin-manifest (recommended) this plugin should be listed after that plugin so the manifest file can be included in the service worker.

Install

npm install gatsby-plugin-offline

How to use

1// In your gatsby-config.js
2plugins: [`gatsby-plugin-offline`]

Available options

In gatsby-plugin-offline 3.x, the following options are available:

precachePages lets you specify pages whose resources should be precached by the service worker, using an array of globs. For example:
```
1plugins: [
2  {
3    resolve: `gatsby-plugin-offline`,
4    options: {
5      precachePages: [`/about-us/`, `/projects/*`],
6    },
7  },
8]
```
Note: while essential resources of specified pages will be precached, such as JavaScript and CSS, non-essential resources such as fonts and images will not be included. Instead, these will be cached at runtime when a user visits a given page that includes these resources.

appendScript lets you specify a file to be appended at the end of the generated service worker (sw.js). For example:

1plugins: [
2  {
3    resolve: `gatsby-plugin-offline`,
4    options: {
5      appendScript: require.resolve(`src/custom-sw-code.js`),
6    },
7  },
8]

1// show a notification after 15 seconds (the notification
2// permission must be granted first)
3setTimeout(() => {
4  self.registration.showNotification("Hello, world!")
5}, 15000)
6
7// register a custom navigation route
8const customRoute = new workbox.routing.NavigationRoute(({ event }) => {
9  // ...
10})
11workbox.routing.registerRoute(customRoute)

debug specifies whether Workbox should show debugging output in the browser console at runtime. When undefined, defaults to showing debug messages on localhost only.

workboxConfig allows you to override the default Workbox options - see Overriding Workbox configuration. For example:

1plugins: [
2  {
3    resolve: `gatsby-plugin-offline`,
4    options: {
5      workboxConfig: {
6        importWorkboxFrom: `cdn`,
7      },
8    },
9  },
10]

Upgrading from 2.x

To upgrade from 2.x to 3.x, move any existing options into the workboxConfig option. If you haven't specified any options, you have nothing to do.

For example, here is a 2.x config:

1plugins: [
2  {
3    resolve: `gatsby-plugin-offline`,
4    options: {
5      importWorkboxFrom: `cdn`,
6    },
7  },
8]

Here is the equivalent 3.x config:

1plugins: [
2  {
3    resolve: `gatsby-plugin-offline`,
4    options: {
5      workboxConfig: {
6        importWorkboxFrom: `cdn`,
7      },
8    },
9  },
10]

In version 3, Workbox is also upgraded to version 4 so you may need to update your workboxConfig if any of those changes apply to you. Please see the docs on Google Developers for more information.

Overriding Workbox configuration

When adding this plugin to your gatsby-config.js, you can use the option workboxConfig to override the default Workbox config. To see the full list of options, see this article on Google Developers.

The default workboxConfig is as follows. Note that some of these options are configured automatically, e.g. globPatterns. If you're not sure about what all of these options mean, it's best to leave them as-is - otherwise, you may end up causing errors on your site, causing old files to be remain cached, or even breaking offline support.

1const options = {
2  importWorkboxFrom: `local`,
3  globDirectory: rootDir,
4  globPatterns,
5  modifyURLPrefix: {
6    // If `pathPrefix` is configured by user, we should replace
7    // the default prefix with `pathPrefix`.
8    "/": `${pathPrefix}/`,
9  },
10  cacheId: `gatsby-plugin-offline`,
11  // Don't cache-bust JS or CSS files, and anything in the static directory,
12  // since these files have unique URLs and their contents will never change
13  dontCacheBustURLsMatching: /(\.js$|\.css$|static\/)/,
14  runtimeCaching: [
15    {
16      // Use cacheFirst since these don't need to be revalidated (same RegExp
17      // and same reason as above)
18      urlPattern: /(\.js$|\.css$|static\/)/,
19      handler: `CacheFirst`,
20    },
21    {
22      // page-data.json files, static query results and app-data.json
23      // are not content hashed
24      urlPattern: /^https?:.*\/page-data\/.*\.json/,
25      handler: `StaleWhileRevalidate`,
26    },
27    {
28      // Add runtime caching of various other page resources
29      urlPattern:
30        /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
31      handler: `StaleWhileRevalidate`,
32    },
33    {
34      // Google Fonts CSS (doesn't end in .css so we need to specify it)
35      urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
36      handler: `StaleWhileRevalidate`,
37    },
38  ],
39  skipWaiting: true,
40  clientsClaim: true,
41}

Remove

If you want to remove gatsby-plugin-offline from your site at a later point, substitute it with gatsby-plugin-remove-serviceworker to safely remove the service worker. First, install the new package:

1npm install gatsby-plugin-remove-serviceworker
2npm uninstall gatsby-plugin-offline

Then, update your gatsby-config.js:

1 plugins: [
2-  `gatsby-plugin-offline`,
3+  `gatsby-plugin-remove-serviceworker`,
4 ]

This will ensure that the worker is properly unregistered, instead of leaving an outdated version registered in users' browsers.

Notes

Empty View Source and SEO

Gatsby offers great SEO capabilities and that is no different with gatsby-plugin-offline. However, you shouldn't think that Gatsby doesn't serve HTML tags anymore when looking at your source code in the browser (with Right click => View source). View source doesn't represent the actual HTML data since gatsby-plugin-offline registers and loads a service worker that will cache and handle this differently. Your site is loaded from the service worker, not from its actual source (check your Network tab in the DevTools for that).

To see the HTML data that crawlers will receive, run this in your terminal:

on Windows (using powershell):

1Invoke-WebRequest https://www.yourdomain.tld | Select -ExpandProperty Content

on Mac OS/Linux:

1curl https://www.yourdomain.tld

Alternatively you can have a look at the /public/index.html file in your project folder.

App shell and server logs

Server logs (like from Netlify analytics) may show a large number of pageviews to a route like /offline-plugin-app-shell-fallback/index.html, this is a result of gatsby-plugin-offline adding an app shell to the page. The app shell is a minimal amount of user interface that can be cached offline for reliable performance loading on repeat visits. The shell can be loaded from the cache, and the content of the site loaded into the shell by the service worker.

Using with gatsby-plugin-manifest

If using this plugin with gatsby-plugin-manifest you may find that your icons are not cached. In order to solve this, update your gatsby-config.js as follows:

1// gatsby-config.js
2{
3   resolve: 'gatsby-plugin-manifest',
4   options: {
5      icon: 'icon.svg',
6      cache_busting_mode: 'none'
7   }
8},
9{
10   resolve: 'gatsby-plugin-offline',
11   options: {
12      workboxConfig: {
13         globPatterns: ['**/icon-path*']
14      }
15   }
16}

Updating cache_busting_mode is necessary. Otherwise, workbox will break while attempting to find the cached URLs. Adding the globPatterns makes sure that the offline plugin will cache everything. Note that you have to prefix your icon with icon-path or whatever you may call it

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

8

SAST

Determines if the project uses static code analysis.

7

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/schedule-stale.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/gatsbyjs/gatsby/schedule-stale.yml/master?enable=pin
Warn: containerImage not pinned by hash: .github/actions/gatsby-site-showcase-validator/Dockerfile:1: pin your Docker image by updating node:10-slim to node:10-slim@sha256:88932859e3d022d79161b99628c4c2c50e836437455e2d1b1a008d98367b10d6
Warn: containerImage not pinned by hash: .github/actions/high-priority-prs/Dockerfile:1: pin your Docker image by updating node:10-slim to node:10-slim@sha256:88932859e3d022d79161b99628c4c2c50e836437455e2d1b1a008d98367b10d6
Warn: containerImage not pinned by hash: .gitpod.Dockerfile:1: pin your Docker image by updating gitpod/workspace-full to gitpod/workspace-full@sha256:bec45ebdcc9b9c5ec28d5c61c16bf599200aa0d2dc1e69e2ed8ab0a424bae6db
Warn: containerImage not pinned by hash: benchmarks/docker-runner/Dockerfile:1: pin your Docker image by updating node:14-buster to node:14-buster@sha256:a158d3b9b4e3fa813fa6c8c590b8f0a860e015ad4e59bbce5744d2f6fd8461aa
Warn: containerImage not pinned by hash: integration-tests/gatsby-source-wordpress/docker/wordpress/Dockerfile:1: pin your Docker image by updating wordpress:5.9 to wordpress:5.9@sha256:f9d68493ee98ea8f39e6e0fc2327b48e0b555ef0ec3fcc06b8d42cbc539c49a4
Warn: containerImage not pinned by hash: integration-tests/gatsby-source-wordpress/docker/wp-cli/Dockerfile:1: pin your Docker image by updating wordpress:cli-php7.4 to wordpress:cli-php7.4@sha256:946a8b7f237f6cf90d8f04aff952544a0332d43374d598925dcf0180e4441c6c
Warn: npmCommand not pinned by hash: .gitpod.Dockerfile:8
Warn: npmCommand not pinned by hash: benchmarks/docker-runner/Dockerfile:6
Warn: npmCommand not pinned by hash: examples/build-all-examples.sh:34
Warn: npmCommand not pinned by hash: scripts/e2e-test.sh:17
Warn: npmCommand not pinned by hash: scripts/e2e-test.sh:17
Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 6 containerImage dependencies pinned
Info: 1 out of 6 npmCommand dependencies pinned

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

85 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-9pv7-vfvm-6vr7
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-f9xv-q969-pqx4
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-8gh8-hqwg-xf34
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-8cf7-32gw-wr33
Warn: Project is vulnerable to: GHSA-hjrf-2m68-5959
Warn: Project is vulnerable to: GHSA-qwph-4952-7xr6
Warn: Project is vulnerable to: GHSA-3wc5-fcw2-2329
Warn: Project is vulnerable to: GHSA-64fm-8hw2-v72w
Warn: Project is vulnerable to: GHSA-f98w-7cxr-ff2h
Warn: Project is vulnerable to: GHSA-cg87-wmx4-v546
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-4r6h-8v6p-xvw6
Warn: Project is vulnerable to: GHSA-5pgg-2g8v-p4x9
Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

6.8

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to gatsby-plugin-offline

gatsby-plugin-offline-next

5.2.3

Gatsby plugin which sets up a site to be able to run offline

@sekmet/gatsby-plugin-offline

2.2.7

Gatsby plugin which sets up a site to be able to run offline with push notification support

gatsby-plugin-appsync

1.0.9

This plugin provides offline support and non-offline support with AWS Appysnc.

gatsby-plugin-sw

1.0.1

Similar to gatsby-plugin-offline but you can customize the service worker (e.g. add notifications).

gatsby-plugin-offline

Installations

Developer Guide

No

CommonJS

>=18.0.0

20.11.1

lerna/3.22.1/node@v20.11.1+arm64 (darwin)

Score

Pull Requests

201

22,284

3,936

18,147

Issues

200

14,087

13,887

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

142.00 B

129.00 B

Maintainers

Package Meta Information

Total Downloads

41,456,224

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

gatsby-plugin-offline

Install

How to use

Available options

Upgrading from 2.x

Overriding Workbox configuration

Remove

Notes

Empty View Source and SEO

App shell and server logs

Using with gatsby-plugin-manifest

10

10

10

10

10

10

8

7

0

0

0

0

6.8

/10

Other packages similar to gatsby-plugin-offline