Zenn
Open3

【PWA】PDF.jsをPDFファイルを開く既定のアプリにしてみた

PWA
PDF
PDF.js
ihasqihasq

目標

  • PDF.jsをPWA化する
  • File Handling APIでPDFファイルを開かせる
ihasqihasq

index.htmlの設定、manifest.webmanifestの記述

  • pdfjs-3.4.120-dist/web/viewer.htmlが本体なので、ファイル名をindex.htmlに改名する
  • index.htmlにmanifest.webmanifestを追加
index.html
...
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="google" content="notranslate">
    <title>PDF.js viewer</title>
    <link rel="stylesheet" href="viewer.css">
    <!-- This snippet is used in production (included from viewer.html) -->
    <link rel="resource" type="application/l10n" href="locale/locale.properties">
+   <link rel="manifest" href="manifest.webmanifest">
    <script src="../build/pdf.js"></script>
    <script src="viewer.js"></script>
  </head>
...
  • 同フォルダ内にmanifest.webmanifestを記述
manifest.webmanifest
{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "PDF.js",
  "short_name": "PDF.js",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#333",
  "description": "pdf viewer",
  "icons": [{
    "src": "images/icons/icon192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "file_handlers": [
    {
      "action": "/open-pdf",
      "accept": {
        "application/pdf": [".pdf"]
      },
      "icons": [
        {
          "src": "images/icons/icon192.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}