用workbox 加速amp、pwa 訪問 教程步驟精簡

都不要欺負我發表於2019-02-22
原文網址 : https://flycode.co/archives/275020

amp-pwa-workbox

Google codelabs中amp-pwa-workbox的教程步驟精簡。

步驟

  1. 安裝workbox-cli

    npm install -g workbox-cli
複製程式碼

  2. 根目錄引入workbox-sw.dev.v2.0.0.js檔案

  3. 新建src/sw.js，配置service-worker的快取規則

    importScripts(`workbox-sw.dev.v2.0.0.js`);

const workboxSW = new self.WorkboxSW();
workboxSW.precache([]);
//TODO:add more runtime cache logic code
複製程式碼

  4. 新建/workbox-cli-config.js,配置precache的檔案路徑列表

    module.exports = {
  "globDirectory": "./",
  "globPatterns": [
    "img/**.*"
    //TODO:add more file path patterns
  ],
  "swSrc": "src/sw.js",
  "swDest": "service-worker.js",
  "globIgnores": [
    "./workbox-cli-config.js"
  ]
};
複製程式碼

  5. 命令列執行workbox inject:manifest生成/service-worker.js

  6. 在所有html檔案新增<amp-install-serviceworker>來註冊sw

    • 引入<amp-install-serviceworker>AMP元件
    <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

複製程式碼
    • html檔案中註冊sw
    <amp-install-serviceworker 
  src="/service-worker.js" 
  layout="nodisplay"
  data-iframe-src="/install-service-worker.html">
</amp-install-serviceworker>
複製程式碼
    • 新建/install-service-worker.html
    <!doctype html>
<html>
  <head>
    <title>Installing service worker</title>
    <script type="text/javascript">
      if (`serviceWorker` in navigator) {
        navigator.serviceWorker.register(`/service-worker.js`)
          .then(function(reg) {
            console.log(`SW scope: `, reg.scope);
          })
          .catch(function(err) {
            console.log(`SW registration failed: `, err);
          });
      };
    </script>
  </head>
  <body>
  </body>
</html>
複製程式碼

  7. 修改src/sw.js以快取訪問過的頁面

    workboxSW.router.registerRoute(`/*`, args => {
  // if it is a resource request such as a image
  if (args.event.request.mode !== `navigate`) {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  //if it is a navigation request to a new page
  return workboxSW.strategies.networkFirst().handle(args);
});
複製程式碼

  8. 修改src/sw.js以快取AMP 執行時

    workboxSW.router.registerRoute(/(.*)cdn.ampproject.org(.*)/,
  workboxSW.strategies.staleWhileRevalidate()
);
複製程式碼

  9. 快取一個自定義的離線網頁

    • 新建/offline.html
    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>The Photo Blog - Offline</title>
  <meta name="viewport"
        content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
  <h1>You are Offline</h1>
</body>
</html>
複製程式碼
    • 更新workbox-cli-config.js以快取offline.html
      "globPatterns": [
    "img/**.*",
    "offline.html"
  ]
複製程式碼
    • 更新src/sw.js以處理離線/線上時的網路請求
    workboxSW.router.registerRoute(`/*`, args => {
  if (args.event.request.mode !== `navigate`) {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  return workboxSW.strategies.networkFirst().handle(args).then(response => {
    if (!response) {
      return caches.match(`offline.html`);
    }
    return response;
  });
});
複製程式碼
    • 執行workbox inject:manifest來重新生成/service-worker.js

  10. 到app-manifest生成manifest.json檔案

  11. 所有html檔案新增mainifest路徑引用

    <link rel="manifest" href="/manifest.json">
複製程式碼

  12. 更新workbox-cli-config.js以快取index.html和icons

    "globPatterns": [
  "img/**.*",
  "offline.html",
  "index.html",
  "icons/**.*"
]
...
"templatedUrls": {
  "/": ["index.html"]
}
複製程式碼

  13. 再次執行workbox inject:manifest

可選1：建立一個app shell

  1. 新建shell.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="manifest" href="/manifest.json">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">  
    <title>AMP to PWA Demo</title>
    <style type="text/css">
    /* omit */
    </style>
  </head>
  <body>
    <header class="header">
      <img src="/img/amp_logo_white.svg" width="36" height="36" />
      <h1><a href="/">AMP PWA Codelab - PWA</a></h1>
    </header>    
    <div id="amproot">
      <!-- AMP Content should appear here! -->
    </div>
    <h2>This is the app shell!</h2>
  </body>
</html>
複製程式碼

  2. 更新workbox-cli-config.js

      "globPatterns": [
    ...
    "shell.html",
    "js/app.js"
  ],
複製程式碼

  3. 更新src/sw.js以讓網頁導航都匹配到/shell.html

    workboxSW.router.registerRoute(`/*`, args => {
  if (args.event.request.mode !== `navigate`) {
    return workboxSW.strategies.cacheFirst().handle(args);
  }
  return caches.match(`/shell.html`, {ignoreSearch: true});
});
複製程式碼

  4. shell.html中引入AMP-Shadow-DOM runtime library和app.js

    <!-- Asynchronously load the AMP-Shadow-DOM runtime library. -->
<script async src="https://cdn.ampproject.org/shadow-v0.js"></script>
...
<script src="/js/app.js" type="text/javascript" defer></script>
複製程式碼

  5. app.js中書寫邏輯

    class Router {
    replaceLinks(document) {
        // TODO replace links
    }
}

class AmpPage {
    constructor(rootElement) {
        this.rootElement = rootElement;
    }

    _fetchDocument(url) {...};

    loadDocument(url) {
        // Add code to load a document and attach to Shadow Root
        return this._fetchDocument(url).then(document => {
            // Manipulating the content of the AMP filean
            // here remove header DOM element
            const header = document.querySelector(`.header`);
            header.remove();
            window.AMP.attachShadowDoc(this.rootElement, document, url);
        });
    }
}

const ampReadyPromise = new Promise(resolve => {
    (window.AMP = window.AMP || []).push(resolve);
});
const router = new Router();

// get a reference to the container and URL, and load the AMP page
// when ampReadyPromise resolves.
const ampRoot = document.querySelector(`#amproot`);
const url = document.location.href;
const amppage = new AmpPage(ampRoot, router);
ampReadyPromise.then(() => {
    amppage.loadDocument(url);
});
複製程式碼

  6. 執行workbox inject:manifest來更新/service-worker.js

可選2：給不支援服務工作者的瀏覽器提供回退

codelabs.developers.google.com/codelabs/am…

原文：github.com/wdpm/amp-pw…

相關文章