Skip to content

Instantly share code, notes, and snippets.

View mp5maker's full-sized avatar
💻
Focusing

Photon Khan mp5maker

💻
Focusing
9 followers · 2 following
View GitHub Profile
@mp5maker
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
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
mp5maker / main.css
Last active December 5, 2020 06:13
Simple Layout
body, html {
margin: 0;
padding: 0;
}
body {
height: 100%;
background-color: var(--dark);
color: var(--white);
}
@mp5maker
mp5maker / manifest.json
Last active December 5, 2020 06:37
PWA Manifest Json
{
"short_name": "PWA",
"name": "Progressive Web App",
"lang": "en",
"background_color": "#343a40",
"theme_color": "#343a40",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
@mp5maker
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
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
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"));
});