webmaxru

    <h1 class="display-4 text-center">{name}</h1>

    <form class="row mb-3" on:submit|preventDefault={submitHandler}>

      <div class="col-sm-12 col-md-9 mb-1">
        <input
          type="text"
          class="form-control form-control-lg"
          id="urlInput"
          placeholder="Social media post URL..."

webmaxru

// Setting our own color scheme
$primary: #89c402;
$dark: #1a1a1f;

// Config
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';

// Layout & components
@import 'bootstrap/scss/root';

webmaxru

<script>
  let url = '';
  let result;

  async function getResult() {
    // We got TikTok's oEmbed API endpoint from the developer portal: https://developers.tiktok.com/doc/Embed
    let response = await fetch(`https://www.tiktok.com/oembed?url=${url}`);

    if (response.ok) {
      let data = await response.json();

webmaxru

import { Workbox } from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('service-worker.js');
 
  wb.addEventListener('installed', event => {
    if (event.isUpdate) {
      if (confirm(`New content is available!. Click OK to refresh`)) {
        window.location.reload();
      }

webmaxru

import { Workbox } from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('service-worker.js');

  wb.register();
}

webmaxru

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-sw.js')

// SETTINGS

// Path prefix to load modules locally
workbox.setConfig({debug: true})

// Updating SW lifecycle to update the app after user triggered refresh
workbox.core.skipWaiting()
workbox.core.clientsClaim()

webmaxru

{
  "scripts": {
    ...
    "workbox-build-inject": "node workbox-build-inject.js",
    "build-pwa": "ng build --prod && npm run workbox-build-inject"
  },
  ...
}

webmaxru

const {injectManifest} = require('workbox-build')

let workboxConfig = {
  globDirectory: 'dist/angular-pwa',
  globPatterns: [
    'favicon.ico',
    'index.html',
    '*.css',
    '*.js'
  ],

webmaxru

// For the simplicity let's use Workbox hosted on CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.0.0/workbox-sw.js')

// Detailed logging is very useful during development
workbox.setConfig({debug: true})

// Updating SW lifecycle to update the app after user triggered refresh
workbox.core.skipWaiting()
workbox.core.clientsClaim()

webmaxru

import { register } from 'register-service-worker'

register('/service-worker.js', {
  updated (registration) {
    // "Click to refresh" prompt
  }
})