Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA checklist app

PWA checklist app

2019/05/10 Okachi.js で行われたトークのスライドです。
スライドとしては短いですが、どうなったら PWA なのかみたいなことをいくつかのチェックツールやチェックリストを出しながらお話ししました。

40fce7d0c413e7f7b3bded908aab5bf6?s=128

kazuhiro hara

May 10, 2019
Tweet

Transcript

  1. PWA checklist app PWA をチェックするリストを見てみましょう
 2019/05/10 Okachi.js
 
 KAZUHIRO HARA


    @kara_d

  2. https://kansock.industries 
 KAZUHIRO HARA 原 一浩 (@kara_d)
 Web サイトデザインの観測・ビッグデータのビジュアライズ 


    および、複雑な UI デザインがメイン領域 
 屋号は、カンソク (観測) からきてます 

  3. もくじ
 1. PWA に必要な manifest.json について
 2. Lighthouse
 3. PWABuilder


    4. Progressive Web App Checklist
 5. その他のリソース

  4. kansock.industries の manifest.json
 https://kansock.industries/manifest.json 
 { "short_name": "KANSOCK.I", "name": "KANSOCK.INDUSTRIES",

    "icons": [ ... ], "splash_pages": null, "start_url": "/", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
  5. Lighthouse
 • Lighthouse を使ってサイトをチェックしてみる (Next.js + MDX + TypeScript +

    Bulma + PWA) 
 ◦ https://kansock.industries/ja/articles/20190421_01/ 

  6. PWABuilder
 • PWABuilder にて、PWA の Manifest などをチェックする
 ◦ https://kansock.industries/ja/articles/20190506_01/ 


  7. Progressive Web App Checklist
 • Progressive Web App Checklist |

    Web | Google Developers
 ◦ https://developers.google.com/web/progressive-web-apps/checklist 

  8. その他のリソース
 • PWA Checklist 2019 - DEV Community
 ◦ https://dev.to/uyouthe/pwa-checklist-2019-25j4

    
 • プログレッシブウェブアプリチェックリスト
 ◦ https://gist.github.com/xl1/b8b9ef9ada5657b9b268c76e625fc5ee 
 • PWA Minimus: A minimal PWA checklist - mobiForge
 ◦ https://mobiforge.com/design-development/pwa-minimus-a-minimal-pwa-checklist 
 • The SEO Checklist For PWAs
 ◦ https://www.authoritylabs.com/the-seo-checklist-for-pwas/ 

  9. END 
 KAZUHIRO HARA
 @kara_d
 https://kansock.industries