oskarkrawczyk / Heyoffline
Warn your users when their network goes down. Make sure they don't lose anything.
Stars: ✭ 1,133
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Heyoffline
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (-10.33%)
Mutual labels: offline
Vanilla Css
A minimal baseline stylesheet for any web project
Stars: ✭ 53 (-95.32%)
Mutual labels: vanilla
React Native Learning Resources
Collection of some good resources for react-native ✨ 🔥 💥
Stars: ✭ 61 (-94.62%)
Mutual labels: offline
Asus Rog Strix H370 I Gaming Hackintosh Guide
Asus ROG STRIX H370-I GAMING Hackintosh Guide
Stars: ✭ 43 (-96.2%)
Mutual labels: vanilla
Nipp
🎒 Portable Programmable Text Convertor Hosted on URL: https://nwtgck.github.io/nipp
Stars: ✭ 64 (-94.35%)
Mutual labels: offline
Local Feature Android
Add online and offline text translation to Android apps
Stars: ✭ 60 (-94.7%)
Mutual labels: offline
Navi
Open Source Project for Grow with Google Udacity Scholarship Challenge - Navigation app using offline first strategy and google maps api - To get started please refer to the README.md - CONTRIBUTING.md and the project Wiki
Stars: ✭ 51 (-95.5%)
Mutual labels: offline
Infrared
An ultra lightweight minecraft reverse proxy and idle placeholder
Stars: ✭ 59 (-94.79%)
Mutual labels: vanilla
Ng Toolkit
⭐️ Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more
Stars: ✭ 1,116 (-1.5%)
Mutual labels: offline
Apollo Cache Persist
🎏 Simple persistence for all Apollo Cache implementations
Stars: ✭ 1,078 (-4.85%)
Mutual labels: offline
🔌 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
Setup
Module
NPM: heyoffline
import Heyoffline from "./dist/heyoffline.esm.js"
new Heyoffline()
Browser
UNPKG: https://unpkg.com/[email protected]/dist/heyoffline.umd.js
<script src="dist/heyoffline.umd.js"></script>
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].