PWA周りあれこれ試してみる

パフォーマンス改善あれこれ試してみる | mersy note
https://note.mersy418.com/article/blog-performance20180701

の続き。

manifest.json

ウェブアプリ マニフェスト  |  Web  |  Google Developers
https://developers.google.com/web/fundamentals/web-app-manifest/?hl=ja

こちらのブログが参考になった。

Progressive Web App を始めよう | murashun.jp
https://murashun.jp/blog/20171210-01.html

Failures: Manifest does not have icons at least 192px, Manifest's `display` value is not one of: minimal-ui | fullscreen | standalone, Site does not register a service worker.

とりあえず display は standalone にしといた

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_10-46-44.report.html

serviceworkers

serviceworkers のサポート状況

Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=serviceworkers

WebサイトをPWA（Progressive Web App）に変える簡単な手順（翻訳）
https://techracho.bpsinc.jp/hachi8833/2017_12_25/49054

に書かれてるある内容をためす。とりあえず、 lighthouse のエラーをつぶす。

HTTP>HTTPSリダイレクト設定

/etc/httpd/conf.d/vhost-test.conf

  RewriteEngine on
  RewriteCond %{HTTP_HOST} ^note\.mersy418\.com
  RewriteRule ^/(.*)$ https://note.mersy418.com/$1 [R=301,L]

meta周りなど追加

    {# PWA関係 #}
    <link rel="manifest" href="/manifest.json">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#317EFB">

ライブラリ追加

{# PWA関係 #}
  <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'index.html'
    });
  </script>

→結局これは使わず。

manifest.json の調整

{
    "short_name": "{{ siteName }}",
    "name": "{{ siteName }}",
    "icons": [
        {
        "src": "img/icon-4x.png",
        "type": "image/png",
        "sizes": "48x48 96x96 128x128 256x256 512x512"
        }
    ],
    "display": "standalone",{# browser#}
    "start_url": "{{ siteUrl }}",
    "background_color": "#ccc",
    "theme_color": "#317EFB"
}

オフラインキャッシュ

こちらの記事を参考にもう少しやってみる

PWA / Service Worker を使ってオフラインでもサイトを表示できるようにする | Workabroad.jp
http://www.workabroad.jp/posts/2215

とりあえずこちらの記事の通りにやれば一度表示されたページはオフラインでも問題なく表示された。

https://note.mersy418.com/reports/note.mersy418.com_2018-07-01_15-31-54.report.html

---

何やるつもりだったかスタートを若干忘れつつある。