https://github.com/persianturtle/offline-first-example
Basic offline first example intended for use on a static web app on iOS that includes HTML5 video.
https://github.com/persianturtle/offline-first-example
application-cache babel fetch indexeddb offline-first service-worker webpack
Last synced: about 2 months ago
JSON representation
Basic offline first example intended for use on a static web app on iOS that includes HTML5 video.
- Host: GitHub
- URL: https://github.com/persianturtle/offline-first-example
- Owner: persianturtle
- Created: 2017-02-21T15:44:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-23T13:48:18.000Z (over 8 years ago)
- Last Synced: 2025-03-28T22:35:27.303Z (2 months ago)
- Topics: application-cache, babel, fetch, indexeddb, offline-first, service-worker, webpack
- Language: HTML
- Homepage: https://persianturtle.github.io/offline-first-example/dist
- Size: 842 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# offline-first-example
Basic offline first example intended for use on a static web app on iOS that includes HTML5 video.
[Demo](https://persianturtle.github.io/offline-first-example/dist): After first page load, try refreshing the page without a network connection on any device including iPhone/iPad/iOS Safari/Chrome.
This example uses `Webpack` & `Webpack Offline Plugin` which uses `Service Worker` and `Application Cache` as a fallback.
The video is loaded via the (polyfilled) `Fetch API` as an [Array Buffer](https://developer.mozilla.org/en-US/docs/Web/API/Body/arrayBuffer) because storing blobs in IndexedDB is not supported in iOS. Since we can't assign video sources to Array Buffers, [we first convert it to blob.](http://stackoverflow.com/questions/40393488/mobile-safari-10-indexeddb-blobs/40625816#40625816)
This is intended to be a bare bones example. For more a (much) more advanced offline first example, take a look at [Pokedex.org](http://www.pocketjavascript.com/blog/2015/11/23/introducing-pokedex-org).