3 years ago · ce9a286449
--- a/README.md
+++ b/README.md
@@ -0,0 +1,12 @@
 
				+## PWA demo
			
 
				+
			
 
				+1、网站需要 https 协议。
			
 
				+
			
 
				+2、PWA 渐进式app，适合（VUE/React）等单页面应用，工具类离线使用。
			
 
				+
			
 
				+3、项目结构：
			
 
				+
			
 
				+manifest.json     # 配置文件
			
 
				+serviceWorker.js  # 应用后台的 worker，执行相关操作。比如在初次访问离线所需的 css/js 下次使用。
			
 
				+
			
 
				+4、
			
--- a/app.js
+++ b/app.js
@@ -0,0 +1,6 @@
 
				+async function fetchTrending() {
			
 
				+    // const res = await fetch("https://api.giphy.com/v1/gifs/trending?limit=25");
			
 
				+    // const json = await res.json();
			
 
				+
			
 
				+    // main.innerHTML = json.data.map(createMeme).join('\n');
			
 
				+}
			
--- a/images/icons/icon-128x128.png
+++ b/images/icons/icon-128x128.png
--- a/images/icons/icon-144x144.png
+++ b/images/icons/icon-144x144.png
--- a/images/icons/icon-152x152.png
+++ b/images/icons/icon-152x152.png
--- a/images/icons/icon-192x192.png
+++ b/images/icons/icon-192x192.png
--- a/images/icons/icon-256x256.png
+++ b/images/icons/icon-256x256.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>All the memes!</title>
			
 
				+    <link rel="stylesheet" href="/styles.css">
			
 
				+    <!-- 添加 manifest.json 配置文件 -->
			
 
				+    <link rel="manifest" href="/manifest.json">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <header>
			
 
				+        <h1 class="center">Top trending memes today</h1>
			
 
				+    </header>
			
 
				+    <main>
			
 
				+        <div class="container"></div>
			
 
				+    </main>
			
 
				+    <script src="app.js"></script>
			
 
				+    <script>
			
 
				+        // 加载serviceWorker.js，使得页面加载后，在浏览器输入框出现 install 按钮
			
 
				+        window.addEventListener('load', async e => {
			
 
				+            await fetchTrending();
			
 
				+            if ('serviceWorker' in navigator) {
			
 
				+                try {
			
 
				+                    navigator.serviceWorker.register('serviceWorker.js');
			
 
				+                    console.log('SW registered');
			
 
				+                } catch (error) {
			
 
				+                    console.log('SW failed');
			
 
				+
			
 
				+                }
			
 
				+            }
			
 
				+        });
			
 
				+    </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/manifest.json
+++ b/manifest.json
@@ -0,0 +1,29 @@
 
				+{
			
 
				+    "name": "pwa-demo",
			
 
				+    "short_name": "pwa-demo",
			
 
				+    "icons": [{
			
 
				+      "src": "images/icons/icon-128x128.png",
			
 
				+        "sizes": "128x128",
			
 
				+        "type": "image/png"
			
 
				+      }, {
			
 
				+        "src": "images/icons/icon-144x144.png",
			
 
				+        "sizes": "144x144",
			
 
				+        "type": "image/png"
			
 
				+      }, {
			
 
				+        "src": "images/icons/icon-152x152.png",
			
 
				+        "sizes": "152x152",
			
 
				+        "type": "image/png"
			
 
				+      }, {
			
 
				+        "src": "images/icons/icon-192x192.png",
			
 
				+        "sizes": "192x192",
			
 
				+        "type": "image/png"
			
 
				+      }, {
			
 
				+        "src": "images/icons/icon-256x256.png",
			
 
				+        "sizes": "256x256",
			
 
				+        "type": "image/png"
			
 
				+      }],
			
 
				+    "start_url": "/index.html",
			
 
				+    "display": "standalone",
			
 
				+    "background_color": "#3E4EB8",
			
 
				+    "theme_color": "#2F3BA2"
			
 
				+  }
			
--- a/package.json
+++ b/package.json
@@ -0,0 +1,11 @@
 
				+{
			
 
				+  "name": "pwa-demo",
			
 
				+  "version": "1.0.0",
			
 
				+  "description": "",
			
 
				+  "main": "index.js",
			
 
				+  "scripts": {
			
 
				+    "test": "echo \"Error: no test specified\" && exit 1"
			
 
				+  },
			
 
				+  "author": "",
			
 
				+  "license": "ISC"
			
 
				+}
			
--- a/serviceWorker.js
+++ b/serviceWorker.js
@@ -0,0 +1,38 @@
 
				+//缓存 css/js 静态资源
			
 
				+const staticAssets = [
			
 
				+    './',
			
 
				+    './styles.css',
			
 
				+    './app.js'
			
 
				+];
			
 
				+
			
 
				+self.addEventListener('install', async event => {
			
 
				+    const cache = await caches.open('static-meme');
			
 
				+    cache.addAll(staticAssets);
			
 
				+});
			
 
				+
			
 
				+self.addEventListener('fetch', event => {
			
 
				+    const {request} = event;
			
 
				+    const url = new URL(request.url);
			
 
				+    if(url.origin === location.origin) {
			
 
				+        event.respondWith(cacheData(request));
			
 
				+    } else {
			
 
				+        event.respondWith(networkFirst(request));
			
 
				+    }
			
 
				+});
			
 
				+
			
 
				+async function cacheData(request) {
			
 
				+    const cachedResponse = await caches.match(request);
			
 
				+    return cachedResponse || fetch(request);
			
 
				+}
			
 
				+
			
 
				+async function networkFirst(request) {
			
 
				+    const cache = await caches.open('dynamic-meme');
			
 
				+
			
 
				+    try {
			
 
				+        const response = await fetch(request);
			
 
				+        cache.put(request, response.clone());
			
 
				+        return response;
			
 
				+    } catch (error){
			
 
				+        return await cache.match(request);
			
 
				+    }
			
 
				+}
			
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,3 @@
 
				+.main{
			
 
				+    text-align: center;
			
 
				+}