https://github.com/oskarkrawczyk/heyoffline

Warn your users when their network goes down. Make sure they don't lose anything.
https://github.com/oskarkrawczyk/heyoffline

javascript offline vanilla

Last synced: 5 months ago
JSON representation

Warn your users when their network goes down. Make sure they don't lose anything.

• Host: GitHub
• URL: https://github.com/oskarkrawczyk/heyoffline
• Owner: oskarkrawczyk
• Created: 2012-02-14T19:27:36.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T05:47:16.000Z (almost 3 years ago)
• Last Synced: 2025-05-10T17:02:44.262Z (5 months ago)
• Topics: javascript, offline, vanilla
• Language: JavaScript
• Homepage:
• Size: 560 KB
• Stars: 1,127
• Watchers: 42
• Forks: 66
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🔌 Heyoffline

Notify your users when their network goes down. Make sure they don't lose anything.

## Features

- Notify on general network outage

- Notify only when users have unsaved form field states

- Default, pretty generic, good looking styles

![](https://user-images.githubusercontent.com/34213/83430658-520d1600-a436-11ea-89da-0b6035fdf818.gif)

## Setup

### Module

NPM: [`heyoffline`](https://www.npmjs.com/package/heyoffline)

```javascript

import Heyoffline from "./dist/heyoffline.esm.js"

new Heyoffline()

```

### Browser

UNPKG: [`https://unpkg.com/heyoffline@latest/dist/heyoffline.umd.js`](https://unpkg.com/heyoffline@latest/dist/heyoffline.umd.js)

```html

```

```javascript

new Heyoffline({

  monitorFields: true,

  fields: ".monitoredFields"

});

```

## Options

  

    Name

    Type

    Default

    Description

  

  

    monitorFields

    boolean

    false

    If this option is enabled, message on network error will be shown only if a input/textarea/select/etc on the page was modified

  

  

    prefix

    string

    heyoffline

    Class prefix for generated elements

  

  

    noStyles

    boolean

    false

    Don't use the default CSS (generated by JS)

  

  

    disableDimiss

    boolean

    false

    By default the user can dismiss the warning. With this option you can hide the dismiss button.

  

  

    fields

    string

    "input, select, textarea, *[contenteditable]"

    Field elements that will be monitored for changes - see monitorFields option.

  

  

    text.offline.title

    string

    You're currently offline

    Heading of the modal window

  

  

    text.offline.content

    string

    Wait until your network comes back before continuing.

    Body message of the modal window

  

  

    text.offline.button

    string

    Dismiss

    Dismissal button of the modal window

  

  

    text.offline.icon

    string

    SVG icon

    Modal icon

  

## Events

  

    Name

    Provides

    Description

  

  

    onOnline

    

    Fires then the network becomes available

  

  

    onOffline

    

    Fires when the network disappears

  

## Requirements

**Heyoffline** is **framework-agnostic** vanilla JS.

## Source code

All efforts have been made to keep the source as clean and readable as possible.

## Requirements

Heyoffline.js is released under an MIT License, so do with it what you will.