mp5maker’s gists

mp5maker / index.html

Created December 5, 2020 09:40

Vtec app (PWA index file)

	<!DOCTYPE html>
	<html lang="en">

	<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
	<meta name="description" content="">
	<meta name="author" content="">

mp5maker / webpack.config.js

Last active December 5, 2020 09:31

Updated Webpack Configuration for Vtecx

	const copyPlugin = require("copy-webpack-plugin")

	const copiedPlugin = new copyPlugin({
	patterns: [
	{
	from: path.join(__dirname, "src/pwa/sw.js"),
	to: path.join(__dirname, "dist")
	},
	{
	from: path.join(__dirname, "src/pwa/manifest.json"),

mp5maker / index.tsx

Created December 5, 2020 09:19

Updated Index.tsx for vtecx and registering service worker

	import * as React from 'react'
	import * as ReactDOM from 'react-dom'
	import { register } from '../pwa/serviceWorker'


	ReactDOM.render(<div>Hello vte.cx!</div>, document.getElementById('container'))
	register()

mp5maker / serviceWorker.tsx

Created December 5, 2020 09:16

Service Worker for the Vtecx

	export const register = () => {
	if ("serviceWorker" in navigator) {
	const onSuccessRegister = (registration: any) => {
	console.log("SW Register Success: ", registration.scope);
	}
	const onErrorRegister = (error: any) => {
	console.log("SW Register Error: ", error);
	}

	navigator.serviceWorker

mp5maker / add-to-your-home-screen.js

Created December 5, 2020 08:10

PWA with banner (add to your home screen)

	(function() {
	let deferredPrompt;
	const BANNER_ID = 'banner'

	const banner = window.localStorage.getItem(BANNER_ID)
	const bannerElement = document.querySelector('.banner')
	if (banner !== 'not-needed') bannerElement.classList.add('active')

	const onBannerClick = () => {
	const newDeferredPromptPromise = new Promise((resolve) => {

mp5maker / main.css

Created December 5, 2020 08:08

PWA App with banner

mp5maker / index.html

Created December 5, 2020 08:07

PWA html with banner

	<!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 / 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
	}

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

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()}`

Photon Khan mp5maker