adelpro adelpro

ServiceWorker for github pages

This is a ServiceWorker template to turn small github pages into offline ready app.

Why ?

Whenever I make small tools & toys, I create github repo and make a demo page using github pages (like this one).
Often these "apps" are just an index.html file with all the nessesary CSS and JavaScript in it (or maybe 2-3 html/css/js files). I wanted to cache these files so that I can access my tools offline as well.

Notes

Make sure your github pages have HTTPS enforced, you can check Settings > GitHub Pages > Enforce HTTPS of your repository.

	'use client';

	import * as React from 'react';
	import * as SwitchPrimitive from '@radix-ui/react-switch';
	import { cn } from '@/lib/utils';

	function Switch({
	className,
	onCheckedChange,
	...props

	<?xml version="1.0" encoding="UTF-8" ?>
	<!DOCTYPE html>
	<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
	<head>
	<meta charset='UTF-8'/>
	<meta content='width=device-width' name='viewport'/>
	<b:include data='blog' name='all-head-content'/>
	<link href='//fonts.googleapis.com/css?family=Merriweather%3A300%2C400%2C700' media='all' rel='stylesheet' type='text/css'/>
	<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>

	const io = require('socket.io-client');

	const socket = io('http://localhost:3000', {
	transportOptions: {
	polling: {
	extraHeaders: {
	'Authorization': 'Bearer abc',
	},
	},
	},

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Notification API</title>
	<meta name="viewport" content="width=device-width">
	</head>
	<body>
	<h1>Notification API</h1>
	<p id="output"></p>