@cocreate/pwa 1.0.0 → 1.1.0

package/src/archive/index.test.html

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hello!</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- import the webpage's stylesheet -->
-    <link rel="stylesheet" href="style.css">
-    <!-- Manifest -->
-    <link rel="manifest" href="manifest.json">
-  </head>  
-  <body>
-    <h1>
-      InstallableR
-    </h1>
-    
-    <p id="requireHTTPS" class="hidden">
-      <b>STOP!</b> This page <b>must</b> be served over HTTPS.
-      Please <a>reload this page via HTTPS</a>.
-    </p>
-    
-    <p>
-      Make me installable, follow the 
-      <a href="https://web.dev/codelab-make-installable/">instructions</a> here.
-    </p>
-    
-    <!-- Install button, hidden by default -->
-    <div id="installContainer" class="hidden">
-      <button id="butInstall" type="button">
-        Install
-      </button>
-    </div>
-
-    <!-- import the webpage's javascript file -->
-    <script src="script.js" defer></script>
-    
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-  </body>
-</html>

package/src/archive/script.js

@@ -1,102 +0,0 @@
-const divInstall = document.getElementById("installContainer");
-const butInstall = document.getElementById("butInstall");
-
-/* Put code here */
-
-/* Only register a service worker if it's supported */
-if ("serviceWorker" in navigator) {
-  navigator.serviceWorker
-    .register("./service-worker.js")
-    .register("./sw.js")
-    .then(function (registration) {
-      registration.addEventListener("updatefound", function () {
-        // If updatefound is fired, it means that there's
-        // a new service worker being installed.
-        var installingWorker = registration.installing;
-        console.log(
-          "A new service worker is being installed:",
-          installingWorker
-        );
-
-        // You can listen for changes to the installing service worker's
-        // state via installingWorker.onstatechange
-      });
-    })
-    .catch(function (error) {
-      console.log("Service worker registration failed:", error);
-    });
-} else {
-  console.log("Service workers are not supported.");
-}
-
-/**
- * Warn the page must be served over HTTPS
- * The `beforeinstallprompt` event won't fire if the page is served over HTTP.
- * Installability requires a service worker with a fetch event handler, and
- * if the page isn't served over HTTPS, the service worker won't load.
- */
-if (window.location.protocol === "http:") {
-  const requireHTTPS = document.getElementById("requireHTTPS");
-  const link = requireHTTPS.querySelector("a");
-  link.href = window.location.href.replace("http://", "https://");
-  requireHTTPS.classList.remove("hidden");
-}
-
-// "use strict";
-
-// const fs = require("fs");
-// const minimist = require("minimist");
-// const glob = require("glob");
-
-// const readArgv = () => {
-//   const argv = minimist(process.argv.slice(2));
-//   return {
-//     source: argv.source || "./dist/",
-//     dist: argv.dist || "./dist/service-worker.js",
-//     templatePath: argv.template || "./sw-template.js",
-//     cacheStore: argv.cache || "offline-files",
-//     navigationFallback: argv.navigationFallback || "index.html",
-//   };
-// };
-
-// const removeFile = (path) => {
-//   if (fs.existsSync(path)) {
-//     fs.unlinkSync(path);
-//   }
-// };
-
-// const isDirectory = (path) => {
-//   return fs.lstatSync(path).isDirectory();
-// };
-
-// const getFiles = (source) => {
-//   return glob
-//     .sync("**/*", { cwd: source })
-//     .filter((path) => !isDirectory(source + path));
-// };
-
-// const arrayToString = (array) => {
-//   const strings = array.map((item) => `'${item}'`).join(", ");
-//   return `[${strings}]`;
-// };
-
-// const generateSWFile = () => {
-//   const argv = readArgv();
-//   removeFile(argv.dist);
-
-//   const template = fs.readFileSync(argv.templatePath, "utf-8");
-//   const internalFiles = getFiles(argv.source);
-//   const externalFiles = [
-//     // here you can add some external files that you want to have cached
-//   ];
-//   const files = arrayToString([...internalFiles, ...externalFiles]);
-//   const content = [
-//     `const $CACHE_STORE = '${argv.cacheStore}';`,
-//     `const $NAVIGATION_FALLBACK = '${argv.navigationFallback}';\n`,
-//     `const $FILES = ${files};\n`,
-//     template,
-//   ].join("\n");
-//   fs.writeFileSync(argv.dist, content, "utf-8");
-// };
-
-// generateSWFile();

package/src/archive/service-worker.js

@@ -1,37 +0,0 @@
-console.log("service worker start");
-var CacheName = "TestPWA_Cache";
-var CacheContents = [
-  "/",
-  "/index.html",
-  "/test1.html",
-  "/test2.html",
-  "/test3.html",
-  "style.css",
-  "/src/js/test1.js",
-];
-
-self.addEventListener("install", function (event) {
-  event.waitUntil(
-    caches
-      .open(CacheName)
-      .then(function (cache) {
-        console.log("Service worker install sucess.");
-        return cache.addAll(CacheContents).then(function () {
-          self.skipWaiting();
-          self.clients.claim();
-        });
-      })
-      .catch(function (err) {
-        console.log("Service worker install failed! " + err);
-      })
-  );
-});
-
-self.addEventListener("fetch", function (event) {
-  event.respondWith(
-    caches.match(event.request).then(function (response) {
-      if (response) return response;
-      return fetch(event.request);
-    })
-  );
-});

package/src/archive/style.css

@@ -1,35 +0,0 @@
-body {
-  background-color: #546e7a;
-  color: white;
-  font-family: Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-a,
-a:visited {
-  color: white;
-}
-
-h1 {
-  text-align: center;
-}
-
-.hidden {
-  display: none !important;
-}
-
-#installContainer {
-  position: absolute;
-  bottom: 1em;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-#installContainer button {
-  background-color: inherit;
-  border: 1px solid white;
-  color: white;
-  font-size: 1em;
-  padding: 0.75em;
-}

package/src/archive/sw-basico.js

@@ -1,38 +0,0 @@
-self.addEventListener("fetch", (event) => {
-  const offlineResp = new Response(`
-    
-        Welcome to my website
-
-         Sorry, but to use it, you need internet 
-    
-    `);
-
-  // const offlineResp = new Response(`
-
-  // <!DOCTYPE html>
-  // <html lang="en">
-  // <head>
-  //     <meta charset="UTF-8">
-  //     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  //     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  //     <title>PWA Test</title>
-
-  // </head>
-  // <body class="container p-3">
-
-  // <h1>Offline Mode</h1>
-
-  // </body>
-  // </html>
-  // `, {
-  //     headers: {
-  //         'Content-Type':'text/html'
-  //     }
-  // });
-
-  // const offlineResp = fetch( 'pages/offline.html' );
-
-  const resp = fetch(event.request).catch(() => offlineResp);
-
-  event.respondWith(resp);
-});

package/src/archive/sw-estrategias.js

@@ -1,190 +0,0 @@
-
-
-// const CACHE_NAME = 'cache-1';
-const CACHE_STATIC_NAME  = 'static-v2';
-const CACHE_DYNAMIC_NAME = 'dynamic-v1';
-const CACHE_INMUTABLE_NAME = 'inmutable-v1';
-
-const CACHE_DYNAMIC_LIMIT = 50;
-
-
-function limpiarCache( cacheName, numeroItems ) {
-
-
-    caches.open( cacheName )
-        .then( cache => {
-
-            return cache.keys()
-                .then( keys => {
-                    
-                    if ( keys.length > numeroItems ) {
-                        cache.delete( keys[0] )
-                            .then( limpiarCache(cacheName, numeroItems) );
-                    }
-                });
-
-            
-        });
-}
-
-
-
-
-self.addEventListener('install', e => {
-
-
-    const cacheProm = caches.open( CACHE_STATIC_NAME )
-        .then( cache => {
-
-            return cache.addAll([
-                '/',
-                '/index.html',
-                '/css/style.css',
-                '/img/main.jpg',
-                '/js/app.js',
-                '/img/no-img.jpg'
-            ]);
-
-        
-        });
-
-    const cacheInmutable = caches.open( CACHE_INMUTABLE_NAME )
-            .then( cache => cache.add('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'));
-
-
-    e.waitUntil( Promise.all([cacheProm, cacheInmutable]) );
-
-});
-
-
-
-self.addEventListener('fetch', e =>{
-
-    // 5- Cache & Network Race
-
-    const respuesta = new Promise( (resolve, reject) =>{
-
-        let rechazada = false;
-
-        const falloUnaVez = () => {
-
-            if ( rechazada ) {
-                
-                if ( /\.(png|jpg)$/i.test( e.request.url ) ) {
-
-                    resolve( caches.match('/img/no-img.jpg')  );
-
-                } else { 
-                    reject('No se encontro respuesta');
-                }
-
-
-            } else {
-                rechazada = true;
-            }
-
-
-        };
-
-
-
-        fetch( e.request ).then( res => {
-            res.ok ? resolve(res) : falloUnaVez();
-        }).catch( falloUnaVez );
-
-
-        caches.match( e.request ).then( res => {
-            res ? resolve( res ) : falloUnaVez();
-        }).catch( falloUnaVez );
-
-
-    });
-
-
-    e.respondWith( respuesta );
-
-
-
-    
-    // 4- Cache with network update
-    // Rendimiento es crítico
-    // Siempre estarán un paso atrás
-    // if ( e.request.url.includes('bootstrap') ) {
-    //     return e.respondWith( caches.match( e.request ) );
-    // }
-
-    // const respuesta = caches.open( CACHE_STATIC_NAME ).then( cache => {
-
-    //     fetch( e.request ).then( newRes => 
-    //             cache.put( e.request, newRes ));
-
-    //     return cache.match( e.request );
-
-    // });
-
-    // e.respondWith( respuesta );
-
-
-    // 3- Network with cache fallback
-    // const respuesta = fetch( e.request ).then( res => {
-
-    //     if ( !res ) return caches.match( e.request );
-
-    //     caches.open( CACHE_DYNAMIC_NAME )
-    //         .then( cache => {
-    //             cache.put( e.request, res );
-    //             limpiarCache( CACHE_DYNAMIC_NAME, CACHE_DYNAMIC_LIMIT );
-    //         });
-
-
-    //     return res.clone();
-
-    // }).catch( err =>{
-    //     return caches.match( e.request );
-    // });
-
-
-
-    // e.respondWith( respuesta );
-
-
-    // 2- Cache with Network Fallback
-    // const respuesta = caches.match( e.request )
-    //     .then( res => {
-
-    //         if ( res ) return res;
-
-    //         // No existe el archivo
-    //         // tengo que ir a la web
-    //         console.log('No existe', e.request.url );
-
-
-    //         return fetch( e.request ).then( newResp => {
-
-    //             caches.open( CACHE_DYNAMIC_NAME )
-    //                 .then( cache => {
-    //                     cache.put( e.request, newResp );
-    //                     limpiarCache( CACHE_DYNAMIC_NAME, 50 );
-    //                 });
-
-    //             return newResp.clone();
-    //         });
-
-
-    //     });
-
-
-
-
-    // e.respondWith( respuesta );
-
-
-    // 1- Cache Only
-    // e.respondWith( caches.match( e.request ) );
-
-});
-
-
-
-
-

package/src/index.html

@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <title>Hello!</title>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- import the webpage's stylesheet -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="./css/style.css" />
-    <!-- Manifest -->
-    <link rel="manifest" href="./manifest.json" />
-    <!--<link rel="manifest" href="./manifest.webmanifest">  -->
-    <!--<meta name="theme-color" content="red">-->
-</head>
-
-<body>
-    <h1>Installable</h1>
-    <nav class="navbar navbar-expand-sm bg-dark">
-        <!-- Links -->
-        <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" href="#">Home</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="./test1.html">Test1</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="./test2.html">Test 2</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="./test3.html">Test 3</a>
-            </li>
-        </ul>
-    </nav>
-    <p id="requireHTTPS" class="hidden">
-        <b>STOP!</b> This page <b>must</b> be served over HTTPS. Please
-        <a>reload this page via HTTPS</a>.
-    </p>
-
-    <p>
-        Make me installable, follow the
-        <a href="https://web.dev/codelab-make-installable/">instructions</a> here.
-    </p>
-
-    <button id="butCache">Uncache</button>
-
-    <!-- Install button, hidden by default -->
-    <div id="installContainer" class="hidden">
-        <button id="butInstall" type="button">Install</button>
-    </div>
-
-    <!-- include the Glitch button to show what the webpage is about and
-          to make it easier for folks to view source and remix -->
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
-    <script src="https://button.glitch.me/button.js"></script>
-    <!-- import the webpage's javascript file -->
-    <script src="./js/app.js" defer></script>
-    <script>
-        window.isUpdateAvailable = new Promise(function(resolve, reject) {
-            // lazy way of disabling service workers while developing
-            if ('serviceWorker' in navigator) {
-                // register service worker file
-                navigator.serviceWorker.register('sw.js')
-                    .then(reg => {
-                        reg.onupdatefound = () => {
-                            const installingWorker = reg.installing;
-                            installingWorker.onstatechange = () => {
-                                console.log(installingWorker.state);
-                                switch (installingWorker.state) {
-                                    case 'installed':
-                                        if (navigator.serviceWorker.controller) {
-                                            // new update available
-                                            resolve(true);
-                                        } else {
-                                            // no update available
-                                            resolve(false);
-                                        }
-                                        break;
-                                }
-                            };
-                        };
-                    })
-                    .catch(err => console.error('[SW ERROR]', err));
-            }
-        });
-
-        document.addEventListener("DOMContentLoaded", function(event) {
-            window['isUpdateAvailable']
-                .then(isAvailable => {
-                    if (isAvailable) {
-                        alert('xxxxxxxxxxxxxxx');
-                    } else {
-                        alert('yyyyyyyyyyyyyyy');
-                    }
-                });
-        });
-    </script>
-</body>
-
-</html>