Skip to content
Permalink
Browse files

Merge pull request #41 from sburba/feature/pwa

Make good job team a PWA
  • Loading branch information...
sburba committed Aug 9, 2019
2 parents 590b3a3 + d94e7da commit 52eaea34fe3ed962b76d75ed4dd5b9f1b3f3495c
@@ -1,4 +1,5 @@
{
"baseUrl": "http://localhost:1234/",
"projectId": "skfvy4"
"projectId": "skfvy4",
"chromeWebSecurity": false
}
@@ -42,11 +42,4 @@ context("Actions", () => {

cy.get("#sentence-icon").should("have.class", "konami");
});

it("Is always in Konami mode on april first", () => {
cy.clock(new Date('April 1, 1970 00:00:00').getTime());
cy.visit("/");

cy.get("#sentence-icon").should("have.class", "konami");
});
});
@@ -10,7 +10,10 @@
<title>Good Job Team!</title>
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta name="description" content="The congratulations we rightly deserve" />
<link rel="shortcut icon" href="static/favicon.png" />
<meta name="theme-color" content="#2a3340" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="shortcut icon" href="/static/favicon.png" />
<link rel="apple-touch-icon" href="/static/party-icon-apple-touch.png" />
<script src="src/index.js" defer></script>
</head>
<body>
@@ -28,8 +31,17 @@ <h1 id="sentence-bottom" class="tracking-in">
</div>
<img src="./static/yoshiba.png" id="yoshiba" alt="Matt's Dog" />
<div id="link-list">
<button id="new-sentence">another</button>
<a id="about" href="https://github.com/sburba/goodjobteam">about</a>
<button class="text-button hidden" id="add-to-homescreen">
add to homescreen
</button>
<button class="text-button" id="new-sentence">another</button>
<a
id="about"
target="_blank"
rel="noopener"
href="https://github.com/sburba/goodjobteam"
>about</a
>
</div>
</body>
</html>
@@ -0,0 +1,21 @@
{
"short_name": "gooodjob",
"name": "Good job, team!",
"icons": [
{
"src": "/static/party-icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/static/party-icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/",
"background_color": "#2a3340",
"display": "standalone",
"scope": "/",
"theme_color": "#2a3340"
}
@@ -9,7 +9,7 @@
"only-test": "cypress open",
"test": "start-server-and-test only-start http://localhost:1234 only-test",
"ci-test": "cypress run --record",
"ci": "start-server-and-test only-start http://localhost:1234 ci-test",
"ci": "start-server-and-test only-start http://localhost:1234 ci-test",
"checkstyle": "prettier --check src/**/*.js index.html",
"now-build": "yarn run build"
},
@@ -21,8 +21,13 @@
"since 2017-06"
],
"devDependencies": {
"start-server-and-test": "^1.9.2",
"cypress": "^3.4.1",
"prettier": "^1.18.2"
"parcel-plugin-sw-cache": "^0.3.1",
"prettier": "^1.18.2",
"start-server-and-test": "^1.9.2"
},
"cache": {
"inDev": true,
"swDest": "sw.js"
}
}
@@ -1,2 +1,16 @@
import "./styles.css";
import "./motivational_sentence.js";
import "./prompt_add_to_homescreen.js";

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
const sw = 'sw.js';
navigator.serviceWorker.register(sw).then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
@@ -0,0 +1,21 @@
window.addEventListener("beforeinstallprompt", async e => {
if (
document.readyState === "complete" ||
document.readyState === "loaded" ||
document.readyState === "interactive"
) {
await revealAddToHomescreenBtn(e);
} else {
window.addEventListener("DOMContentLoaded", revealAddToHomescreenBtn);
}
});

async function revealAddToHomescreenBtn(beforeInstallPromptEvent) {
beforeInstallPromptEvent.preventDefault();
let addToHomescreenBtn = document.getElementById("add-to-homescreen");
addToHomescreenBtn.classList.remove("hidden");
addToHomescreenBtn.addEventListener('click', async () => {
addToHomescreenBtn.classList.add('hidden');
beforeInstallPromptEvent.prompt();
})
}
@@ -14,6 +14,22 @@ body {
width: 100%;
}

#motivational-sentence {
font-size: 1vw;
}

@media screen and (min-width: 320px) {
#motivational-sentence {
font-size: 4vw;
}
}

@media screen and (min-width: 1000px) {
#motivational-sentence {
font-size: calc(20px + 1vw);
}
}

#motivational-sentence {
margin: 0;
position: absolute;
@@ -22,7 +38,6 @@ body {
text-align: center;
text-shadow: 0 1px 0.25ex rgba(0, 0, 0, 0.3);
color: white;
font-size: calc(20px + 1vw);
line-height: calc(1.7em + 0.5vw);
}

@@ -114,7 +129,7 @@ body {
margin: 0 0.5em;
}

#new-sentence {
.text-button {
background: none;
color: white;
border: none;
@@ -124,6 +139,10 @@ body {
text-decoration: underline;
}

.hidden {
visibility: hidden;
}

html {
visibility: visible;
opacity: 1;
Binary file not shown.
Binary file not shown.
Binary file not shown.

1 comment on commit 52eaea3

@now

This comment has been minimized.

Copy link

commented on 52eaea3 Aug 9, 2019

Please sign in to comment.
You can’t perform that action at this time.