小编Jef*_*ick的帖子

我正在使用YouTube API 3作为客户端,但我没有收到所有当前视频.

API Explorer有4个结果:https: //www.googleapis.com/youtube/v3/search？ part = id%2C + snippet & channelId = UCwB4tpXCMW-bw5HpMlY6Bg & maxResults = 50 & key = {YOUR_API_KEY}

这是客户端YouTube页面:http://www.youtube.com/user/goldensteinart/videos ,共有7个视频.它们必须全部公开,否则它们不会出现在页面上,对吧？

我错过了什么？

我正在尝试让 Web NFC 通过Web NFC API工作，但无法通过以下错误消息：NotAllowedError: NFC permission request denied.

我在 Windows 10 计算机上的 Chrome 89 Dev 上使用它，源代码在本地运行。

我也尝试过互联网上发布的示例，包括Google 示例，但它返回相同的错误。我并不担心它目前处于实验阶段，因为提到这一点确实表明它已经成功通过了必要的测试，包括权限。

我正在使用的 HTML/JS 代码如下，我已经阅读了规范点 9.3，但我无法理解将其编写为代码，因此是否有一个指导算法可以帮助解决这个问题这？

async function readTag() {
  if ("NDEFReader" in window) {
    const reader = new NDEFReader();
    try {
      await reader.scan();
      reader.onreading = event => {
        const decoder = new TextDecoder();
        for (const record of event.message.records) {
          consoleLog("Record type:  " + record.recordType);
          consoleLog("MIME type:    " + record.mediaType);
          consoleLog("=== data ===\n" + …

我现在正忙着服务工作者.我试图让'fetch'事件返回自定义HTML,而不仅仅是纯文本,如下所示:

self.addEventListener('fetch', function(event) {
  console.log("Caught a fetch!");
  event.respondWith(new Response("I want to return HTML here"));
});

这是否可以使用respondWith函数？

我正在尝试NDEFReader()在 React 中用于 NFC 扫描/写入。此功能可在 Chrome 81 上使用（您今天可以通过下面的链接在移动设备上的 Chrome 测试版中尝试该功能）。

GoogleChromeNfcSample、 WhatWebCanDoTodayNfc

要启用此功能，您需要进入chrome://flags/并启用Experimental Web Platform features。

问题是我无法在 React 中完成这项工作。我将 create-react-app 与 TypeScript 和控制台输出结合使用：

找不到名称“NDEFReader”

我认为这会导致 webpack 检查。我已经尝试更改 tsconfig.json 中的一些设置，但没有任何效果。有谁知道如何启用实验性 js/ts 编译以启用此功能？

今天，我们可以找到许多示例，这些示例从服务人员向客户端发送消息，但始终message在服务人员接收事件之后进行。

我想知道我们是否可以独立于此事件发送消息吗？如果是的话，怎么办？我尝试了几件事，但没有成功...

就我而言，它是用于在我的服务工作者收到push事件时将客户端重定向到新页面。

当新的服务工作者在队列中时,我有一个简单的服务工作者,按钮更新.更新后我想在controllerchange上刷新页面,但没有任何反应.总而言之,所有服务工作者都会更新,但是按照该课程(https://www.udacity.com/course/offline-web-applications--ud899),他们会出于某种原因尝试添加该刷新.

在js中:

const updateButton = document.querySelector('.js-update-btn')

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
  .then(function (reg) {
    if (!navigator.serviceWorker.controller) {
      return
    }

    if (reg.waiting) {
      updateReady(reg.waiting)
      return
    }

    if (reg.installing) {
      trackInstalling(reg.installing)
      return
    }

    reg.addEventListener('updatefound', function () {
      trackInstalling(reg.installing)
    })
  })

  var refreshing
  navigator.serviceWorker.addEventListener('controllerchange', function () {
    if (refreshing) return
    window.location.reload()
    refreshing = true
  })
}

function updateReady (worker) {
  updateButton.disabled = false

  updateButton.addEventListener('click', function () {
    updateButton.disabled = true
    worker.postMessage({action: 'skipWaiting'})
  })
}

function trackInstalling (worker) {
  worker.addEventListener('statechange', function …

我正在 PWA 应用程序中进行离线支持。我正在为此使用工作箱。这是我当前的代码：

const addToFormPlugin = new workbox.backgroundSync.Plugin('addToForm');

workbox.routing.registerRoute(
RegExp('MY_PATH'),
  workbox.strategies.networkOnly({
    plugins: [addToFormPlugin]
  }),
  'POST'
);

该代码在我的计算机上似乎运行良好。但是，一旦我在手机上运行该应用程序，上传存储在 IndexedDB 中的请求需要很长时间。我知道它发生在 SYNC 上，但似乎至少需要 5 分钟。这不完全是我需要的。我想知道是否有一个选项可以访问 IndexDB 并在单击时“手动”发送所有请求。另一种方法是检查设备是否在线。以下是请求的存储方式：

我正在使用缓存存储来构建渐进式Web应用程序(PWA).我需要将一个自定义对象放入缓存中,但缓存接受Response对象作为参数.所以我的问题是如何正确创建具有JSON的Response对象.我知道我可以使用其他缓存策略(localStorage或IndexedDB),但我对这种情况特别好奇 - 将缓存中的自定义JSON保存为请求.

var myJSON = JSON.stringify({custom:"object"}); 
caches.open('cache-name').then(function (cache) {
  var response = new Response(); //My JSON should go into this Response obj. 
  return cache.put('cache-name', response);
});

在此讨论之后,哪里有评论可言

修补Fetch

通过重写self.fetch,self.XMLHttpRequest和self.caches(对于cache.add/addAll)？看起来这些会让你拦截网络请求并在主SW脚本看到它们之前操纵响应.

我一直在寻找任何有关这些东西的文档,似乎找不到任何文档.

在我只需要 multiple服务工作者共存于一个范围的情况下,

在其中一个importScripts中导入另一个的事件处理程序后,

我是如何修补fetch /避免获取竞争/让两个fetch处理程序都工作？

我正在开发PWA,我在我的网站上安装并激活了一名服务人员.它在本地服务器上进行测试时运行良好,但是当我实时发送代码时,它会失败.

这是我的SW:

const cacheName = 'v1';
const cacheFiles = [
    '/',
    '/css/styles.css',
    '/images/test1.png',
    '/images/test2.png',
    '/js/app.js',
    '/js/sw-registration.js'
]

// Install event
self.addEventListener('install', function(event) {
    console.log("SW installed");
    event.waitUntil(
        caches.open(cacheName)
        .then(function(cache){
            console.log('SW caching cachefiles');
            return cache.addAll(cacheFiles);
        })
    )
});

// Activate event
self.addEventListener('activate', function(event) {
    console.log("SW activated");
    event.waitUntil(
        caches.keys()
        .then(function(cacheNames){
            return Promise.all(cacheNames.map(function(thisCacheName){
                if(thisCacheName !== cacheName){
                    console.log('SW Removing cached files from', thisCacheName);
                    return caches.delete(thisCacheName);
                }
            }))
        })
    )
});

// Fetch event
self.addEventListener('fetch', function(event) {
    console.log("SW fetching", event.request.url);
    event.respondWith(
        caches.match(event.request)
        .then(function(response){
            console.log('Fetching new files'); …