More than 5 years have passed since last update.

PWA来てるからカメラアプリ作れるんじゃね？と思ったら失敗した話

Last updated at2018-07-19Posted at 2018-07-19

※2018年7月現在の記事です
PWA使えばフロントエンドの技術だけでスマホアプリが作れるみたいなので、「これでカメラアプリ作ってみよ！」と思って挑戦したけど結局iOS11.4.1の時点ではそれは無理だったみたいという話です。Safari自体は対応しているみたいだけど、調べるとSeviceWorkerがまだ対応していないとかいうことらしい。失敗しましたって話だけだと寂しいので、作成までの記録をここに記します。

準備

今回はVueを使って作成しました。PWAアプリを作るのがめちゃくちゃ簡単だったからです。パッケージマネージャーはyarnを使いました。

$npm-ginstallyarn$yarn global add vue-cli$vue init pwa pwa-camera

作成

App.vue

<template><divid="app"><videoref="video"id="video"autoplayplaysinline></video></div></template><script>exportdefault{name:'app',data(){return{video:{}}},mounted(){constmedias={audio:false,video:{facingMode:{exact:'environment'//リアカメラの設定}}}this.video=this.$refs.videoif(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia){navigator.mediaDevices.getUserMedia(medias).then(stream=>{this.video.srcObject=stream}).catch(err=>{console.log(err)})}}}</script><style>body{background-color:#000000;margin:0px;}#app{text-align:center;color:#2c3e50;}#video{background-color:#000000;display:block;width:100%;}#canvas{display:none;width:100%;}</style>

次に、GitHubPagesでホスティングをするためにconfig/index.jsを設定。distではなく、docsをつかうのでディレクトリ名を変更しておく

config/index.js

'use strict'// see http://vuejs-templates.github.io/webpack for documentation.constpath=require('path')module.exports={build:{env:require('./prod.env'),index:path.resolve(__dirname,'../docs/index.html'),assetsRoot:path.resolve(__dirname,'../docs'),assetsSubDirectory:'static',assetsPublicPath:'./',productionSourceMap:true,// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip:false,productionGzipExtensions:['js','css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport:process.env.npm_config_report},dev:{env:require('./dev.env'),port:8080,autoOpenBrowser:true,assetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{},// CSS Sourcemaps off by default because relative paths are "buggy"// with this option, according to the CSS-Loader README// (https://github.com/webpack/css-loader#sourcemaps)// In our experience, they generally work as expected,// just be aware of this issue when enabling this option.cssSourceMap:false}}