成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

hexo博客簡(jiǎn)單支持PWA

nicercode / 3033人閱讀

摘要：文章首次發(fā)表在博客支持了前言使用插件使博客支持功能，目前我所知道的有兩種插件均可實(shí)現(xiàn)該功能前提全站支持目前本人使用的是騰訊云的免費(fèi)證書(shū)網(wǎng)站配置已經(jīng)有很多文章寫(xiě)了配置過(guò)程本篇文章不在贅述使用安裝修改配置文件的配置文件采用語(yǔ)言想要

文章首次發(fā)表在: 博客支持PWA了~
前言

使用hexo插件使博客支持pwa功能，目前我所知道的有兩種插件均可實(shí)現(xiàn)該功能

hexo-pwa

hexo-offline

前提(HTTPS)

全站支持HTTPS.(ps: 目前本人使用的是騰訊云的免費(fèi)證書(shū))

網(wǎng)站配置HTTPS, 已經(jīng)有很多文章寫(xiě)了配置過(guò)程, 本篇文章不在贅述

使用hexo-pwa 1.安裝hexo-pwa 
npm i --save hexo-pwa
2.修改配置文件 
hexo的配置文件采用yml語(yǔ)言, 想要了解該語(yǔ)言的可以去看看

在根目錄的_config.yml中添加

pwa:
  manifest:
    path: /manifest.json
    body:
      "name": "funnycoderstar"
      "short_name": "star"
      "theme_color": "rgba(203,7,83,0.86)"
      "background_color": "#FAFAFA"
      "display": "standalone"
      "Scope": "/"
      "start_url": "/"
      icons:
        - src: https://cdn.wangyaxing.cn/icon-144x144.png?v=1
          sizes: 144x144
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-128x128.png
          sizes: 128x128
          type: image/png
        - src: https://cdn.wangyaxing.cn/icon-96x96.png
          sizes: 96x96
          type: image/png
  serviceWorker:
    path: /sw.js
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /#/
        strategy: networkOnly
      - pattern: !!js/regexp /.*.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp ///
        strategy: networkFirst
  priority: 5

參數(shù)含義可以去hexo-pwa文檔中查看

3.添加manifest.json和sw.js

這兩個(gè)文件放的位置要和配置中的路徑一致, 我是放在跟目錄的
sw.js

importScripts("https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js");

if (workbox) {
    workbox.setConfig({ modulePathPrefix: "https://g.alicdn.com/kg/workbox/3.3.0/" });

    workbox.precaching.precache(["/", "/index.html"]);

    workbox.routing.registerRoute(new RegExp("^https?://wangyaxing.cn/?$"), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp(".*.html"), workbox.strategies.networkFirst());

    workbox.routing.registerRoute(new RegExp(".*.(?:js|css)"), workbox.strategies.staleWhileRevalidate());

    workbox.routing.registerRoute(new RegExp("https://cdn.wangyaxing.cn/"), workbox.strategies.cacheFirst());
}

manifest.json

{
  "name": "funnycoderstar",
  "short_name": "star",
  "theme_color": "rgba(203,7,83,0.86)",
  "background_color": "#FAFAFA",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/source/images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/source/images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
  ],
  "splash_pages": null
}

manifest生成地址： https://app-manifest.firebase...

4.將funnycoderstar安裝到主屏(PWA)

地址欄輸入: Chrome://flags

搜索并啟用以下項(xiàng)目: Desktop PWAs(桌面PWAs)、App Banners(應(yīng)用橫幅)、Experimental App Banners(實(shí)驗(yàn)性應(yīng)用橫幅)

重啟瀏覽器使修改的設(shè)置生效

點(diǎn)擊地址欄最右邊按鈕

選擇"安裝 funnycoderstar"

在桌面上即可看到博客的小圖標(biāo)

感興趣的小伙伴可以來(lái)我的博客體驗(yàn)一下, 哈哈~~  https://.wangyaxing.cn/
使用hexo-offline

使用基本與hexo-pwa相同, 下面簡(jiǎn)述一下過(guò)程

1. 安裝 
npm i --save hexo-offline
2. 修改配置文件 
# Offline
## Config passed to sw-precache
## https://github.com/JLHwung/hexo-offline
offline:
  maximumFileSizeToCacheInBytes: 10485760
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,jpeg,gif,svg,json,xml}
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.example.com
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.another-example.org
3. 添加manifest.json

manifest.json放到 source目錄下

4. 引入manifest.json

next主題在 layout/_partials/head.swig 添加

注意

文件放置位置一定要與配置文件中寫(xiě)的路徑一致

圖標(biāo)大小一定按照PWA的嚴(yán)格要求

打開(kāi) Chrome Dev Tools的Application一欄中進(jìn)行調(diào)試

還可以通過(guò)觀察network中的請(qǐng)求是否有小齒輪標(biāo)志來(lái)檢測(cè)serviceWorker是否已加載

參考

hexo博客支持PWA和壓縮博文

讓 Hexo 博客支持 PWA

五步讓 Hexo 博客支持 PWA

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97427.html

相關(guān)文章

  • 超詳細(xì)動(dòng)手搭建一個(gè)Vuepress站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署

    摘要：五一之前就想寫(xiě)一篇關(guān)于的文章結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項(xiàng)更新倉(cāng)庫(kù)介紹官網(wǎng)類(lèi)似一個(gè)極簡(jiǎn)的靜態(tài)網(wǎng)站生成器用來(lái)寫(xiě)技術(shù)文檔不能在爽。當(dāng)然搭建成博客也不成問(wèn)題。構(gòu)建與自動(dòng)部署用的或者的都可以也可以搭建在自己的服務(wù)器上。 五一之前就想寫(xiě)一篇關(guān)于Vuepress的文章,結(jié)果朋友結(jié)婚就不了了之了。記得最后一定要看注意事項(xiàng)！ 更新：coding倉(cāng)庫(kù)：https://git.dev...

    zhoutk 評(píng)論0 收藏0

  • 從 0 開(kāi)始搭建一個(gè)技術(shù)博客，私藏干貨~

    摘要：下面貼上棧長(zhǎng)博客的地址，也是技術(shù)棧的官方博客地址今天分享一下，如何從開(kāi)始搭建一個(gè)自己的技術(shù)博客，基于棧長(zhǎng)的博客。的國(guó)內(nèi)訪問(wèn)不是很快，這里推薦使用自己搭建國(guó)內(nèi)的云服務(wù)器，使用搭建靜態(tài)服務(wù)。 技術(shù)博客的選型有很多種，如：博客園、CSDN、開(kāi)源中國(guó)、簡(jiǎn)書(shū)、知乎等……都可以用來(lái)寫(xiě)文章，形成自己的技術(shù)博客。 上面的博客都是第三方的，有沒(méi)有方式搭建自己的服務(wù)器、自己的域名的博客呢？棧長(zhǎng)知道的成熟方...

    Zhuxy 評(píng)論0 收藏0

  • 在 Ubuntu 14.04 服務(wù)器上部署 Hexo 博客

    摘要：本文將介紹如何在一臺(tái)的云服務(wù)器上快速部署博客站點(diǎn)，如何快速發(fā)布一篇博文并通過(guò)云服務(wù)器上的私有倉(cāng)庫(kù)部署到服務(wù)器目錄下。此外，還要在云服務(wù)器上安裝和兩個(gè)必備的軟件包。在服務(wù)器上部署博客以下為文章正文。 推薦理由：Hexo 是用 Node.js 開(kāi)發(fā)的一個(gè)靜態(tài)站點(diǎn)生成器（Static Site Generator），支持 Markdown 語(yǔ)法寫(xiě)作，有著強(qiáng)大的插件系統(tǒng)，而且性能優(yōu)異。下面我推...

    cyqian 評(píng)論0 收藏0

  • 手把手教你使用Hexo + Github Pages搭建個(gè)人獨(dú)立博客

    摘要：設(shè)置什么是本用于介紹托管在的項(xiàng)目，不過(guò)，由于他的空間免費(fèi)穩(wěn)定，用來(lái)做搭建一個(gè)博客再好不過(guò)了。你可以通過(guò)來(lái)訪問(wèn)你的個(gè)人主頁(yè)。執(zhí)行過(guò)程中可能需要讓你輸入賬戶的用戶名及密碼，按照提示操作即可。推薦使用騰訊公益。 系統(tǒng)環(huán)境配置 要使用Hexo，需要在你的系統(tǒng)中支持Nodejs以及Git，如果還沒(méi)有，那就開(kāi)始安裝吧！ 安裝Node.js 下載Node.js參考地址：安裝Node.js 安裝Git...

    劉福 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<