mp5maker’s gists

mp5maker / index.js

Created December 2, 2020 15:45

Simple Node Server

	const express = require("express");
	const app = express();
	const path = require("path");

	const PORT = 4000 \|\| process.env.NODE_ENV;

	app.use(express.static(path.join(__dirname, "static")));
	app.use("/", (_request, response) => {
	return response.sendFile(path.join(__dirname, "index.html"));
	});

mp5maker / index.html

Last active December 5, 2020 05:46

Simple index.html with cdnjs bootstrap.css

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PWA</title>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css'/>
	<link rel="stylesheet" href="main.css">
	<link rel="manifest" href="manifest.json">
	<link rel="shortcut icon" href="images/icon-72x72.png" type="image/x-icon">

mp5maker / main.js

Last active December 5, 2020 06:13

Main Javascript File Detecting Service Worker Support and Service Worker File

	(function() {
	function init() {
	if ('serviceWorker' in navigator) {
	const onSuccessRegister = (registration) => console.log("SW Register Success: ", registration.scope)
	const onErrorRegister = (error) => console.log("SW Register Error: ",error)

	navigator.serviceWorker.register('/sw.js')
	.then(onSuccessRegister)
	.catch(onErrorRegister)
	} else console.log('Your browser do not support service worker')

mp5maker / manifest.json

Last active December 5, 2020 06:37

PWA Manifest Json

mp5maker / main.css

Last active December 5, 2020 06:13

Simple Layout

mp5maker / sw.js

Last active December 5, 2020 03:15

Service Worker File

	self.addEventListener('install', function(event) {
	console.log("SW Install Event: Is in the process");
	})

	self.addEventListener('activate', (event) => {
	console.log("SW Activate Event: Is in the process")
	})

	self.addEventListener('fetch', (event) => {
	console.log("SW Fetch Event: Is in the process");

mp5maker / sw.js

Last active December 5, 2020 04:36

Service Worker Install Section

	self.addEventListener('install', function(event) {
	console.log(caches)
	console.log("SW Install Event: Is in the process");
	const onSuccessCachesOpen = (cache) => {
	console.log(cache)
	console.log("SW Install Event: Successfully opened the cache and add the cache list");
	return cache.addAll(CACHE_LIST)
	}

	// Works like async/await

mp5maker / sw.js

Last active December 5, 2020 05:47

Common Variables

	const CACHE_LIST = [
	"/",
	"/index.html",
	"/main.js",
	"/main.css",
	"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css",
	"https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"
	];

	const STATIC_CACHE_VERSION = `static-v1-${new Date().getTime()}`

mp5maker / sw.js

Created December 5, 2020 04:40

Activate Event

	self.addEventListener('activate', (event) => {
	console.log("SW Activate Event: Is in the process")

	// Google Chrome browseer -> console -> application -> cache -> cache storage
	const onSuccessCachesKeys = (cacheNames) => {
	// List of cachenames generated by STATIC_CACHE_VERSION
	console.log(cacheNames)
	// Loop through all the keys stored in cache storage
	return Promise.all(
	cacheNames.map((cache) => {

mp5maker / sw.js

Created December 5, 2020 05:15

Fetch Event

	self.addEventListener('fetch', (event) => {
	const FALLBACK_URL = CACHE_LIST[0];
	console.log("SW Fetch Event: Is in the process");

	const onSuccessFetch = response => {
	if (CACHE_LIST.includes(new URL(event.request.url).pathname)) return response
	const onSuccessDynamicCacheOpen = cache => {
	cache.put(event.request.url, response.clone())
	return response
	}

Photon Khan mp5maker