feat: pWA sample demo

pwa 示例demo,进度30%
minhuaF · May 28, 2021 · 4a99890 · 4a99890
1 parent 689d0d8
commit 4a99890
Show file tree

Hide file tree

Showing 11 changed files with 4,960 additions and 1 deletion.
diff --git a/.commitlintrc.js b/.commitlintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    '@commitlint/config-conventional'
+  ],
+  rules: {}
+}
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules
diff --git a/PWA/README.md b/PWA/README.md
@@ -0,0 +1,74 @@
+
+### 易于安装
+
+可安装网站需要满足以下条件：
+- 一份网页清单
+- 网站的协议必须是安全的（即使用HTTPS协议）
+- 一个在设备上代表应用的图标
+- 一个注册好的`Service Worker`，可以让应用离线工作
+
+#### 网页清单（Manifest）
+- 列举网站的所有信息；
+- 位于网页应用的根目录；
+- 使用方式：在<head>中添加以下代码
+
+```javascript
+<link rel="manifest" href="rainbowpwa.webmanifest">
+```
+文件内容
+```json
+{
+  "name": "rainbow Pregressive Web App",
+  "short_name": "rainbow",
+  "description": "Progressive Web App that record the rainbow app created",
+  "icons": [
+      {
+          "src": "icons/icon-32.png",
+          "sizes": "32x32",
+          "type": "image/png"
+      },
+      // ...
+      {
+          "src": "icons/icon-512.png",
+          "sizes": "512x512",
+          "type": "image/png"
+      }
+  ],
+  "start_url": "/index.html",
+  "display": "fullscreen",
+  "theme_color": "#B12A34",
+  "background_color": "#B12A34"
+}
+
+```
+
+### 主动显示按照按钮
+
+``` javascript
+// 在一个用户被提示”安装“一个网站到移动设备的主屏幕之前，beforeInstallPromptEvent被触发
+window.addEventListener('beforeinstallprompt', (e) => {
+  // 防止Chrome67及更早版本自动显示安装提示
+  e.preventDefault();
+  // 把事件缓存起来，稍后会触发
+  deferredPrompt = e;
+  // 显示按钮
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) => {
+    // 隐藏按钮
+    addBtn.style.display = 'none';
+
+    // 等待用户反馈
+    deferredPrompt.userChoice.then((choiceResult) => {
+      if(choiceResult.outcome === 'accepted') {
+        console.log('User accepted the A2HS prompt')
+      } else {
+        console.log('User dismissed the A2HS prompt')
+      }
+      // 不再需要，设置为空
+      deferredPrompt = null;
+    })
+  })
+}
+```
+
diff --git a/PWA/app.js b/PWA/app.js
@@ -0,0 +1,43 @@
+var template = ({name}) => {
+  return `<div>${name}</div>`
+}
+
+function init() {
+  var content = '';
+  for(var i = 0; i < lists.length; i++) {
+    content = content + template(lists[i]);
+  }
+
+  document.getElementById('content').innerHTML = content;
+}
+
+function buildServiceWorker(){
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js');
+  }
+}
+
+function sendMessage(){
+  var button = document.getElementById('notifications');
+  button.addEventListener('click', function(e){
+    Notification.requestPermission().then(function(result) {
+      if(result === 'granted') {
+        randomNotification();
+      }
+    })
+  })
+}
+
+function randomNotification(){
+  var randomItem = Math.floor(Math.random()*lists.length);
+  var notifTitle = lists[randomItem].name;
+  var notifBody = 'Created by Miwa';
+  var options = {
+    body: notifBody
+  }
+
+  var notif = new Notification(notifTitle, options);
+  setTimeout(randomNotification, 30000)
+}
+
+init();
diff --git a/PWA/games.js b/PWA/games.js
@@ -0,0 +1,8 @@
+var lists = [
+  {
+    name: 'List 1'
+  },
+  {
+    name: 'List 2'
+  }
+]
diff --git a/PWA/index.html b/PWA/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>PWA</title>
+  <meta name="description" content="A demo of how to build pwa"/>
+  <meta name="author" content="miwa"/>
+  <meta name="theme-color" content="#b12A34"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <link rel="manifest" href="manifest.json">
+  <script src="app.js" defer></script>
+</head>
+<body>
+  <p>logo</p>
+  <button id="notifications">Request dummy notifications</button>
+  <section id="content">
+    <!-- Content inserted in her -->
+  </section>
+</body>
+</html>
diff --git a/PWA/rainbowpwa.webmanifest b/PWA/rainbowpwa.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "rainbow Pregressive Web App",
+  "short_name": "rainbow",
+  "description": "Progressive Web App that record the rainbow app created",
+  "icons": [
+      {
+          "src": "icons/icon-32.png",
+          "sizes": "32x32",
+          "type": "image/png"
+      },
+      {
+          "src": "icons/icon-64.png",
+          "sizes": "64x64",
+          "type": "image/png"
+      }
+  ],
+  "start_url": "/index.html",
+  "display": "fullscreen",
+  "theme_color": "#B12A34",
+  "background_color": "#B12A34"
+}
diff --git a/PWA/sw.js b/PWA/sw.js
@@ -0,0 +1,47 @@
+function init() {
+  self.importScripts('data/games.js'); // 同步执行，importScripts 的文件加载和执行完成再执行后续代码
+
+  const [cacheName, appShellFiles] = cache();
+  install(cacheName, appShellFiles);
+  offline(cacheName);
+}
+
+function install(cacheName, appShellFiles){
+  self.addEventListener('install', function(e) {
+    console.log('[Service Worker] Install');
+    e.waitUntil(
+      caches.open(cacheName).then(function(cache) { // cache.open 打开一个cache对象，再使用Cache对象的方法去处理缓存；
+        console.log('[Service Worker] Caching all: app shell and content');
+        return cache.addAll(appShellFiles); // cache.addAll 捉取一个URL数组，检索并把返回的response对象添加给指定的Cache对象
+      })
+    )
+  })
+}
+
+function cache(){
+  var cacheName = 'pwa-v1';
+  var appShellFiles = [
+    '/games.js'
+  ];
+
+  return [cacheName, appShellFiles]
+}
+
+function offline(cacheName){
+  self.addEventListener('fetch', function(e) {
+    e.respondWith(
+      caches.match(e.request).then(function(r) { // caches.match 跟Cache对象匹配的第一个已经缓存的结果
+        console.log('[Service Worker] Fetching resource: ' + e.request.url);
+        return r || fetch(e.request).then(function(response){
+          return caches.open(cacheName).then(function(cache) { // cache.open 打开一个cache对象，再使用Cache对象的方法去处理缓存；
+            console.log('[Service Worker] Caching new resource:' + e.request.url);
+            cache.put(e.request, response.clone()); // 同时捉取一个请求及其响应，并将其添加到给定的cache；
+            return response;
+          })
+        })
+      })
+    )
+  })
+}
+
+init();