博客 RSS 訂閱

chenwl 頭像

chenwl - ServiceWorker 使用

MDN 文檔 ServiceWorker 參考文章 Working with the JavaScript Cache API 代碼地址 目標 斷網情況下正常打開頁面，加載本地緩存數據 調試 chrome 控制枱 Application Service Workers 創建 serviceWorker 新建 sw.js 文件，初始化監聽事件： //sw.js // 版本號 con

pwa

收藏 評論

huaiyug 頭像

huaiyuG - Vuepress實現圖片漸進式加載

又名給vuepress寫一個插件😊 最終的效果如下 思路 最近在看pwa時，在MDN上看見一段有趣的關於實現漸進式圖片加載的snippet，大意如下： img src="thumbnail.png" data-src="origin.png"/img var imgToLoad=document.qureySelectorAll('img[data-src]') imgToLoad.forEac

vue.js , pwa , vuepress

收藏 評論

faker_5acebe0256c30 頭像

萬年打野易大師 - webpack配置使用PWA

pwa離線應用緩存使用APP在實際應用中很多會用到 重要插件：workbox-webpack-plugin 下載安裝 在webpack.config.js文件配置引入使用 plugins中添加 new WorkboxWebpackPlugin.GenrateSW({clientClaim: true, skipWaiting: true}) 使用，在入口文件引入service-worker //

node.js , pwa , npm , Javascript

收藏 評論

jerryc 頭像

JerryC - 如何構建可控,可靠,可擴展的 PWA 應用

概述 PWA （Progressive Web App）指的是使用指定技術和標準模式來開發的 Web 應用，讓 Web 應用具有原生應用的特性和體驗。比如我們覺得本地應用使用便捷，響應速度更加快等。 PWA 由 Google 於 2016 年提出，於 2017 年正式技術落地，並在 2018 年迎來重大突破，全球頂級的瀏覽器廠商，Google、Microsoft、Apple 已經全數宣佈支持 PW

pwa , Javascript

收藏 評論

jerryc 頭像

JerryC - ServiceWorker 緩存與 HTTP 緩存

雖然 ServiceWorker 和 PWA 正在成為現代 Web 應用程序的標準，但瀏覽器資源緩存變得比以往任何時候都複雜。 本文涵蓋了瀏覽器緩存的重點內容，具體包括： ServiceWorker 緩存與 HTTP 緩存的優先級？ 主流瀏覽器實現的 MemoryCache 和 DiskCache 在哪一層？ MemoryCache、DiskCache、ServiceWorker 緩

pwa , http緩存 , service-worker

收藏 評論

liuyue_5e7eb6745e089 頭像

劉悦的技術博客 - 天人合一物我相融，站點升級漸進式Web應用PWA(Progressive Web Apps)實踐

原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_216 PWA（Progressive web apps，漸進式 Web 應用）使用現代的 Web API 以及傳統的漸進式增強策略來創建跨平台 Web 應用程序，説白了，PWA可以讓我們的站點以原生APP的形式運行，但相比於安裝原生APP應用，訪問PWA顯然更加容易和迅速，還可以通過鏈接來分享PWA應用。 有許多知名的網絡平台已

pwa , 響應式設計 , tornado , 響應式 , 前端

收藏 評論

shuirong1997 頭像

林水溶 - PWA 圖標顯示問題，兼顧 macOS、Windows、iPad

首先看macOS任務欄的圖標規律： 會發現第三個：YouTube Music（PWA版本）的圖標很不對勁，不是因為它是圓形，其他都是方形。而是它很大，寬高明顯大過其他圖標。在我對比了VSC和YouTube Music的圖標圖片之後發現了區別所在： 上面看不明顯的話，這麼對比看就明顯了： 解釋下，圖3是圖2在控制枱（F12）資源那裏顯示的圖片，之所以看這個是因為可

pwa , 圖標 , icon , 前端 , Javascript

收藏 評論

laomao_5902e12974409 頭像

來了老弟 - vue項目引入pwa使網頁應用可安裝

最近在使用vue項目時看到一個這樣的效果，如圖： 現在其實有很多網站都支持把網頁安裝到電腦或手機（IOS Safari支持較好），如下圖安裝後的效果： 這些都是網頁應用。 接下來介紹一下如何讓你的vue2項目變得可以安裝。 添加cli-plugin-pwa 給現有的vue項目添加，使用下面命令： vue add pwa 執行完之後會自動在package.json添加"@vue/c

vue.js , pwa , service-worker

收藏 評論

laomao_5902e12974409 頭像

來了老弟 - vue項目部署後提示用户有新版本

你可能在瀏覽器見到過上面這種UI，這是在vue項目重新build在服務端部署後，瀏覽器刷新頁面彈出的提示，這時如果用户點擊更新就會重載頁面，清除之前的緩存獲取最新內容。 這是怎樣發生的呢？你可能會想到下面的方式： 服務端編譯重新部署維護一個版本號，客户端通過輪詢檢測和本地存儲的是否相同，發現更新的版本就彈框提示（缺點 耗電。尤其是在移動端） 通過在html中做版本標記... websoc

vue.js , pwa , service-worker

收藏 評論

vleedesigntheory 頭像

維李設論 - 面向邊緣場景的PWA實踐

背景 隨着5G技術的發展，物聯網邊緣側主要應用於數據傳輸量大、安全要求高以及數據實時處理等行業與應用場景中。其中，邊緣計算是一種分佈式計算模式，其將計算資源和數據處理能力推向接近數據源的邊緣設備，以減少延遲並提高響應速度。 對前端領域而言，面對邊緣場景下的應用開發也發生了相應的變化，其通常需要考慮邊緣側與終端側的實現方式，並且還需考慮相較於傳統 B/S 架構下的部署方案。本文旨在通過工業互聯網場

pwa , 雲計算 , 邊緣計算 , serverless , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - PWA 離線方案研究報告 | 京東雲技術團隊

本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用户的資源可以直接從本地加載，來忽略全國或者全球網絡質量對頁面加載速度造成影響。當然，如果頁面上所需的資源，除了資源文件外並不需要任何的網絡請求，那它除了不支持安裝到桌面，已經算是一個離線應用了。 什麼是PWA PWA（Progressive Web App）是一種結合了網頁和原生應用程序功能的新型應用程序開

pwa , webkit , 離線應用 , HTML , 前端

收藏 評論

chenxiaoxi_619df8932f34a 頭像

陳小西 - 對於企業軟件系統而言，唯一重要的架構設計是什麼

相對於系統軟件而言，企業軟件往往是面向應用場景、業務邏輯。雖然很多工程師、架構師會面帶嚴峻表情的告訴你，軟件項目所要保障的高可用性、魯棒性、可擴展性、高併發性、低延遲性、安全性、可測試性、靈活性，是如何如何的重要，彷彿一套只有幾個部門三五十人用的軟件系統，其架構也得是多麼科學、嚴謹、隆重的經歷一系列的設計、論證、測試，姿勢拉好、儀式感滿滿。 但現實中，多少企業的軟件系統是由代碼屎山堆成，多少IT運

pwa , 小程序 , 前端 , html5

收藏 評論

invalidnull 頭像

註銷 - 關於 PWA url 參數 ngsw-bypass=true

"ngsw-bypass-true" 這個參數是與 Angular Service Worker (ngsw) 相關的一個選項，用於控制在 Service Worker 中是否繞過緩存，直接請求網絡資源。在 Angular 應用中，Service Worker 主要負責緩存應用的靜態資源，以提高應用的性能和用户體驗。 首先，讓我們瞭解一下 Angular Service Worker 的基本概念。

ecmascript-6 , pwa , typescript , 前端 , Javascript

收藏 評論

invalidnull 頭像

註銷 - PWA 架構下文件 hash 的重要作用介紹

在PWA（Progressive Web App）體系架構下，文件 hash 起着非常關鍵的作用，它主要用於緩存管理、版本控制以及確保 Web 應用程序的可靠性。在前端開發中，文件 hash 是文件的唯一標識符，通常是文件內容的哈希值，例如 MD5 或 SHA-256。以下是文件 hash 在 PWA 中的幾個關鍵作用： 1. 緩存管理： 文件 hash 在 PWA 中用於實現緩存策略，確保在更新

ecmascript-6 , pwa , 前端 , html5 , Javascript

收藏 評論

kevinzhw 頭像

天涯學館 - PWA離線優先策略：提升用户體驗的關鍵步驟

Progressive Web Apps (PWA) 的離線優先策略是通過Service Worker和Cache API實現的，它允許在沒有網絡連接時仍然可以訪問網站的部分或全部內容。 1. 創建Service Worker註冊文件（service-worker.js）： self.addEventListener('install', (event) = { event.waitUntil

pwa , 前端 , Javascript

收藏 評論

youli_59e8536ad7c22 頭像

有李 - PWA實踐

PWA基礎 PWA應用是什麼樣子的？ 在主屏幕、應用啓動器、啓動板或開始菜單上都有**圖標**。 當您在設備上搜索應用時，此圖標會顯示。 會在一個獨立的窗口中打開，該窗口完全**獨立**於瀏覽器的界面。 可以與操作系統進行更高級別的集成，例如網址處理或標題欄自定義。 **離線**時也能使用。 應用內自定義安裝 需要滿足的條件 安裝相關API兼容性表格 不兼容系統的交互處理？： 點擊安裝按鈕 -

pwa , 前端 , Javascript

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用調研

1、PWA應用介紹 PWA 是一種通過現代 Web 技術提供類似原生應用體驗的 Web 應用。它的核心特性包括： 可離線訪問：通過 Service Worker 實現離線緩存快速加載 利用緩存策略加速資源加載可安裝 用户可以將 PWA 添加到主屏幕，像原生應用一樣使用響應式設計 適配各種設備屏幕 PWA 的核心技術包括： Service Worker：用於攔截網絡請求、管理緩存

pwa , HTML , 前端 , Javascript

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - PWA離線應用實踐

上篇文章整理了PWA離線應用的技術脈絡和注意事項，本篇文章將記錄使用Vue + Workbox + localforage 實現離線應用的實踐過程。 一、Vue工程改造 Vue CLI 提供了一個官方的 PWA 插件，可以快速為 Vue 項目添加 PWA 支持。運行以下命令安裝插件： // 在vue工程目錄下執行如下命令 vue add pwa 安裝完成後，插件會自動生成以下文件： src/

pwa , HTML , 前端 , Javascript

收藏 評論

dewujishu 頭像

得物技術 - 正品庫拍照PWA應用的實現與性能優化｜得物技術

一、背景與難點 背景 目前得物ERP主要鑑別流程，是通過鑑別師鑑別提需到倉庫，倉庫庫工去進行商品補圖拍照，現有正品庫59%的人力投入在線下商品借取/歸還業務的操作端，目前，線下借取的方式會佔用商品資源，同時在使用用途上，每借出10件會出現1次拍照留檔，因此會有大量的線上閲圖量在日常鑑別和學習中發生；正品庫可通過圖庫搭建，提升圖庫質量，大大節約線下用工和物流成本支出。 但目前庫內存量10～20W件，

pwa

收藏 評論

niewj 頭像

豐木 - centos7的/var/log/journal日誌文件太大清理

1. 查看journal日誌佔用空間 journalctl --disk-usage 2.只保留部分日誌 2.1 只保留500M的日誌 journalctl --vacuum-size=500M 2.2 只保留2天的日誌 journalctl --vacuum-time=2d

centos7 , Linux

收藏 評論

_624e4f5182eaf 頭像

mountisome - 解決Error when getting information for file “//tmp/VMwareDnD/..."

問題 今天使用虛擬機時遇到了一個問題：無法從windows拖拽複製文件和文件夾到虛擬機上，我用的是centos7。 它是這樣報錯的： Error when getting information for file “//tmp/VMwareDnD/..." 網上有文章提到要重裝vmware-tools，我試過沒有作用。之前還能複製一些文件，後面所有文件都複製不了了😂。 解決 於是我又在網上

centos7

收藏 評論

ryan_5fd1bc9a06259 頭像

wasdquiop - centos7 安裝 jdk

卸載舊版本 新環境虛擬機有自己自帶的openjdk，在安裝jdk前需要先把虛擬機的卸掉，防止多個jdk衝突 查看已安裝jdk rpm -qa | grep jdk rpm -qa | grep java 如果存在，挨個刪除已有版本： yum -y remove jdk版本 上傳 安裝包 鏈接: https://pan.baidu.com/s/1cOV10HZAZQPtRU1XyXG1tw

JDK , centos7 , Linux , JAVA , 程序員

收藏 評論

ryan_5fd1bc9a06259 頭像

wasdquiop - centos7 安裝 redis

centos7 安裝 redis redis是由C語言開發，安裝之前需要確保服務器已經安裝了gcc，可以通過如下命令查看機器是否安裝： gcc -v 如果沒有安裝則通過以下命令安裝： yum install -y gcc 安裝包 鏈接: https://pan.baidu.com/s/1dY9QPwWzUM-9bKtCmWIixw 提取碼: qrtb 也可以在線下載 wget htt

redis , arm , centos7 , Linux , JAVA

收藏 評論

ryan_5fd1bc9a06259 頭像

wasdquiop - centos7 安裝 nginx

centos7 安裝 nginx 安裝包 鏈接: https://pan.baidu.com/s/1kpAYYX_yy-vXX-1vsCPhoA 提取碼: qrtb 上傳 新創建usr/local/nginx文件夾，放到文件夾下 解壓 tar -zxvf nginx-1.9.9.tar.gz 安裝編譯環境 安裝gcc，源碼編譯依賴 gcc 環境 yum -y install gcc-c+

centos7 , Linux , JAVA , Nginx

收藏 評論