常連

### 実現したいこと
PWAでカメラ機能を実装したいです。
ご助言いただけたら幸いです。よろしくお願いいたします。

### 前提
nextjsでreact-webcamとnext-pwaを導入してアプリを開発しています。
[stack overflow](https://stackoverflow.com/questions/76112408/why-does-rendering-the-camera-view-with-react-webcam-work-on-phone-browser-but)でも同一の質問がありましたが、まだ未回答の状況になっています。


### 発生している問題・エラーメッセージ
React-Webcam を使用したカメラ ビューのレンダリングはiPhoneのブラウザでは機能するのに、pwa としてダウンロードした後は機能しないです。


### 該当のソースコード

```jsx
const videoConstraints = {
  width: 1280,
  height: 720,
  facingMode: "user"
};

const WebcamCapture = () => {
  const webcamRef = React.useRef(null);
  const capture = React.useCallback(
    () => {
      const imageSrc = webcamRef.current.getScreenshot();
    },
    [webcamRef]
  );
  return (
    <>
      <Webcam
        audio={false}
        height={720}
        ref={webcamRef}
        screenshotFormat="image/jpeg"
        width={1280}
        videoConstraints={videoConstraints}
      />
      <button onClick={capture}>Capture photo</button>
    </>
  );
};```
```

### 試したこと

service workerのキャッシュが原因かと思い、next-pwaのオプション変更やsw.jsを書き換えてみたましたが、自分の知識不足もあるせいかうまく機能しませんでした。

### 補足情報（FW/ツールのバージョンなど）
httpsではないとカメラ機能は使えないため、ngrokを使って開発検証を行なっています。



PWAでカメラ機能を実装したいです。

アプリ開発については初心者です。

当方Webエンジニアで、現在個人開発の方でスマホアプリを開発しようと目論んでいます。
当初はWeb開発で培ったナレッジを100%活かせるPWAもしくはTWAで行うとしてたのですが、大きな課題にぶつかりました。
ほとんどの場合、ASP(広告配信プラットフォーム)の審査にどうしても落ちてしまうのです。

具体的に言うと、例えばブラウザゲームを構築してWebとして高単価なASPであるGoogleAdSenseに申請しようとするも、『機能は多いが文字数が少ない＝Webとしては価値が低いコンテンツ』と見做されてしまい審査に落ち、
かと言ってアプリ版のASPであるAdMobに申請しようにも『PWA/TWAアプリへの配信はそもそもサポートしていない』という感じのようでした。

**要するに、広告収入によるマネタイズを行おうとすると、この技術選定では多くの場合この段階で詰んでしまうのです。**

一応、以下のような前提でアプリ開発をしようと思っています。


## 前提

- Web版/Android版/iOS版全て運用したいので、できれば共通化できる部分は広い方が嬉しい
- Webアプリ開発の知見はできる限り活かしたいので、学習コストは低くしたい(個人開発は時間も限られてるし)
- まずは、Android版配信優先でやりたいが、いずれはiOS版も作りたい
- アプリ版を優先するためにWeb版をおざなりにするようなことはしたくない(Webとしても引き続き配信したい)
- ぶっちゃけ最初の段階でPWAで作ったほぼ見た目スマホアプリなWebアプリを既に何個か運用中なので、これをAdMobを載せられる形に改造することを最初にやりたい。
- 配信パターンを1個作ったら2個目3個目も同じような形でアプリとして配信したい


要するに広告配信の部分はネイティブアプリ的要素がどうしても必要なのでそれを使い、それ以外の部分はWebの技術で共通化したいのです。



## 今のところでの選定候補

- Android/iOSのネイティブアプリとして、中身はほぼWebViewを表示するためだけの所謂ガワネイティブアプリを開発する
    - バナー広告やWebViewからネイティブアプリ側でメッセージを受け取ったタイミングで広告を表示する機能だけネイティブアプリとして開発する
    - 広告表示部分はAndroid/iOSそれぞれで作る必要がありそう。
    - WebViewにどこまで広告を重ねていいのか？とか規約的な部分が課題になるかもしれない
- ↑のガワネイティブ開発をFlutterやXamarinに置き換えガワクロスプラットフォームアプリ？を開発する
    - 基本はWebViewで機能としては共通化してるけど広告配信機能とかも共通化できたらガワネイティブより若干共通化余地が増えるかも？
    - 基本差分は広告配信とか細かい設定部分のみなので自由度が下がってかえって工数増える本末転倒なことにならないか。
- Cordovaなどのjsが使えるハイブリッドアプリを開発するが、JSコンポーネント(自分の場合Vueをよく使う)についてはWeb版とできる限り共通化させる
    - Web版とスマホアプリでコンポーネント使い回すとか本当にできるのか？とかがよくわかってない
    - 規約とかに関してはこちらの方が安全そう
    - ガワネイティブと同じようにJSコンポーネント更新した際にWeb版とアプリ版で同時にデプロイできるのか？とかが課題になりそう



正解があるような話ではないですが、こういったユースケースの場合アプリ開発に知見のある方はどういう技術選定をするのかご意見伺いたいです。

Webエンジニアがスマホアプリ開発を行う場合の技術選定についての質問/相談です。

### 前提・実現したいこと

現在高校の文化祭ページを作成しているものです。
その中で、「食品の在庫状況をリアルタイム表示し、web通知するシステム」を構築しています
GASを主に用い、
店側が送信フォームに在庫情報(完売、残り少ないetc)を入力→スプレッドシートに書きこみ→スプレッドシートから値を読み取り表示。
というとこまで作成ができました。
しかし、webプッシュ通知に対応させるいい方法が見つかりません
また、文化祭のホームページはwordpressで作成しており、PWA化する予定です。
できればGAS→wordpress PWAという流れで通知を実現したいです。
何かいい方法はないでしょうか..?字が汚くてすみません![![イメージ説明](472ee2904d41f94029113eb2d6b42e35.jpeg)](ab94150b06ad43f793c7618ca23e306a.jpeg)

### 補足
高校生なので、無料サービスが嬉しいです。
できればサーバーでPHPやRUBYをかき...というようなことはしたくないです。
wordpressでは難しいということであれば、システム単体で通知を実現することも考慮しています。

GASからスマホへのwebプッシュ通知を行えないか

passiveをfalseにして縦スクロールを禁止しました。
ページ内にカルーセルがあり、横スクロールをすると縦にスクロールできるようになってしまいます。
これはなぜでしょうか？
スクロール禁止のコードはmain.jsに全部記述しております。
これはカルーセルが原因なのでしょうか？

理想の動作としては、縦スクロールを全面禁止にしてカルーセル等の横スクロールのみを許可したいです。
よろしく御願いします。

```js
// main.js
export default {
  mounted () {
    document.addEventListener('touchmove', function(e) {e.preventDefault();}, {passive: false});
  }
}

html, body{
  overflow-y: hidden;
}
```

Vue.js PWA 縦スクロールを禁止にできたが、横スクロール時には縦も有効になってしまう

現在、Flaskを使って既存のWebアプリをPWAに対応させています。
アプリの機能でPDFをページに表示する機能があります。
PWA対応以前はSafariの「プリント」ボタンで印刷ができていたものがPWAにするとボタンそのものがなく不可能になり困っています。
そこで、PDFを出力すると同時にその出力結果を別のアプリ(PDFを印刷できるもの)に遷移させようと考えています。
一通り調べてみたのですが、具体的な方法が分からず困っています。
PWAからSafariを開く方法、もしくは他の対応方法がありましたら教えて頂ければ幸いです。
よろしくお願いします。

```Python
@app.route('/result_pdf',methods=["POST","GET"])
@auth.login_required
def PDFPage():
    //処理
    response.headers['Content-Type'] = 'application/pdf'
    response.headers['Content-Disposition'] = 'inline; filename=%s.pdf' % 'yourfilename'
    return response
```
このresponseでPDFを返しているのですが、これをSafariで開きたいです。

PWAからSafariを開きたい

nuxt + TypeScriptでPWAを開発しています。
その中で期待通りの動作をしないことがあったためこちらで質問させて頂きます
該当コンポーネントファイルは以下です

```vue
<template>
  <v-layout row>
    <v-flex>
      <v-card>
        <v-img
          src="https://cdn.vuetifyjs.com/images/lists/ali.png"
          height="300px"
        >
          <v-layout column fill-height>
            <v-card-title>
              <v-btn dark icon to="/">
                <v-icon>chevron_left</v-icon>
              </v-btn>

              <v-spacer></v-spacer>

              <v-btn dark icon class="mr-3">
                <v-icon>edit</v-icon>
              </v-btn>
            </v-card-title>

            <v-spacer></v-spacer>

            <v-card-title class="white--text pl-5 pt-5">
              <div class="display-1 pl-5 pt-5">
                <p>{{ deviceData.hostname }} ({{ deviceData.ipAddress }})</p>
                <div v-if="isUpdating">
                  <v-chip color="orange" text-color="white">
                    <v-avatar>
                      <v-icon>autorenew</v-icon>
                    </v-avatar>
                    Checking
                  </v-chip>
                </div>
                <div v-else>
                  <v-chip color="green" text-color="white">
                    <v-avatar>
                      <v-icon>check_circle</v-icon>
                    </v-avatar>
                    Alive
                  </v-chip>
                </div>
              </div>
            </v-card-title>
          </v-layout>
        </v-img>

        <v-list two-line>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">important_devices</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ deviceData.deviceType }}</v-list-tile-title>
              <v-list-tile-sub-title>Device Type</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">edit</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{
                deviceData.description
              }}</v-list-tile-title>
              <v-list-tile-sub-title>Description</v-list-tile-sub-title>
            </v-list-tile-content>
          </v-list-tile>

          <v-divider inset></v-divider>

          <v-list-tile v-for="(r, k) in deviceData.ezRequesterModels" :key="k">
            <v-list-tile-action>
              <v-icon color="indigo">reply</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>
                {{
                  `${r.protocol}://${deviceData.ipAddress}${r.parameterModel}`
                }}</v-list-tile-title
              >
              <v-list-tile-sub-title
                >EzRequester Parameter
              </v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn
                dark
                icon
                :loading="ezRequesterSendingStates[k]"
                :disabled="ezRequesterSendingStates[k]"
                @click="sendRequest(k)"
              >
                <v-icon>redo</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
          <v-divider inset></v-divider>
          <v-list-tile>
            <v-list-tile-action>
              <v-icon color="indigo">phone</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>Send ping manually </v-list-tile-title>
              <v-list-tile-sub-title
                >Check Status Manually</v-list-tile-sub-title
              >
            </v-list-tile-content>
            <v-list-tile-action>
              <v-btn
                dark
                icon
                :loading="isUpdating"
                :disabled="isUpdating"
                @click="sendPing"
              >
                <v-icon>redo</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
import { DeviceData } from '@/types';
import { deviceDataEmpty } from '@/mocks';
import { vxm } from '@/store';
import { Sleep } from '@/utilities';
@Component
export default class detail extends Vue {
  public ipAddr: string = 'default';
  public deviceData: DeviceData = deviceDataEmpty;
  public isUpdating: boolean = false;
  public ezRequesterSendingStates: boolean[] = [];
  public p: string = 'ou';
  created() {
    // GET parameter はcreatedで取らないとエラー
    this.ipAddr = this.$route.query.ip as string;
    this.deviceData = vxm.devices.deviceMap.get(this.ipAddr);
    for (let i = 0; i < this.deviceData.ezRequesterModels.length; ++i) {
      this.ezRequesterSendingStates.push(false);
    }
  }
  public async sendPing() {
    this.isUpdating = true;
    await Sleep(1000);
    this.isUpdating = false;
  }
  public async sendRequest(i: number) {
    this.ezRequesterSendingStates[i] = true;
    await Sleep(1000);
    this.ezRequesterSendingStates[i] = false;
  }
}
</script>

<style scoped></style>
```


メソッド `sendPing` は期待通りの動作をしていて、ボタンのクリック時にローディングアニメーションが一秒間行われますが、
 `sendRequest` は期待通りの動作をせず、ローディングアニメーションにもならなければボタンがdisabledにもなりませんでした。

どのような原因が考えられるでしょうか

v1.5のVuetifyでv-btnのloading,disabledが反映されない

### 実現したいこと
- AndroidのPWAでインストールしたアプリアイコンに通知バッジを表示させる

### 発生している問題・エラーメッセージ
 
Androidで通知を受けたときにPWAでインストールしたアプリアイコンに通知バッジを表示させたいのですが、
アプリアイコンの方には表示されずブラウザの方に通知バッジが表示されます。
インストールしたアプリの設定では、通知ドットの表示を許可している状態です。

質問内容としては、AndroidのPWAでアプリアイコンに通知バッジを表示させることはそもそも可能なのでしょうか？
追加で必要な情報がありましたら都度追記していきます。
お手数ですがご回答をよろしくお願いします。


### 試したこと
- Androidの通知設定の確認
- 通知送信時にnotification_countを設定
- manifest.jsonの修正

### 補足情報（FW/ツールのバージョンなど）
- Firebase Cloud Messaging
- javascript
- React
- php7.2(kreait/firebase-php)
- Android バージョン9

※Reactとphpはサーバーを分けており、ReactからREST APIでphpを呼んでいます。

AndroidにPWAでインストールしたアプリアイコンに通知バッジを表示させたい

### 前提・実現したいこと

WEBアプリをPWA化し、通知を受け取りたいと思っています。
Firebaseのmessagingを活用したいと思っているのですが、以下のエラーがコンソールに発生しています。

### 発生している問題・エラーメッセージ

```
FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://*ドメイン*/firebase-cloud-messaging-push-scope') with script ('https://*ドメイン*/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
    at nt.<anonymous> (window-controller.ts:166)
    at tslib.es6.js:102
    at Object.throw (tslib.es6.js:83)
    at i (tslib.es6.js:74)
```

### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省略</title>
    <meta name="description" content="省略">
    <meta name="robots" content="noindex">
    <link rel="manifest" href="manifest.json">
    <script>
        window.addEventListener('load', function() {
            if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register("firebase-messaging-sw.js")
            }
        });
    </script>
</head>

<body>
　　省略
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"></script>
    <script src="省略.js"></script>
</body>

</html>
```

```json
{
    "name": "省略",
    "short_name": "省略",
    "icons": [{
        "src": "../image/省略.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "../image/省略.png",
        "sizes": "512x512",
        "type": "image/png"
    }],
    "theme_color": "省略",
    "background_color": "省略",
    "display": "standalone",
    "orientation": "portrait",
    "scope": "/省略/",
    "start_url": "/省略/"
}
```

```Javascript 
const STATIC_DATA = [
    'index.html',
    '省略.css',
    '省略.js'
];

var CACHE_VERSION = '省略';

self.addEventListener('install', function(e) {
    e.waitUntil(
        caches.open(CACHE_VERSION).then(function(cache) {
            return cache.addAll(STATIC_DATA);
        })
    );
});

var CACHE_DISP_VERSION = '省略';

self.addEventListener('fetch', function(event) {

    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            if (response) {
                return response;
            } else {
                return fetch(event.request)
                    .then(function(res) {
                        return caches.open(CACHE_DISP_VERSION)
                            .then(function(cache) {
                                cache.put(event.request.url, res.clone());
                                return res;
                            })
                    })
                    .catch(function() {});
            }
        })
    );
});

self.addEventListener('activate', function(event) {

    event.waitUntil(
        caches.keys()
        .then(function(keyList) {
            return Promise.all(keyList.map(function(key) {
                if (key !== CACHE_VERSION && key !== CACHE_DISP_VERSION) {
                    return caches.delete(key);
                }
            }));
        })
    );
    return self.clients.claim();
});

self.addEventListener('push', function(event) {
    var data = {};
    if (event.data) {
        data = event.data.json();
    }
    var title = data.notification.title || "無題";
    var message = data.notification.body || "メッセージが届いています。";
    event.waitUntil(
        self.registration.showNotification(title, {
            'body': message
        })
    );
});

self.addEventListener('notificationclick', function(event) {
    event.notification.close();

    const url = 'https://省略/省略';

    event.waitUntil(clients.matchAll({
        type: "window",
        includeUncontrolled: true
    }).then(function(clientList) {
        for (const client of clientList) {
            if (client.url === url && 'focus' in client)
                return client.focus();
        }
        if (clients.openWindow)
            return clients.openWindow(url);
    }));
});
```

```javascript
var firebaseConfig = {
    apiKey: "省略",
    authDomain: "省略",
    projectId: "省略",
    storageBucket: "省略",
    messagingSenderId: "省略",
    appId: "省略"
};
firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();
const vapidKey = "省略"

window.onload = function() {
    notification()
};

function notification() {
    Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
            messaging.getToken({ vapidKey: vapidKey })
                .then(async(currentToken) => {
                    if (currentToken) {
                        // トークン取得成功
                       *サーバー登録処理省略*
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        } else {
            // 通知を拒否した場合
        }
    });
}
```

### 試したこと
要素を検証＞アプリケーション＞登録解除で再読み込みしてみましたが変わりません。
firebase-messaging-sw.jsをドメインの直下に置く必要があることは調べましたが、補足情報に記載した通りの構造になっています。

### 補足情報（FW/ツールのバージョンなど）

構造
public
ー省略
ーーindex.html
ーー省略.js
ーーfirebase-messaging-sw.js
ーーmanifest.json

PWA(Progressive Web Apps)