-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Final Service Worker COde with WOrkbox
- Loading branch information
Showing
11 changed files
with
2,929 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns:data="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>PWA - Devfest</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="manifest" href="/manifest.json"> | ||
| <meta name="theme-color" content="#3F51B5"> | ||
| <link rel="icon" href="/images/logo_36.png"> | ||
| <style type="text/css"> | ||
| .splash-screen{ | ||
| top:0; | ||
| left:0; | ||
| position: fixed; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: #3F51B5; | ||
| } | ||
| .loader { | ||
| border: 8px solid #f3f3f3; /* Light grey */ | ||
| border-top: 8px solid #3498db; /* Blue */ | ||
| border-radius: 50%; | ||
| width: 60px; | ||
| height: 60px; | ||
| animation: spin 1.5s linear infinite; | ||
| top: 50%; | ||
| left: 50%; | ||
| position: fixed; | ||
| margin-left: -30px; | ||
| margin-top: -30px; | ||
| } | ||
|
|
||
| .hide-splash-screen { | ||
| animation: fadeout 1s linear; | ||
| } | ||
|
|
||
| @keyframes spin { | ||
| 0% { transform: rotate(0deg); } | ||
| 50% { transform: rotate(180deg); } | ||
| 100% { transform: rotate(360deg); } | ||
| } | ||
|
|
||
| @keyframes fadeout { | ||
| 0% { opacity: 1; } | ||
| 100% { opacity: 0; } | ||
| } | ||
| .page-content { | ||
| padding: 10px; | ||
| flex: 1; | ||
| } | ||
|
|
||
| @media only screen and (min-width: 768px) { | ||
| .page-content div{ | ||
| flex: 0.3; | ||
| flex-direction: row; | ||
| } | ||
| } | ||
|
|
||
| .my-card { | ||
| width: 100%; | ||
| margin: auto; | ||
| } | ||
|
|
||
| </style> | ||
| <style> | ||
| .demo-card-wide.mdl-card { | ||
| width: auto; | ||
| margin-bottom: 5px; | ||
| } | ||
| .demo-card-wide > .mdl-card__title { | ||
| color: rgb(255, 255, 255); | ||
| text-shadow: 1px 1px 2px #000000; | ||
| height: 176px; | ||
| background: url('../images/pwablog.jpg') center / cover; | ||
| } | ||
| .demo-card-wide > .mdl-card__menu { | ||
| color: #fff; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="splash-screen" class="splash-screen"> | ||
| <div class="loader"></div> | ||
| </div> | ||
| <!--Always shows a header, even in smaller screens.--> | ||
| <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> | ||
| <header class="mdl-layout__header"> | ||
| <div class="mdl-layout__header-row"> | ||
| <!-- Title --> | ||
| <span class="mdl-layout-title">PWA- DevFest</span> | ||
| <!-- Add spacer, to align navigation to the right --> | ||
| <div class="mdl-layout-spacer"></div> | ||
| <!-- Navigation. We hide it in small screens. --> | ||
| <nav class="mdl-navigation mdl-layout--large-screen-only"> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <div class="mdl-layout__drawer"> | ||
| <span class="mdl-layout-title">Title</span> | ||
| <nav class="mdl-navigation"> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| <a class="mdl-navigation__link" href="">Link</a> | ||
| </nav> | ||
| </div> | ||
| <main class="mdl-layout__content"> | ||
| <div class="page-content"> | ||
| <div class="demo-card-wide mdl-card mdl-shadow--1dp my-card"> | ||
| <div class="mdl-card__title"> | ||
| <h2 class="mdl-card__title-text">Welcome</h2> | ||
| </div> | ||
| <div class="mdl-card__supporting-text"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Mauris sagittis pellentesque lacus eleifend lacinia... | ||
| </div> | ||
| <div class="mdl-card__menu"> | ||
| <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> | ||
| <i class="material-icons">share</i> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </body> | ||
| <link rel="stylesheet" type="text/css" href="css/material.min.css"> | ||
| <link rel="stylesheet" type="text/css" href="css/material.css"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
| <script type="text/javascript" src="js/material.min.js"></script> | ||
| <script type="text/javascript" src="js/main.js"></script> | ||
| <script type="text/javascript"> | ||
| window.addEventListener('load', () => { | ||
| initOnline(); | ||
| splashScreen(); | ||
| registerServiceWorker(); | ||
| }); | ||
| var registerServiceWorker = () => { | ||
| var success = (msg) => { | ||
| console.log('Service Worker Registered Successfully', msg); | ||
| }; | ||
| var error = (err) => { | ||
| console.log('Service worker registeration failed', err); | ||
| }; | ||
| if('serviceWorker' in navigator){ | ||
| navigator.serviceWorker.register('/sw-wb.js') | ||
| .then(success) | ||
| .catch(error); | ||
| } | ||
| }; | ||
| var splashScreen = () => { | ||
| document.getElementById('splash-screen').className += ' hide-splash-screen'; | ||
| setTimeout(() => { | ||
| document.getElementById('splash-screen').style.display = 'none'; | ||
| },1000) | ||
| }; | ||
| window.addEventListener('online', () => { | ||
| console.log('You are offline'); | ||
| changeColorOnline(); | ||
| }); | ||
| window.addEventListener('offline', () => { | ||
| console.log('You are online'); | ||
| changeColorOffline(); | ||
| }); | ||
|
|
||
| //initializes the color | ||
| var initOnline = () => { | ||
| if(navigator.onLine){ | ||
| changeColorOnline(); | ||
| } | ||
| else { | ||
| changeColorOffline(); | ||
| } | ||
| }; | ||
| var changeColorOnline = () => { | ||
| document.querySelector('[name=theme-color]').setAttribute('content','#3F51B5'); | ||
| document.querySelector('.mdl-layout__header').style.backgroundColor = '#3F51B5'; | ||
| }; | ||
| var changeColorOffline = () => { | ||
| document.querySelector('[name=theme-color]').setAttribute('content','#000'); | ||
| document.querySelector('.mdl-layout__header').style.backgroundColor = '#000'; | ||
| } | ||
|
|
||
| </script> | ||
| </html> |
Oops, something went wrong.