name - artist
00:00

      网站实现 PWA

      在网页应用中实现和原生应用相近的用户体验的渐进式网页应用

      介绍

      PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。

      优势

      它比原生应用更轻量,但是却比现有的 Web APP 的功能更加丰富。最大也是最关键的区别是它能够脱离浏览器的「束缚」(虽然依然是基于浏览器的技术),能够把 PWA 网站添加到你的桌面上,不管是 PC 操作系统还是手机操作系统,类似于一个原生应用一样,并且拥有媲美原生应用的体验。而微信支付宝等小程序更封闭,是Web的子集。

      方法

      • 开启HTTPS强制跳转重要前提
      • 根目录上传Service-Worker.JS
      • 根目录上传Manifest.JSON并修改内容
      {
          "name": "比格易尔",
          "short_name": "比格易尔",
          "description": "人生如逆旅,我亦是行人。",
          "icons": [
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "64x64",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "120x120",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "144x144",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "152x152",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "192x192",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "384x384",
                  "type": "image/png"
              },
              {
                  "src": "https://bigeyier.cn/favicon.ico",
                  "sizes": "512x512",
                  "type": "image/png"
              }
          ],
          "start_url": "/",
          "display": "standalone",
          "background_color": "#FFFFFF",
          "theme_color": "#FFFFFF",
          "lang": "en"
      }
      • 在文件里插入<link rel="manifest" href="/manifest.json">
      • 将下列代码插入header.php里面,且必须在<!DOCTYPE HTML>前面。
       <?php
      if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest" && ($this->is('post')||$this->is('page')) && stripos($_SERVER['HTTP_REFERER'], $_SERVER['SERVER_NAME'])) {
         header('HTTP/1.1 200 OK');
         ini_set("display_errors", 1);
         $this->response($this->need('comments.php'));
         
      }
      ?>
      • footer.php插入以下JS代码
      <script>
          if (navigator.serviceWorker) {
          navigator.serviceWorker.register('/service-worker.js')
              .then(function(registration) {
                  console.log('service worker 注册成功');
              })
              .catch(function (err) {
          console.log('servcie worker 注册失败');
        });
      }  
          </script>

      - The End -

      添加新评论  

      本站已启用评论投票,被点踩过多的评论将自动折叠,请多回复有意义的评论。

      已有 2 条评论

      网站内容还是挺不错的,谢谢博主。还有博客应该是WORDPRESS做的吧,感觉美观度还可以提高,谢谢。我自已是搞前端设计的,你的代码可以做精简一点。

      Sean Sean 回复 @广州技校
      0 0

      是Typecho。